Developed a design system to empower the team to create products with consistency and enhanced scalability, accelerating development.
DigiHealth
Role
Interaction Designer
Responsibility
- UI Design
- Design System
Team
Jerald Lam (Project Manager)
Background
The project centered around addressing challenges related to IHH Healthcare’s patient journey, which was supported by 3 separate apps built by different vendors. This scenario led to several issues:
ISSUE 1
Fragmented UX
Users were required to download multiple apps across various touchpoints, necessitating additional effort to understand each product’s functionality and become familiar with diverse design patterns.
ISSUE 2
Inconsistent design language, styles, and product pattens
The absence of a unified design language resulted in incongruent brand representation. Developers have to create duplicate components rather than reusing them, slowing down their work with every new product or project.
Objectives
Our primary objectives were twofold:
OBJECTIVE 1
Merge distinct apps into a single comprehensive app
We wanted to translate the core features into a web-app format, providing a unified experience for users on both the app and web platforms.
OBJECTIVE 2
Create a cohesive design system
This would ensure consistency in design language and UX across both web and app interfaces. It would also enable the product team to expedite future product launches through reusable design components and patterns.
Conducting Design Audit
We began with a comprehensive UX flow audit. This step allowed us to understand the existing flows and propose minor UX enhancements for web-app adaptation.
During this phase, we also cataloged a comprehensive list of design components scattered across the apps. This inventory covered a wide range of styles and components, such as text styles, colors, icons, and buttons. The collection served as a foundation for our design system creation.
Defining Design Foundations
With insights gleaned from the audit, I proceeded to create a design system rooted in IHH Healthcare’s brand guidelines. This design system included fundamental design tokens: colors, typography, and sizing.
Color
I simplifying the color palette, focusing on accent colors, system feedback colors, and a neutral palette to maintain functional clarity while ensuring accessibility. I detailed the guidelines for their use.
Typography
I adopted their brand typeface – Urbanist with varying weights. This flexibility enables future designers to expand its usage as needed. I also established consistent sizing and line-height through a type scale, ensuring legibility and adaptability across different platforms. Distinct headings were defined for both the web-app and app interfaces to maintain coherence.
Design assets
Proceeding to design assets, I selected a healthcare illustrations pack that conveyed neutrality and a touch of friendliness to provide comfort to users navigating health-related challenges. Additionally, I integrated Material UI icons, known for their comprehensive variety and ease of integration into the codebase.
Reusable components and templates
My focus then shifted to redesigning core flow UIs and adapting them to the web-app. Throughout this process, I consistently created components that adhered to the refined design language.
Concurrently, I devised page templates based on common screen archetypes, all designed using auto layout. This approach enabled future designers to swiftly assemble screens by effortlessly dragging and dropping UI components into templates. These components were optimized for responsiveness across both app and web platforms.
Documenting the design system
Following component creation, I documented use cases, purposes, working principles, states, and best practices for each component and template within Figma. This documentation serves as a guide for future designers, ensuring clarity and consistency in component usage.
Project Results
We handed over to the product team. They could now harness the design system to develop the newly designed web-app and refine components that lacked consistency within the existing app.
We encouraged IHH Healthcare to establish an internal design team to manage the design system and processes. This initiative ensures design system’s continuous maintenance and updates, preventing the reliance on external resources and ultimately enhancing design ownership and control.