UI and UX design | Design systems

Overview

Vodafone, a prominent player in the UK's mobile network industry, boasts a staggering customer base exceeding 18 million. In response to the evolving digital landscape, the company embarked on a mission to elevate its online footprint and enrich user interactions on all fronts. The primary objective revolved around establishing a unified and seamless design framework, aiming to not only tackle existing usability challenges but also set the stage for upcoming digital advancements.


As a Product Design Lead within Vodafone’s Group’s Design System Team, I played a crucial role in the development and implementation of a dynamic multi-brand, multi-platform design system across the business. This included creating and curating component libraries, working closely with cross-functional teams to ensure seamless implementation, and continually refining and enhancing the design system. Additionally, I took charge of crafting interactive prototypes, conducting thorough usability tests, placing a strong emphasis on accessibility, and documenting components to facilitate clear usage. Collaboration with developers was also a pivotal aspect of my role, ensuring the successful execution of our design system.

I was brought in for the first year to help reorganise and streamline the design process of Vodafone’s global design practice, implementing innovative strategies and fostering collaboration among teams to enhance overall efficiency and creativity in the company's design endeavors.

Creating a new process for the design and delivery of the design system

The process was broken

The state of Vodafone's design process and tools was in disarray, necessitating a comprehensive overhaul. To address this issue, we embarked on a rigorous investigation to understand the root causes behind the mismanagement of tools and processes. It became evident that the existing tools were being misused or underutilised, leading to inefficiencies and hindrances throughout the design workflow.


In response to these findings, we developed new propositions aimed at streamlining the design process and optimising the tools for greater effectiveness. One critical proposal involved transitioning from using InDesign for documentation to leveraging Figma, particularly for the benefit of the development team. This shift was essential in fostering a more collaborative and agile environment, facilitating smoother communication and feedback loops, and ensuring that the development team could seamlessly integrate design elements into their work.


By instigating these changes and realigning the design process with more suitable tools, we sought to enhance productivity, promote cross-functional collaboration, and ultimately elevate the quality of our design output at Vodafone.

Stakeholders pivot on new ways of working

During the design system migration, I conducted Figma workshops to prepare the Vodafone design team for efficient task handling. The workshops showcased Figma's collaborative potential, real-time editing, responsive design, and seamless integration with existing tools.

I addressed stakeholders' concerns with concrete examples of Figma's impact and influenced them to adopt it as the exclusive design handover tool.

Key to our future build, a design process was mapped to give clear direction for all members of the project. everything from component sign off, dev hand over, to legacy designs.

Preparing a timeline for the migration and future journeys

The migration discovery phase

As this was a first for Vodafone and many other staff, we tested various ways of the migration, our first attempt was to import the sketch files directly into Figma, we had a 2 week exploration on how things could work doing this.

What we discovered and the problems we faced

We discovered that importing the files directly into Figma caused the application to be painfully slow. Not only that, but it also resulted in a mess with layers scattered all over the place. Additionally, various components with the same names as the new design system were causing quite a bit of confusion.

How we addressed the problem

By importing the screens as PNG format, were able to save space on the files and also work from pixel perfect designs, the Figma import does not always show the true design, such as padding and fonts.

This also kept the file super clean, there were no ghost components in the background and everything was working as it should. Moving forward all 32 journeys used this method successfully.

Setting up the Figma account and creating workspaces for the company.

How I did this

Right from the beginning, my role demanded active participation in key stakeholder meetings and close interaction with the Figma team to work on the enterprise license for Vodafone. This encompassed a wide range of responsibilities, starting from the initial setup of the account to defining the precise permissions for both internal and external staff.

One of the primary tasks was to establish workspaces tailored to different projects and teams within Vodafone. This involved understanding the unique requirements of each unit and creating an environment within Figma that promoted seamless collaboration and productivity.

Building the design system

Once the design system was around 80% complete, our focus shifted to creating new journeys. We incorporated additional components for these journeys into the system and documented them for developers.

This allowed us to ensure that the new journeys seamlessly integrated with the existing design system and provided a consistent and cohesive user experience across all journeys.

Using the design system

Once the process of mapping out the journey was completed, the team focused on integrating essential elements from past designs, ensuring their applicability to future journeys. Simultaneously, we dedicated considerable effort to refining fundamental aspects such as typography, colour schemes, navigation, and auto layout spacing.

To maintain coherence and progress, the team convened weekly to deliberate on the prioritisation of key components for inclusion in the evolving design system.

How and why?

During the design system migration, I took the initiative to conduct comprehensive Figma workshops and training sessions three times a week. The primary objective was to ensure that the Vodafone design team was adeptly prepared and well-equipped to tackle the upcoming tasks with confidence and efficiency.

After the initial training sessions, I then continued to support all members with a weekly Figma catch up. This regular meeting allowed anyone who had issues with components, auto layouts, or general questions on the ways of working to seek assistance and guidance from me. It was crucial to maintain consistent support throughout the project tasks to ensure that quality standards were upheld and deadlines were successfully met.

Challenges and how I overcome them

Challenges encountered on this project revolved around bringing the junior designers, who were deeply engrossed in utilising sketch, up to par. Stepping out of their comfort zone posed a potential threat to the smooth progress of the project. Recognising this, a significant decision was made to provide extensive support and regular one-on-one sessions for the junior designers. This proactive approach aimed at fostering their confidence and equipping them with the necessary knowledge to significantly elevate their contributions within the squads.

Online and offline training

Challenges encountered on this project revolved around bringing the junior designers, who were deeply engrossed in utilising sketch, up to par. Stepping out of their comfort zone posed a potential threat to the smooth progress of the project. Recognising this, a significant decision was made to provide extensive support and regular one-on-one sessions for the junior designers.

This proactive approach aimed at fostering their confidence and equipping them with the necessary knowledge to significantly elevate their contributions within the squads.

Migration basics

During the training, we focused on creating mini-documentations for the new ways of working. This documentation served as a valuable resource for understanding the basics of migration, enabling junior and inexperienced Figma designers to follow a structured and clear process. By breaking down the complex tasks into simple, step-by-step guides, we aimed to empower our team members with the knowledge and confidence to embrace the new workflow seamlessly.

The mini documentation not only provided a roadmap for the migration process but also served as a reference point for continuous learning and improvement in utilising Figma effectively. We believe that by equipping our team with these resources, we can foster a collaborative and supportive environment where everyone, regardless of their experience level, can contribute to the success of our projects.

Sprints

Our usual sprints would typically last for 2 weeks, with the occasional sprint extending to only 1 week based on the project's scale, urgency, and the specific demands from our stakeholders. Given that our teams were strategically dispersed across Europe to leverage specialised talent and local market insights, we factored in different time zones for our daily catch-up meetings and end-of-sprint reviews.

This approach ensured seamless collaboration, efficient progress tracking, and the ability to swiftly adapt to evolving client needs and market dynamics.

Team retro

After every sprint, each team would collate there thoughts on how the sprint went, everything down to communication, problems, what actions we need to take and also what went well.

This such an important part of working during a massive project, the earlier you can iron out the faults, the better the process will be in the long run. Also it’s about keeping your team happy which is must.

All findings would then be played back to the account director.

Conclusion

The design system has brought big benefits, like saving money and making it easier for designers and developers to work together. Using the same components has made work faster and saved time and resources. This not only saves money but also helps teams work better together.

The design system has been really important for improving how designers and developers talk to each other. By using the same language and design elements, it's easier to share work and there are fewer misunderstandings. The design system has also helped make collaboration better, resulting in better end products. In the last two years, the design system has saved about £4 million for Vodafone. This has not just made work more efficient, it's improved how different parts of the organisation work together.

Time to reflect

What went well

Really happy with the way I have introduced a new way of working for vodafone, especially upskilling the vodafone creative team in Figma.

What problems did we face

Partners holding us up with sign off for figma, I produced a pack to help them understand why we needed to push the migration through.

What would I improve

Better communication between Partners and design, It was always a huge task to bring them onboard to sign specific requests which could delay targets.