Murray Link Design System
Murray Link is a blockchain-based healthcare platform that aims to better facilitate the end-to-end organ transplant process.
Collaborating with a small group of ambitious designers and engineers at D-Shop, SAP’s R&D lab for emerging technologies, I led the creation of Murray Link’s design language and design system.
Collaborating with a small group of ambitious designers and engineers at D-Shop, SAP’s R&D lab for emerging technologies, I led the creation of Murray Link’s design language and design system.
Typography
The typography uses Inter, an opensource typeface project led by Rasmus Andersson.
While Inter is a tried and proven type for computer screens, there are some features that we appreciate and work well for our audience:
While Inter is a tried and proven type for computer screens, there are some features that we appreciate and work well for our audience:
- The generous X-height gives good aid in readibility and accessibility — these are crucial for health-care workers, whose day-to-day is fast-paced and requests efficiency.
- The wide range of font weights of the Inter family has allowed us to be expressive when designing for the displays and headlines, while maintaining consistencies with fonts used in actions and running texts.
- Like many other geometric neo-grotesque typefaces that inspired it, Inter speaks reliability as well as a sense of friendliness. The latter is a quality we seek particularly — we hope the UI would appear friendly at the first glance and therefore encourage UI interactions.
Type SystemThe letter spacings and line heights are adjusted for different text styles. As a result, the display texts can be expressive while maintaining their compactness. And the body and label texts can be readiable even when rendered in small sizes.
Color
The full range of color palettes of Murray Link are to ensure that the UI would appear neutral, quiet, and calming.
While the foundation of the color system is largely muted, the brighter and more refreshing primary palettes are intended to evoke a sense of hopefulness.
While the foundation of the color system is largely muted, the brighter and more refreshing primary palettes are intended to evoke a sense of hopefulness.
Refreshing and Hopeful
The primary palettes are to allow the key UI components to stand out and to appear affirmative. The refreshing container color, in addition, represents the our hope that Murray Link would help both the medical workers and patients involved in the organ transplant process.
The primary palettes are to allow the key UI components to stand out and to appear affirmative. The refreshing container color, in addition, represents the our hope that Murray Link would help both the medical workers and patients involved in the organ transplant process.
Accent Colors
The primary and secondary colors, respectively, are deployed for core UI components and less prominent ones. The tertiary colors were introduced to expand the core accent palettes for subtle but richer expressiveness.
The primary and secondary colors, respectively, are deployed for core UI components and less prominent ones. The tertiary colors were introduced to expand the core accent palettes for subtle but richer expressiveness.
Additional Colors
a. Semantic colors for errors
b. Neutral colors for surface, background, outline, text, and icons.
a. Semantic colors for errors
b. Neutral colors for surface, background, outline, text, and icons.
Shape
A rounded shape family is in use. A wide range of UI components — including search bars, buttons, and cards — all employed generous rounded shapes. This is to help create a visual workspace that appears safe, welcoming, and friendly.
Shape Scales
The majority of the UI components are in generous rounded shapes.
The majority of the UI components are in generous rounded shapes.
Icon
The icon family is customized based on the updated SAP Horizon icons. We created a new collection of icons that are specific to the health-care use cases. In addtion, light and bold icon weights were added for richer visual variations.
Adaptive Icons
The icons are created to be adaptive. Additional weights (Light and Bold) are introduced to adapt to different UI scenarios.
The icons are created to be adaptive. Additional weights (Light and Bold) are introduced to adapt to different UI scenarios.
Applying Icon Weights
In the bottom navigation bar, icons in selected and unselected states are of different weights. The more heavily weighted icon and text work as a combination to ensure the active option is sufficiently emphasized.
In the bottom navigation bar, icons in selected and unselected states are of different weights. The more heavily weighted icon and text work as a combination to ensure the active option is sufficiently emphasized.
Components
We built upon the Material Design 3 components and designed a collection of customized UI components. These include action icon buttons, toast messages, a richer data table component, a versatile status indicator, as well as various charting components.
Customized Components
- Action icon buttons
- Toast message
- Data table
- Status Indicator
- Action icon buttons
- Toast message
- Data table
- Status Indicator
Charting
This is a bar chart instance.
This is a bar chart instance.
Further Info
The design system documented above was built upon Google’s Material Design 3 guidelines. While designing this design system, we referenced Material Design 3 extensively and learned a great deal throughout the process. Therefore, we acknowledge that Material has been an instrumental foundation to the creation of our design system, and we appreciate Material’s open documentation and its support to the broader design community.
Before this project kick-started, we had intended to create a lite design system. However, while it’s relatively simple, only a portion of the specifications are covered here — I have chosen to be selective and only highlighted the more original efforts.
Collaborators
This project has always been a team effort. This design system wouldn’t be completed without these wonderful people and their efforts:
Ori Nevares, for his research and team leadership Lauren Low, for her wonderful prototypes
Bea Ilagan, for her contribution and assistance to this design system
Yifan Dai, for her motion designs
Before this project kick-started, we had intended to create a lite design system. However, while it’s relatively simple, only a portion of the specifications are covered here — I have chosen to be selective and only highlighted the more original efforts.
Collaborators
This project has always been a team effort. This design system wouldn’t be completed without these wonderful people and their efforts:
Ori Nevares, for his research and team leadership Lauren Low, for her wonderful prototypes
Bea Ilagan, for her contribution and assistance to this design system
Yifan Dai, for her motion designs
© 2022 Chao Feng