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