Medical Design System
A design system is the heart of quality user experience as it drives consistency and creates predictability.
This leads to experience and brand cohesion.
Context
A software company that specializes in medical applications, offering Electronic Health Records, Patient Portal, and Revenue Management tools.
Opportunity
The organization's software suite comprises both internally developed and externally acquired software. Although technically integrated, the disparate look and feel of each application resulted in a disconnected user experience.
Solution
We implemented a unified design system that incorporated existing patterns and current branding. This allowed us to gradually implement the system as new features were added to each page, ensuring consistency and a seamless user experience across all applications.
Our Plan
1
Audit
2
Analyze
3
Design
4
Document
5
Deliver
1. Audit
We began by analyzing the key set of strategic applications which would be focus of development cycles in the coming months. This key set included:
- SaaS-based Electronic Health Records for Ophthalmology
- Practice Management Suite
- A Medical CRM
- iPad Electronic Health Records of Dermatology
The audit included review of every page. In each page were we were looking for items such as:
- The UI elements types (ie; types of input fields)
- Colors used - primary, secondary, info, warning
- Consistency within app
2. Analyze
We consolidated all the interface elements from the four platforms into a single document, enabling us to compare and contrast the elements used across the platforms. We cataloged every icon, input, and element by type and analyzed them. This document served as evidence to our stakeholders and leadership of the need to invest in creating a unified user experience.
3. Design
We had a technical requirement to use Angular Material. After that, we focused on creating a color palette based on a modified version of an existing blue color and a secondary palette based on the company's primary teal. Both palettes were modified to increase contrast when used with white text, and we also developed a dark mode palette. In addition to the colors, we incorporated fonts and icon patterns found in strategic applications and used atomic design methodology to build a design system in Sketch. Feedback and review were completed in Marvel.
4. Document
Once we had created the Sketch symbols, we held team meetings to establish best practices for each individual UI element. Some elements were straightforward, while others required extensive research. After establishing the best practices for each UI element, we documented them in Lingo. Lingo became the source of truth for both designers and developers, allowing us to store and retrieve the most up-to-date Sketch symbols for mockups.
Light Mode
Dark Mode
Typography
Inputs
Documentation
5. Deliver
The objective of the design was to ensure that the new UI elements were complementary to the existing user interfaces, enabling their implementation in future work. We achieved this by continually updating the look and feel to the new design system every time we worked on a new page. This was an iterative process that continued over time.
Sketch
Marvel
Lingo
Angular Material
