Edison™ Design System

Launching a multi-award-winning design system for creating consistent, modern, and intuitive health software

GEHC case study heroshot

Problem

General Electric (GE) Healthcare is best known for its medical products like ventilators, X-Ray, CTs, MRIs, and monitoring devices. While GE manufactures hundreds of products and operates in 140 countries, its inconsistent software user experience impacted health worker’s clinical productivity, accuracy, and patient outcomes.

Solution

To combat the issue, GE Healthcare initiated to create Edison™ Design System. It's a one-stop platform of design, code, and guidelines to unify user experience and visual languages of software across 50,000+ organizations at GE Healthcare.

My roles as a founding designer

I joined the team as a foundational designer to build and launch its first production. My contribution can span into two parts:

Impact

🚀

70+ products adopted the system within 1 year since launch.

💪

Increased enhancement from 10% to 90% within 1 year.

🏆

Achieved awards from Red Dot, Fast Company, Design Management Institute (DMI), Webby, and Core 99.

  • 1 of 696 (less than 10% of all submitted projects) to receive a Red Dot Award
📈

Improved System Usability Scale (SUS) of products that used design system

  • MR software: from 79 to 84 SUS (6% improved)
  • Ultrasound software: from 75 to 80 SUS (7% improved)

Company

GE Healthcare

Timeline

2018 – 2021

Role

UX Design, UI Design, Lead UI Kit Production

Collaborators

Creative Director, Product, Icon Designer, UX Researcher, and Engineering.

Highlight takeaway 1:

Always test a design with target customers even if it may be widely accepted in other worlds

My experience at GE Healthcare taught me to always test with target customers even if a design might be commonly used in other worlds. Different factors such as customer behaviors, product requirements, and constraints can affect a design’s effectiveness.

Example 1a. Label-in vs label-out form controls

Form elements are widely used in healthcare settings. My team explored and tested 2 types of form design: 1) “label-out”, a traditional form controls and 2) “label-in”, popularized by Google Material Design.

The study showed that even though the label-in had more votes on preference, it was less successful in performance. For instance, more participants either failed or took a longer time to complete a task, such as identifying if the form is complete/incomplete. Taking usability as higher priority, we decided to choose the label-out for the final design.

Side-by-side comparison between “label-out” and “label-in” stimuli used in user testing. Research done by Hannah Duffy.

Example 1b. Designing for common monitor types in health settings

Not all healthcare providers have high-resolution 4K iMacs. My team and I not only checked the color contrast but also ensured that the design was visible even on old, low-quality monitors by displaying them in various types of screens.

Color iteration based on color contrast accessibility

Monitor test lab testing both light and dark themes

Highlight takeaway 2:

Good partnership sets up for success

The success of design system comes from consumers, who actually adopt and apply it to their product development. To validate the end user’s requirements and needs, my team and I iterated our design through internal critiques, forums, bi-weekly meetings, and occasional workshops with GE Healthcare UX community members.

Example 2. Toolbar UI that considers end user’s requirements

A toolbar is often used in many softwares such as MRIs or CTs. To standardize its design, my co-designer and I first needed to understand its contexts. We started with collecting GE Healthcare screens that were relevant to the project. We then grouped them by use cases and analyzed for patterns. We also learned about other and common patterns through non-GE screens and articles.

Snapshot of a toolbar research board

The final toolbar design doesn’t use a drop shadow. From an internal critique with product teams, we learned that the end users like radiologists don't want any distortions on images as it could influence their analysis.

Toolbar design with its application to imaging tools

Highlight takeaway 3:

Experimentation helps navigate uncertainty

Scalability were the biggest challenge in building a UI kit especially to a small project team (aka me and one contract production designer). We needed to create a kit for 100+ icons and 40+ desktop and touch components on light and dark themes. Simply re-building similar kits multiple times would take too much time and risk of inconsistency.

After trial-and-error, the UI kit was broken down into two types. First, the global kit contained colors, typography, and assets that applied across themes and device sizes. Second, the theme-based kits used styles from the global kit to build device/theme-specific components.

Final structure of UI kit

By merging duplicative styles and assets, the global kit improved software performance and usability. Designers were no longer confused to see the same icons displayed in different theme-based kits. It also made kit building process much faster as it lessened the number of manual imports and cost of maintenance.

This Global library contains the latest colors, typography, and icons. Colors are available as Layer Style and color presets. Names match with their corresponding SCSS variables‍.

100+ icons are grouped by sizes and their family

There were four theme-based kits (desktop and touch for light and dark themes). The kit users needed to download only ones they needed.

Light theme desktop kit, featuring the entire library components (40+) and samples

The kits had the mirrored structure. Consistent navigation would help users find components easily. Furthermore, by using a plug-in, designers could convert a UI between themes in seconds and save the time building duplicative screens.

Demo of running a plug-in that instantly swaps between themes

When Figma wasn't approved by the IT at the time, it was especially challenging to find any existing UI kits that had similar complexity as ours. Through experimentations, a production designer discovered that we could create a new component built upon components imported from a different kit. By testing with kit users, we were able to find the kit structure that optimized software performance, usability, and kit development workflow. In the end, we delivered a suite of UI kits that offered the latest colors, typography, 100+ icons, 40+ components available for desktop and touch devices in light, and dark themes.

Final thoughts

After working as a design system builder and a product designer, I learned that a successful design system is the one that fits to customers not the other way around. It takes dedication to stay focused on the end user, build trust with partners and product teams, and experiment and iterate often.

Once I read a case study about aviation human factors. In summary, the aircraft fatality rate didn't drop when a cockpit was designed to fit the “average” pilot. It dropped when it focused on fitting the cockpit to the individual pilot. Reading the case study made me curious about how a design system could further evolve to fit every individual’s needs.

Team

Leadership

UX

Engineering

Partners and collaborators

Awards

Next

About