Design System and UI Kit - Case Study
A cross-industry UI Kit improving UX by 33% and accelerating app dev
Role
As a Senior UX/UI Designer I took primary responsibility for the Design System and UI Kit. Main tasks involved UX Research, UX Design, Prototyping, Auditing/Testing, and Documentation.
Goal
Creating a Design System and respective UI Kit to be used by our clients when developing apps with our platform and to be experienced by the end-users of these same apps.
2021 - 2025
Timeline
Leading low-code development software platform, Rev >$250M
Company
Focus on App’s end-user experience, composed of UX Researchers, Product Designers, UX/UI Designers and Leads.
Team
Figma, Miro, Atlassian, User Testing, Google Workspace, internal tools
Tools
Overview
I joined the team in 2021 as a UX/UI Designer, primarily focused on building a Design System from the ground up to address the shortcomings of the existing system.
This case study shows the practices we implemented throughout the years to better our workflows and outputs, mainly focusing on the design processes.
The goal was to create a market-leading Design System that would drive fast, high-quality user experiences across all apps built on our software, with the main challenge being to develop a system that would serve multiple industries and end-users.
UX Research
Diving into the specifics of Design Systems and crafting a tailored approach according to user feedback
User Interviews
Moderated and unmoderated interviews were performed with designers and developers, focused not only on the Design Systems' usage but also on their overall experience, design-to-code translation, architecture, and organization.
Competitive Analysis
We conducted quantitative and qualitative research on 10 market-leading apps across 8 industries. By using an internal scoring system to compare these apps with our own through audits and interviews, we were able to evaluate our apps' performance and rank them against top competitors in each industry.
UI Kit Research
By analysing usage data for each component and UI pattern, we identified the least-used elements in our system. Simultaneously, we gathered data on downloads and reviews from other libraries used by our users, which allowed us to understand what our users felt was missing and what they were seeking.
UX Design Audits
To gain a clear understanding of our users' perception of the current system, we conducted audits on our components, foundations, and overall experience. This analysis focused on consistency, quality, and user sentiment.
Feedback Collection
Given our engaged user community, we were able to gather targeted feedback on specific components and patterns through our forums. This feedback often came from written reviews, in-app submissions, and comment sections.
Usability Testing
We conducted both moderated and unmoderated usability tests to assess the scope and effectiveness of our Design System, identifying areas where it aligned with current market expectations and where it fell short from our users' perspective.
Discovery
Our existing Design System fell short of market standards in terms of look-and-feel, experience, and accessibility, as well as variety and customisation options.
Main pain-points
UI Patterns
Limited and inconsistent UI components and variants, coupled with a complex UI customization workflow
Design experience
Basic experience missing key guidelines, modern workflows, and up-to-date design features
Native Look-and-Feel
Lack of native gestures, up-to-date behaviors, seamless transitions, and micro-animations
Accessibility standards
Foundations' principles (color contrast, dynamic fonts, minimum target areas) below current A11Y standards
Ideation
DS mapping
We analyzed the Design Systems of the 10 previously mentioned market-leading apps, along with 15 other benchmark Design Systems currently recognized in the market.
UI Kit research
Leverage feedback from our designers and clients to determine the most effective way to distribute the new UI Kit and enhance its learnability for new users, ensuring they can maximize its potential from the start.
Accessibility baseline
Prioritize A11Y at every stage of designing new components and foundations - ensuring proper color contrast, support for dynamic fonts, minimum target areas, accessible iconography, ensure a good screen reader experience, and RTL compatibility.
Mobile-first approach
Focus on a native look-and-feel by incorporating native components, behaviors, and gestures to ensure an intuitive experience on mobile devices before scaling the design to larger screens.
What’s our definition of success?
-
Our UX score is derived from comprehensive audits that evaluate overall user experience, component alignment with market standards, consistency of patterns, smooth transitions, native feel, and responsive feedback.
The goal is to achieve a consistent standard where users experience delight on a regular basis by using our UI Kit. -
Create a system where experience, look and feel, and usability remain consistently reliable assets across all touchpoints.
-
Ensure a market-leading Design System that supports deep customization, allowing UI patterns to be easily adaptable for industries such as Banking, Insurance, Retail, and Logistics.
Design
Empowering our designers with the flexibility of extensive customisation, while simultaneously promoting best design practices.
This stage required ongoing collaboration between the internal Design System team, Development, Marketing, and Copy teams, along with client-facing teams.
The iterative design process
This workflow was followed for every asset of our Design System
Setting up the Foundations
Following an atomic approach, we defined the basis of the structure and style guide for the Design System.
This involved working on the grid, spacing, screen layouts, color palette, typography, sizes, shapes, states, shadows and iconography.
Grid variations on different screen sizes
-
🪜 Setting up of a 4px grid, where major jumps are in an 8px scale for every asset available
📐 Maintaining size consistency across all components, ensuring a range of sizes and a standardised approach to layout, spacing and structure
🎯 Ensuring a minimum target area of 40px for every interactive element
-
🔄 Switched from Roboto to Inter, prioritizing a more modern aesthetic while maintaining optimal readability.
🔍 Minimum text-size for body text changed from 12px to 14px to guarantee best WCAGs guidelines
💡 Two distinct type scales were built for both Web and Native platforms, ensuring optimal readability and information density tailored to the specific needs of each environment
📖 Established optimal sentence length for larger screens and created font-swapping guidelines centered around x-height parameters to enhance readability and consistency
-
🎨 15 new colors were created with 12 shades each, significantly expanding from the previous palette of 12 colors with 7 shades each.
✨ Set up a base shade value for every color swatch to ensure best WCAG compliance, verified for small text and graphics
🎰 Ensure a variety of color and shades to provide a range of options for their different applications: text, surfaces, borders, states, illustrations, graphs and so on
-
☀️ Developed new elevation patterns constituted by two distinct shadow types for each: Key Light and Ambient Light shadows. This creates realistic environments avoiding harsh, artificial shadow patterns
🪆 Established clear elevation hierarchy guidelines for each shadow type, outlining their usage and specific application across various UI components
📚 Created guidelines on using shadow in coloured backgrounds, as well as a walkthrough between Flat and Neumorphic design
Components
We designed a comprehensive library of 40 components, each offering diverse styles, sizes, shapes, and states to cater to a wide range of design needs.
Each component was designed to ensure accessibility norms, built-in variants, and out-of-the-box behaviors.
Design critiques
Each newly designed component underwent a Design Critique: a 1-hour moderated or async session where I presented the UI Component to a focus group of 3 to 7 designers.
Participants were asked to explore and test the component, followed by a round of feedback collection from each participant.
The last step was incorporating the feedback from the sessions in the next Design Iteration.
Documentation & Guidelines
As the final step in the design process, comprehensive Documentation was created as the source of truth.
This documentation would include a detailed component description, covering its anatomy and specifications, variations, behaviors, accessibility considerations, states, sizes, and shapes.
Additionally, it would outline best usability practices and usage guidelines, along with insights from the Design Critiques.
Specialized research
Extensive research covering typography density, web applications, dynamic font, responsive typography, font adjustments on swap, type scales, pairings and font accessibility.
Web Typography
Deep dive into the navigation fundamentals in native environments, pairing with native gestures and capabilities. This research was coordinated with the design of navigational components such as the Top Bar, Bottom Bar, and Side Menu.
Native navigation
Understanding native environments and gesture features (focused on iOS and Android). The collected data served to better build our components, layouts, and screen transitions.
Native gestures
A close review of today’s best practices for the Splash screen and status bar experience, understanding behaviors, animation, transitions, and motion. The primary goal was on the timeline specs, app icon, and loading patterns.
Splash screen + Status bar
Next steps
Usability testing
Perform user tests with designers, focusing on building apps and experimenting with the new design system.
Craft user journeys that involve different levels of component customization, as well as compare the time of building screens, user journeys and Proof of Concepts with our old UI Kit.
Feedback collection
Collect data through surveys, user interviews, the Live Style Guide website, and online forums, consistently focusing on identifying pain points and opportunities for improvement.
Gain insights into how users compare this system to market-leading apps, as well as to our previous design.
Usage metrics
Collect data on key performance indicators, such as:
Number of UI Kit downloads
Component and variant usage
Most common detached components
% of app components sourced from our system versus other libraries when building apps.
Sample Banking App showcasing Splash screen, Login screen and Dashboard
The gist
The new Design System and UI Kit presented 40 newly designed components, powering up a total of 60 new variants
A native approach to the mobile experience for the end user, combined with a seamless, intuitive design experience for the designer
A cross-industry-ready UI Kit to level up any digital product