Vodafone Smart Tech App

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 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.

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.

Global Flows

In order to further align the Design Team with the Development one I’ve worked on documenting and cataloguing the Global Flows which are base flows present in all of the different areas of the app, regardless of which smart device the user has purchased. I’ve then created a library of flows which can be easily and swiftly selected and applied on any given project, to facilitate and expedite designer’s as well as developer’s workloads and to keep UI / UX consistency across app’s areas and products.

In the Figma file below, it’s possible to see all of the different studies around typography, colours, spacing, accessibility, buttons, lists, cells, dialogues, navbar, snackbar, menu etc

Smart Tech App – eSIM Ecosystem – Flows

An eSIM (embedded SIM) is a tiny chip installed in your device that connects to the mobile network, similar to a physical SIM.

- It cannot be physically removed or replaced
- During set up, an eSIM profile is loaded onto your device through an internet connection
- The eSIM profile contains the same information previously stored on a physical SIM

As part of my work into developing the Smart Tech app design system I was responsible for how the UX and UI of the eSIM service would be designed and seamlessly merged with the other areas / products within the app in the European market. I’ve created user-centered styles, components, and patterns by considering market analysis, customer feedback, site metrics, and usability findings, aligning team with the other IoT product teams and enhancing the CX of the overall Vodafone Smart Tech app.

eSIM – User / Connectivity / States

Device and Subscriptions

Payments

Invoices

Guest – Device and Subscription

Personal Details

Help and Support

About

Information Architecture

Prototype – eSIM Activation Flow [DE]

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

Elia Alberti