Vodafone - Source

Vodafone is a British multinational telecommunications company. Its registered office and global headquarters are in Newbury, Berkshire, England. It predominantly operates services in Asia, Africa, Europe, and Oceania.

Vodafone Source is the global Vodafone design system. Vodafone Source aims to drive brand and UI consistency across all markets through a shared understanding of the Vodafone design language, accelerate time to market, and increase design ideation and market cooperation in Vodafone’s design community.

By using Source, designers can focus on design challenges that are unique to a project or market, instead of re-creating common design assets.

Challenge:

At first glance, the system had many components and categories. Through careful examination and user research, I began to see many gaps in the system and the pain points of the users and stakeholders. I discovered several issues needed to be addressed.

• Teamwork and communication gaps.

• Performance and accessibility of the hosting platform. (sketch & Invision)

• Components were not built using industry standards.

• Lack of usage and spec documentation.

• Confusing information architecture.

• No developer integration in the components building process.

• Missing key components, guidelines, and principles.

Design Considerations

To resolve all the issues discovered in my research me and my team took the following steps:

• Established a clear naming convention between designer and developer teams.

• Reorganized the information architecture.

• Remove redundant components, overrides, and variants.

• Refine components to be more responsive, reusable, and accessible.

• Created detailed system and component level documentation.

• Worked with a development team to align source components and the existing component code base.

• Established a governance committee and contribution model.

Role Responsibilities

• Ensure all components work together as a whole; regardless of market or product.

• Establish and manage collaboration and contribution models with product design teams in various markets.

• Work with the developer community to ensure the design system functions well and support the component implementation and development process.

• Provide documentation and guidance on how, when, and why components, styles, and patterns are applied in code and design.

• Advocate for the design system throughout the company, representing the team in product discussions and educating other designers on how the system works.

• Facilitated the migration of Source from Sketch and Invision to Figma.