Design Sysyem
Introduction
This case study highlights my journey in establishing a robust design system that not only streamlined our app development but also enhanced collaboration across teams and improved the user experience.
I spearheaded the development of a comprehensive design system that transformed a fragmented UI into a cohesive, flexible, and efficient framework.
Background
When I joined Leva Clinic, the app was in its infancy, primarily consisting of broad wireframe concepts and a very basic MVP with limited scope. The initial goal was to facilitate patient onboarding and prescription management, with future expansions planned for features like video consultations, pain tracking, and resource sections. The existing UI kit, designed by a contractor, was attractive but lacked consistency and scalability.
Continuing with this kit risked chaotic growth, devoid of clear design rules or patterns. Recognizing the need for structure, I set out to create a comprehensive design system to guide the design process and asset generation.
Objective
Build a flexible and robust design system that could accommodate new components and modifications without disrupting the entire framework. This system needed to encompass typography, color schemes, imagery, sizing, spacing, and element dimensions, forming a solid foundation for future development.
Importance
A scalable design system is crucial as it forms the backbone of app design, ensuring a consistent and high-quality user experience. Implementing an industry-standard system would not only enhance the app but also unify the brand experience across all digital platforms, fostering a cohesive interface and user journey.
Impact
For me, as the sole designer, the design system was a game-changer. It provided a tailored toolset for rapid prototyping and problem-solving while maintaining consistency and aesthetic appeal.
Developers
Developers benefited from having a clear reference, enabling them to build features quickly and accurately. This facilitated better collaboration, ensuring designs were implemented correctly and efficiently.
The End-User
Ultimately, patients and users experienced a more intuitive, accessible, and enjoyable app, with user feedback driving and informing continuous improvements.
Research & Learnings
I delved into creating an atomic design system with tokenised elements. Leva’s brand colours—blue and mint green for clinical themes, mauve and peach for caring themes—guided the design.
I prioritised readability and colour contrast, learning about color systems and type scaling ratios for optimal choices. Establishing clear naming conventions for sizes (XS, S, M, L, XL) and color tones (0-100 scale) was crucial for an organized system.
Setup
-
Typography: Using the Golden Ratio (1.618) for standardizing sizes and line heights.
-
Color System: Defined primary, secondary, and tertiary colors, with 10-tone swatches and semantic colors for warnings, errors, and successes.
-
Spacing: Adopted a ratio of 4, creating tokens and variants for consistency and speed in iterations.
Molecules
Built base elements such as buttons, inputs, dropdowns, and selectors using atoms. For example, the button component had multiple variants (default, hover, active, etc.) and sizes, resulting in 360 possible combinations, covering all scenarios across the app and web.
Organisms
Developed larger components like cards, tiles, and modals, focusing on layout and efficient use of space. Variants allowed for extensive customization from a single base component, ensuring flexibility and uniformity.
Templates
Created page templates by dragging and dropping components from the library. New elements were added as needed, adhering to atomic principles, ensuring quick and consistent design implementation.
The Approach
The Result
Leva Clinic now boasts a thriving design ecosystem, enabling high-fidelity app feature design swiftly and efficiently. The design system, though simple with 4 atoms, 20 molecules, and 14 organisms, is versatile and scalable, ready for future feature development. It also supported a major app navigation restructure, allowing rapid prototyping and effective communication with stakeholders.
The design system’s success lies in its seamless integration, making it virtually invisible in the user experience, embodying the principle that "The best design is invisible."
Key Features
Large variety of component variants across all organisms, fully customisable right down to atomic level using automated controls.
Designed elements with interactivity in mind, linking states (hover, active, disabled) to form interactive instances. This applied to buttons, dropdowns, inputs, and custom elements, enhancing user engagement.
Vital tool for designers, developers, marketers, and product managers, serving as a reference and source of truth.
Impact
For me, as the sole designer, the design system was a game-changer. It provided a tailored toolset for rapid prototyping and problem-solving while maintaining consistency and aesthetic appeal.
Developers
Developers benefited from having a clear reference, enabling them to build features quickly and accurately. This facilitated better collaboration, ensuring designs were implemented correctly and efficiently.
The End-User
Ultimately, patients and users experienced a more intuitive, accessible, and enjoyable app, with user feedback driving and informing continuous improvements.