Creating a design system from legacy design

Overview

Project Summary

During my time on a Telecom-based design system team, I delivered a comprehensive design system for the iOS retail teams, aligned with Apple’s Human Interface Guideline (HIG) and built with SwiftUI. The final product included over 120 UI components, now used by over 150 designers and developers, enhancing product experience and consistency.

Project details

Role: UX Designer

Tools: Figma, UXPin

Platform: mobile web

Team: 2 UX designer, 6 developers, 1 project manager

Timeline: 4 months

Problem

The existing iOS design system is currently confusing and not well documented for current users, leading to frustration and inefficiency. Additionally, the assets suffer from outdated design elements and require both visual and structural updates to enhance usability and accessibility.

Solution

Deliver a comprehensive new branded iOS design system on Figma specifically tailored for frontline retail. This design system should encompass a range of components that not only align with Apple’s Human Interface Guidelines (HIG) but also be expertly created using SwiftUI for optimal performance and usability.

Final design

Research

Balancing new and old changes

We began the project by pinpointing the issues that the new design system would address and ensuring they aligned with our business goals. The old iOS design system was outdated both in terms of design and technology. Our old design was a reskin of the web-based design system to suit mobile use. Many features, like carousels, tooltips, and accordion menus, weren't optimized for mobile.

From a technical viewpoint, developers struggled to adjust existing elements, leading to inconsistencies in component versions. To tackle these problems, the team developed a new design system closely following Apple’s Human Interface Guidelines (HIG) and used SwiftUI for the technology.

Adhering to HIG helps us build on users' existing knowledge and benefit from Apple’s long history of research into usability. Although the changes were substantial, the design system team maintained an atomic design approach while creating new components.

Explorations

Planning

The new components were meticulously created in Figma. My primary role in this project was to develop all the essential components required for the innovative design system. Collaborating closely with research teams and iOS developers, I conducted a thorough analysis to compile a comprehensive list of essential components.

This list was thoughtfully based on the key functionalities of each component, as well as the component list outlined in the official Human Interface Guidelines (HIG).

Build

Validating design against current users

During the design system's build phase, the team worked with our researcher to conduct accessibility tests on the components. We compared the old components with those made by Apple. One issue with the previous design system was that the components were too rigid and not easily customizable. We saw this as a chance to allow teams to make choices that enhance the user experience. For instance, we greatly expanded button options while maintaining the design system's core integrity.

As the design system evolved, the team needed to document these components for other teams to use. We referred to previous tools and feedback to create a helpful documentation template.

Outcome

Impact

  • Stakeholders and consuming teams were excited about the migration.

  • The new design system will improve efficiency for design and development.

  • The new components match how iOS users think.

  • With better design and built-in accessibility, retail specialists can assist customers more efficiently.