Product Design System for Medicaid Products
Project Overview
I created responsive design system components for Gainwell's Product Design System, crafting various variants to address multiple use cases. I also authored comprehensive documentation, detailing structure, usage guidelines, and component states.
Team
Gainwell's Digital UX Team: 13 Product Designers! 2 Developers, 1 Product Manager
Role
UX Designer(Design System), UX Writer
Skills
Responsive Design System, Documentation, Cross-functional collaboration, Organization and Nomenclature
Duration
11 Weeks (May-August)
Background
About Gainwell Technologies
Gainwell Technologies is a leading provider of technology solutions for healthcare and human services, offering innovative products and services to improve efficiency and outcomes in these sectors.
The Design System - Presently
-
Gainwell's Product Design System is still a work in progress. Over 20 products are being designed simultaneously.
-
At the time of my involvement, the components did have a set color, grid, typography and shadow palette, providing a base to establish consistency.
My contribution and Impact
-
Led the design of various components for Gainwell Technologies' Product Design System. I collaborated with my team for inputs and references.
-
Developed a wide range of component variants to meet diverse use cases.
-
Created comprehensive documentation outlining component structure, usage guidelines, and states. I collaborated with my manager for references and guidance for this task.
The planning
I created a component variant roadmap to account for all use cases. Below is an example:
Universal Footer - Component States
Input Field - Component States
Iterations - Over four weeks, I collaborated with my team for inputs and feedback.
The problem
The components across Gainwell's Suite of 20+ Products lack consistency.
Existing Headers
Existing Input Fields
Existing Footers
And many more...
The approach
I spoke to my team to uncover the reasons behind this inconsistency and then brainstormed ways to improve the situation.
How the system became inconsistent
My solution
Lack of Standardization
Absence of unified design guidelines often leads to varied interpretations.
Document the standards for design and interaction with elements
Ad-Hoc UI Alterations
Shifting project needs prompt improvised UI alterations, adding to inconsistency.
Create elements for an exhaustive set of use cases and screen sizes
Organic Growth
With 20+ products, components have evolved independently.
Communicate and collaborate with the team to bring everyone on the same page
The inspiration
I sought inspiration to craft a practical design system, aiming for a blend of structure, robustness, and visual appeal.
Outsystems UI Kit
GE Healthcare Design System
Nordhealth's Design System
Key Observations:
-
Accessibility: There was a strong emphasis on user flows and accessibility across all components.
-
Structure: Clear, concise structure and naming conventions streamline design and development workflows.
-
Documentation: Found extensive documentation with code examples and best practices that would be invaluable for developers.
-
Flexibility: Focus on flexible customization options for components to fit different design needs and brand identities.
The components
I created components and documented them for ease of use.
Documentation
The component documentation includes anatomy, instructions of use, spacing, color themes, examples and instance table.
Component Anatomy
Component and variant compositions, along with their design variations
The Component
How to use the component and address edge cases.
Spacing
The spacing and sizes of different elements, marked on the element for coherence.
Color Theme
There are dark and light mode elements throughout the design system.
Example in Use
How the element looks while in use.
Input Instance Table
A matrix of what the element looks like with all combinations of instances.
What I learned
Design Systems - Consistency, Coherence and Transparency in Communication
Design Systems are crucial in streamlining workflows and ensuring consistency across projects. Learning how to create and document them effectively is essential for success in UX design.
Ask Questions
Asking questions is an excellent way to learn and gain insights that may otherwise be overlooked.
Diverse Teams are amazing to learn from
In a diverse UX team of 15 designers, each with unique backgrounds and expertise, I've observed varying approaches to design, research, development, and project management. Despite these differences, everything somehow fits together cohesively, emphasizing the importance of embracing diverse perspectives within the team. It's crucial to engage with everyone and gather different viewpoints on your work, as it not only enhances project outcomes but also contributes to personal career growth.
Finding Common Ground
At times, the team's choice differed from my own preference. I made an effort to understand their perspective, gaining insight into their mindset and refining my design approach accordingly