Vodafone Smart Tech App‎ Design System

Smart Tech App – The Design System

I’ve been responsible for the development of a global design system, built with a flexible, reusable, scalable and maintainable structure. In order to allow both designer as well as engineers to contribute to further develop it and enhance it within their respective areas of the app, I developed and implemented a contribution model enabling really anyone to collaborate on the design system.

I therefore developed and maintained detailed user-interface specifications and design patterns, describing the standards and best practices of our component library as a reference for designers and developers.

The main problems identified

Lack of Cohesion resulting in disjointed development and no clear modular boundaries
Inconsistent UI Design lacking a unified design language and standards
Failure to document design decision and architecture

The goal of the project

Improve maintainability and modular reusability
Create a coherent, consistent and reusable user interface
Facilitate knowledge transfer and future modifications
Create a contribution model which would enable anyone to further develop the design system

How I planned to solve it

Working closely with the development and the product design team I’ve harnessed effective strategies and a set of best practices that are pivotal in navigating the complex terrain of system design, such as:

Adhering to design consistency, correctly applying all of the four core elements of the design system such as iconography, typography, colors and grids and spacing.
Ensuring design’s scalability, discussing with the wider teams how scalable design is essential for future grow and changes by covering responsive design principles, modular approaches and the use of scalable vector graphics (SVGs).
Incorporating accessibility, providing guidance on adhering to accessibility standards like WCAG and incorporating inclusive design principle.
Balancing aesthetics and functionality addressing and developing intuitive navigational elements and paradigms as well as a clear visual hierarchy when looking at components and layouts.

The Contribution Model

Setting up a clear and well defined contribution model allows product teams to add new features based on their product requirements. At the same time, it allows to keep an eye on the quality and consistency of the user experience.

When a team identify a need for an update in the design system, they are encouraged to raise it by filling out a straightforward Asset Contribution Form:

This submission helps in comprehending the issue, identifying the stakeholders, and outlining the contributors’ expectations. In order to streamline this procedure, contributions are categorised in three primary use cases:

Light contribution: A small design tweak to an existing component or style.
Medium contribution: A bigger change to an existing component or UX pattern.
Heavy contribution: Creating a brand new component, UX pattern or tool.

In order for any contributor to determine the correct contribution weight, I created the following diagram:

The Contribution process

Our team follows the contribution process defined below. The process may vary depending on the level of contribution:

Contribution proposal: The first step of a contribution is always a conversation in order to reduce potential rework and frustration for the contributors by refining the solution before the work begins. Contribution proposals help the team to understand what you’re trying to achieve, and potential blockers along the way.
Kick-off: For medium and heavy contributions, schedule a kick-off meeting with the team. During this meeting we agree on the scope of contribution, discuss your involvement, and also confirm timelines.
Collaboration: Contribution are effectively a way of collaborating, supporting each and every team on their journeys.
Review: Before publishing the new feature, always make sure that the contribution conforms to our high standards for accessibility, usability, and consistency in user experience.
Publish: In the last step make sure that the new feature is documented, communicated, and showcased within the company when it gets published.

The approach

The system creates a single source of truth for all involved, and includes; colour, typography, iconography, UI components, accessibility and more. It acts as a toolkit to enable the designers to work more efficiently and empowers engineers to bring those ideas to life. Translating a user experience into a human experience.

It extends way beyond the app, touching all aspects of design within Smart Tech – to ensure the same sensibility, character, and care across all mediums and touchpoints.

Below is the actual Figma file of the design system which you can navigate, zoom in or out on all areas or launch full screen for a more immersive experience and to be able to view all of the different sections of the file:

Design Workflow

Design System Components

The contemporary aesthetic stems from translating design principle values into specific guidelines, to inspire and frame our thinking when selecting visual, interactive, and material choices.

Essential

Elements are kept to a minimum, drawing emphasis on our product’s usability and functionality.

Iconic

Texture, audio, animation, and colour – each is used sparingly to create signature moments to elevate the feel of the product without distracting from the function.

Minimal

Deliberately neutral, yet bold. Our main colours are black, grey, and white. Red is used throughout as a link to our Vodafone routes – an accent colour rather than a dominant colour.

Naturally, we use other colours in the system, but these are selected to emphasise product functionality and enhance the user experience, never for decoration.

Considered

Carefully considered elements and content are arranged with a clear functional and educational hierarchy, resulting in a visual and harmonious appearance.

Realistic

Our experiences are about connecting the worlds of digital and physical, we bridge the two finding ways for each to complement each other. From utilising CGIs of products to create interactive guides, to using animation and sounds to connect a device and the app on a sensory level.

Design system exploration and studies (Figma)

How I measured success data analysis

Upon launching the newly enhanced and optimised Vodafone Smart Tech Design System I could collect the following data:

65% less

developers’ requests for ad-hoc visual elements and components, regardless of specific smart device, journey and market.

52% less

time spent building user flows, customers journeys and developing specific areas of different Smart Tech devices.

46% increase

of development production speed since now developers didn’t have to spend a consistent amount of their time chasing informations and specs.

35% increase

in customer satisfaction following the first three months from the launch of the design system (CSAT survey score).

The global IoT connectivity leader

Vodafone’s IoT service was established in 2008 and has grown to be the largest IoT connectivity provider globally, with 150 million devices connected. Vodafone IoT has been recognised as a leader in managed connectivity by Gartner every year since 2014. Vodafone IoT currently generates €0.9 billion annual revenue with double-digit revenue growth and a strong double-digit ROCE. The total addressable market is €10 billion and expected to grow 16% p.a., with further stimulus from the NextGenerationEU recovery plan funding, supporting Vodafone’s further expansion into end-to-end IoT services.

CLIENT

Vodafone Smart Tech – IoT Devices