Xetova Design System‎ ‎ •‎ ‎ Design Maturity

Xetova is a tech company in Nairobi that has experienced success in providing AI-powered products and services to government organizations, NGOs, and corporations. As the company expanded, it became apparent that the lack of a cohesive design system was hindering the user experience and hindering the ability of new designers to quickly contribute to the team.

Creating the Design System

The Design System’s Goals

To address this issue, I led the design team in implementing a new design system for Xetova. The design system is a set of design guidelines, patterns, and components that are used to create a consistent look and feel across a company’s products.

Components — Xetova Design System on Figma

By creating a new centralized design system, we aimed to:

Align our design & engineering teams by providing them with a more structured and guided approach to building products.
Speed up our design and development process by using a ready-made library and design patterns.
Improve brand perception and user trust through consistent experiences that are accessible to all users.
Promote accessibility in our products by incorporating accessibility and inclusion into our component libraries from both a design and code perspective.

While it was clear that this project would require a lot of resources, planning, and time commitments, we knew that this work was a justified long-term investment by the company towards their brand standards and customers.

That changed users’ behavior

By making the design system a single source of truth for the builders — designers and developers — we made a positive impact on how end users interact with Xetova’s products:

Increased product consistency & reliability: we improved the consistency and predictability of our predictive insights products, by increasing the coverage of the design system for the products from 2% to 80%.
Reduced customer confusion: we received 23% less complaints related to confusion with the product. These were based on feedback review sessions between the design team and the Head of Product and QA Manager.
Higher customer’s perceived value: within 6 months of the design system’s adoption, the customer’s perceived value of the product grew by 20% through the products’ consistent and high-quality user experience.
Increased customer satisfaction: by providing a more consistent and cohesive user experience, our customer satisfaction metrics grew by 10%.

And implemented these business goals

Overall, the introduction of a design system at Xetova has been a success since its implementation in June 2022, resulting in improved user experiences and greater efficiency between the design, engineering and sales teams.

Increased usage of design system components: the number of pages & features that use design system components grew from 9% to 78%.
Shorter design and development time: it takes 37% less time to design and develop new features, since it is now it easier for teams to use and implement pre-designed system components.
Increased team collaboration: the level of collaboration between design and development teams grew by 25% in the first 6 months since they had a shared set of tools and guidelines for them to use.
Reduced design inconsistencies: the number of design inconsistencies reported by users or identified during QA testing decreased by 50% in the first six months within adption.
Increase in product design consistency: the consistency of designs across different products has grown by 50% within the first 6 months since all designers have access to the design system, and it’s elements are inherited across all product design files.

The process

Research & Definition

To begin, we conducted research to spot the main goals and pain points that our products’ internal stakeholders (designers, developers, product managers, marketing managers etc.) experienced. This is what we found:

“I keep redesigning pages that have the same elements because they all look different,” — a Product Designer

“I can’t re-use a component from another project, since they don’t have a similar structure,” — a Front End Engineer

“Our products have many inconsistencies in colors, fonts, components, guidelines…, which is creating detrimental effects on the overall user experience & the brand image,” — a Senior Tech Officer

After this, we identified common design patterns and elements across our products. This included creating a UI inventory of our main interface components. We then used this information to create a priority list for our design system MVP.

The MVP list of elements to be included in the design system

This audit activity helped us identify inconsistencies in our design assets and highlighted the need for a more systematic approach to documenting, communicating, and maintaining our design system.

Design

Based on this research, we introduced tools and processes to help our team consistently apply the design system in their work. This included the creation of a shared design library with reusable components, as well as the establishment of a review and approval process to ensure that all designs adhered to the guidelines:

Color & font systems that match the overall brand guidelines
Components that are accessible, intuitive and aesthetic
Incorporating the widely used Material Design icon system for easy adoption by designers, developers and users

We referred to several design systems such as Uber’s Base Gallery, Slack’s design guidelines, Material, and other design systems for some good practices, guidelines and tools that we could apply in our design system.

Google’s Material Symbols Library

Icons — Xetova Design System on Figma

The Design System is now available to all of Xetova’s team members.

Who I collaborated with

I collaborated with a cross-functional team to create the design system. The team included the following members:

Product Managers: They provided insights into the business goals and objectives of the design system.
Developers: They ensured that the design system was easily implementable and consistent with the company’s technology stack.
Researchers: They conducted user research to understand the needs and pain points of our target audience, and used this information to inform the design decisions.
QA: They ensured that the design system was accessible and compliant with industry standards.
Other designers: They ensured that the design system aligned with the company’s branding guidelines and visual identity, and provided feedback and suggestions to improve the design system.

Collaborating with a cross-functional team allowed us to create a design system that met the needs of all stakeholders and provided a consistent and cohesive user experience for our customers.

Challenges

As a designer creating a design system, some of the challenges I faced include:

Managing conflicting priorities: Different stakeholders may have different priorities and goals for the design system, which can make it difficult to create a system that meets everyone’s needs.
Balancing consistency and flexibility: Finding the right balance between consistency and flexibility in the design system was a challenge. Ensuring the design system was flexible enough to accommodate different products and use cases while still maintaining consistency, was not an easy task.
Addressing legacy designs: We had to address and assimilate legacy designs and components that had accumulated over time, it was challenging to reconcile them with the new design system.
Managing change: Introducing a new design system can be disruptive for teams that are used to working in a certain way. Managing the change and providing enough support and resources to help teams adapt to the new system was a challenge.
Measuring success: It was challenging to define and measure the success of the design system. Identifying key performance indicators and tracking progress was crucial to ensure the success of the design system.