Design System for Healthcare Industry

The Healthcare Software Standard is a common user experience & visual language for software applications

My Role:
Worked on Design System
UX UI Design 

As a dedicated group within the San Diego UXD team, I work closely with our fellow team members, designers, developers, and project teams to define and develop UX standards, guidelines, and best practices to help R&D teams create a unified experience.

The Challenge

The main challenge was to create a unified design language and provide tools and assets to designers and developers so that they can further evolve the product. This language would be used by designers every day so they would need to contribute to its definition. I personally wanted to build all this without slowing down any other projects

Constraints

When I joined, the company was focused on building a new version of the product because all the existing applications are not aligned with guidelines. All designers and developers had this project prioritized so it was challenging to sell the idea of building a design system. Though I was hired to do this, I still had to make a case for it so that all the applications look consistent and belong to a single family.

Healthcare Software Standard

Selling a Design System

Before selling it I had to explain what design systems are. This meant having meetings and casual conversations with teammates about the benefits and how it would solve actual problems in our teams. But of course, it’s better to prove by doing so very soon I started to work on it. I also started to conduct education sessions for UXD, development, and QA team.

Designing the System

Designing the system idea came in a very early stage when we started to convert our Healthcare software standards guidelines as a PDF doc to HTML/CSS code.

Variables, behaviors, and dimensions

It can be tempting to start designing components right away in Illustrator, Axure, Sketch, and XD, but components are composed of tiny decisions that first need to be defined. When building UI libraries I like to start by defining the variables: text sizes, colors, shadows, etc, and behaviors: the normal state, hover, selected, disabled, etc, and also the dimensions; the large, medium, and small with all specifications. Firstly, I create UI components for this design system in Illustrator.

Pixel Unit

Pixel Unit

Designing the system idea came in a very early stage when we started to convert our Healthcare software standards guidelines as a PDF doc to HTML/CSS code.

Variables, behaviors, and dimensions

The unit is the increment number used for spacing and sizing. For this design system, I proposed 8px. So any spacing in the product should be multiple of 8px, for example, 16px or 32px. The same rules apply for sizing: the height or the width of any component should be multiple of 8px. This is not an absolute rule and sometimes exceptions are needed, but that’s ok.

Design System

Benefits of Design System

Speed time to market – Decrease development time and reduce redundant design element development across all product lines.

Create value for customers – A consistent, easy-to-use, and memorable user experience which reduces learning curves for users.

Increase brand equity – Increase brand awareness in the marketplace by establishing signature design elements across all products.