An Ho Studio

scene health design system

Living component libraries for web & mobile app

Client

Scene Health

Role

Design Lead

Team

Design Manager

Product Manager

Tech Lead

Timeline

November - December 2022 (1 month)

Client

Rebranding

Scene Health is rebranding its user interface for both the Care Team web portal and the Patient application, including changes to its name, colors, typography, and brand narrative. As a small company with finite resources, a Design System is critical to ensure consistent and efficient design development.

🌋 Challenge

There’s no design system at Scene Health and
the current design is irresponsive

Scene Health product design team only has 2 designers. They are occupied with product development and do not have experience in building a design system.
The current design is not responsive on all devices which causes important information to be hidden on smaller devices.

Scene Health product design team only has 2 designers. They are occupied with product development and do not have experience in building a design system.
The current design is not responsive on all devices which causes important information to be hidden on smaller devices.

🏆 Goals

Scene need need to

Update the existing product with the new branding effectively and consistently
Speed up the mock-up speed of the design workflow

Update the existing product with the new branding effectively and consistently
Speed up the mock-up speed of the design workflow

Roadmap

Scene Health was schedule to launch in early 2023. Because of this, I only have 2.5 to build 2 designs system and update all interfaces with the new branding. Here are the breakdown of the project in sprint:

2 sprints

WEB PORTAL DESIGN SYSTEM

Build all design components for Care Team web portal in Figma.

2 sprints

WEB PORTAL HI-FI

Update all of the existing web interface with the new component library.

2 sprints

ACCESSIBLITY ASESSMENT

Groom over the 2 design systems for WCAG compliant.

2 sprints

mobile ACCESSIBILITY research

Conduct research on design and responsiveness for application.

2 sprints

MOBILE DESIGN SYSTEM

Build all design components for Patient application in Figma.

2 sprints

MOBILE HI-FI

Update all of the existing application interface with the new component library.

Design System Basics

🧱 Building out of Tokens

The token is the smallest pieces in the design system. They represents a design property or characteristic, such as color, typography, spacing, or shadow.
Tokens are used to maintain consistency and streamline the design and development process within a design system. Every component in the design system is built out of various tokens. In our design system, we call tokens Foundation.

📏 8-grid System

Utilizing numbers like 8 to size and space elements makes scaling for a wide variety of devices easy and consistent. The majority of popular screen sizes are divisible by 8 which makes for an easy fit.

The principle of 8pt Grid is that to use multiples of 8 to layout, dimensions, padding, and margin of elements

Building Sample

Prior to building the library, I created mockup design options for key pages to ensure alignment with our rebranded tone of voice: motivating, supportive, energetic, and conversational. This allows stakeholders to visualize the new branding on both products effectively.

Old branding

New branding samples

Building the Foundation (Design Tokens)

The Scene design system has two main components: Foundation and Component. Foundation is where we house all our design tokens, such as typography, color, and spacing. These foundational elements are crucial, as they serve as the building blocks of our library.

COLOR

Overview

I organized and name the colors into 5 main categories base on their usage (semantic): primary, secondary, semantic, neutral, brand accent. For each color, I tested text accessibility with Material Design’s color tool.

⭐ Semantic Naming

Each color should not be the description of the hue, but should specify its reflect their purpose (primary, secondary, accent, etc). This helps designers choose the right color easily and prevent inconsistency.

TYPOGRAPHY

Overview

Just like our approach to color, I've organized and named our typography system in a semantic manner, including categories such as display, heading, paragraph, action, and caption.

Additionally, I've aligned the line height and spacing with the 8-grid system to ensure that they are all divisible by 8.

⭐ Dynamic Type

Due to the fact that many of our patients are older individuals who tend to increase their phone's font size, having a responsive typographic system is critical.

I conducted research on iOS and collaborated with developers to determine the optimal size increments for our type system.

OTHER TOKENS

Building Components

Web components

Accordion

Button

Calendar

Card

Dashboard

Dropdown

Input Field

List

Logo

Message

Accordion

Button

Calendar

Card

Dashboard

Dropdown

Input Field

List

Logo

Message

Modal

Pagination

Separator

Table

Tab

Tag

Timeline

Video

Modal

Pagination

Separator

Table

Tab

Tag

Timeline

Video

mobile components

Badge

Bar

Button

Calendar

Card

Page Header

Input Field

Logo

Keyboard

Message

Badge

Bar

Button

Calendar

Card

Page Header

Input Field

Logo

Keyboard

Message

Modal

Multi-select

Navigation

Pagination

Toast

Video

In-app Browser

Modal

Multi-select

Navigation

Pagination

Toast

Video

In-app Browser

For all components, I would built out all of their states and combine them as variants. To a component, designers would simply search for the component name in the Assets panel, pull in the component, and adjust settings to their liking.

I also conducted a series of Figma workshops to help designers get on board with the design system.

This is component settings in action! It is super easy to use and allow designers to build hi-fi design extremely quickly. Components provide a standardize template for design consistency but also offer enough customization that help users to be creative with the design.

In total, I have built...

215

Web components

273

Mobile components

Update All Interfaces

I revamped every screen in both products with the new design system, reconstructing hundreds of interfaces from scratch. This involved aligning everything with the 8-grid system and using auto-layout for easier editing and maintenance. While it was a time-consuming effort, it allowed me to gain a thorough understanding of the product.

Accessibility Assessment

Following the WCAG Guideline 3.0, I thoroughly reviewed all screens to ensure they align with industry standards. Additionally, I employed the Contrast Checker plugin consistently to guarantee that all design elements are easily visible to the end user.

With the new design system, designers can shorten deliver time by

5 times

Manager feedbacks

Dahye Yoo

Director of Product Design at Scene Health

" I‘m so impressed! I’m able to create hi-fi design while having a discussion with the project manager. This would have took me a week in the past to get this far! This will help shorten the design delivery tremendously and save us lots of money spent on manpower!"

Alice Lin

Former Senior Product Designer at Scene Health

I had the pleasure of closely collaborating with An during my time as a senior product manager at Scene Health, and I wholeheartedly recommend her for her exceptional contributions to our product and design efforts. She played a leading role in developing and refining our design system, demonstrating remarkable thoughtfulness and attention to detail. During our time together, she worked on a number of diverse projects, and her positive attitude, versatility, and ability to manage multiple priorities were truly impressive. A consistently delivered high-quality work on time, and her contributions were invaluable to our overall efficiency. I recommend her for any role that values creative expertise and a collaborative spirit.

All product images and descriptions displayed were approved by emocha Mobile Health dba as Scene Health.

my other works

Trackhawk GPS

Simplifying Vehicle Tracking for Fleet Managers & individuals

Simply Smiles Expense Management

Living component libraries for web portal and mobile application

anvuthienho@gmail.com