The Healthcare Software Standard is a common user experience & visual language for software applications
my role:Define and develop the design system.
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 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
When I joined, the company was focused on building a new version of the product because all the existing applications are not aligned 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.
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.
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. 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.
The Visual Guide
Design System Benefits
- Speed time to market – Decrease development time and reducing 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.