OVERVIEW
A design system can provide a standardized and consistent visual language for the application, ensuring that all components, layouts, and interactions are cohesive and intuitive for users. This is particularly important for a set of healthcare applications which showcases complex medical information, as users need to be able to easily navigate and understand the data presented to them. We needed a design system which will be fit for solving our all design problems.
My Role
Responsible for research, planning, conceptualization, design, delivery, grooming
THE TEAM
1 Design consultant, 2 Designers, 2 Product managers
The problem
Confusion and frustration among users while navigating our products due to inconsistent design patterns and functionality across different sections. The absence of a design system in development was causing several hassles and challenges, such as inconsistencies, duplication of effort, difficulty in scaling, and an increased risk of errors.
Complexities
Designing digital products for healthcare is complicated due to regulatory compliance, complex workflows, sensitive information, integration with existing systems, and accessibility requirements. We need to understand the healthcare industry's standards and requirements to create effective digital products that meet the needs of medical professionals while protecting sensitive information and ensuring regulatory compliance.
KEY CONSIDERATIONS
Compliances
Flexibility
Usability
Scalability
Accessibility
Consistency
Analytics and research
Existing application helped us identify the key pain points, where our current design approach was not helping us, after documenting every small aspect we went on to the research part.
Looking at the products from the same domain we were able to find some commonalities on which all the products were designed. We went deep into researching more about usage of platforms, preferences, interface design, colors, types, layouts and so on. We put all our research in a way where we were able to gather insights and share them with stakeholders. Working hand in hand with the product team, we found out more about business and industry side of things, and how adaptation on modern design is rapidly happening in the domain.
planning
You can’t directly jump into creating a design system, you need a solid plan before going into action mode. We brainstormed and came up with a design plan to come up with first cut in 2 weeks.
Establishing a visual design guild
We started with the design patterns which we identified in research phase as the base for our design. We wanted to keep the design flexible and very modular so we went with Brad Frost’s Atomic approach
The Atomic Design System
Atoms are the building blocks of your app (labels, buttons, inputs).
Molecules combine atoms into a small component that does one thing and does it well (like a form).
Organisms group different molecules together into a distinct section (like your app’s navigation).
Templates group different organisms (sections) into layouts or wireframes.
Pages or screens are then the instances where we apply those templates
end Result
We were able to come up with very early first cut in 8 days.
Design System
Research | Planning | Designing for PWA