Scene health's Living design system for web & mobile
Scene health's Living design system for web & mobile
Role
Role
Design Lead
Design Lead
Team
Team
Design Manager
Product Manager
Tech Lead
Design Manager
Product Manager
Tech Lead
Timeline
Timeline
November - December 2022 (1 month)
November - December 2022 (1 month)
Client
Client
Rebranding
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.
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
🌋 Challenge
There’s no design system at Scene Health and
the current design is unresponsive
There’s no design system at Scene Health and
the current design is unresponsive
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
🏆 Goals
Scene needed to
Scene needed 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
Roadmap
Scene Health new branding was scheduled 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:
Scene Health new branding was scheduled 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.
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.
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.
Groom over the 2 design systems for WCAG compliant.
2 sprints
mobile ACCESSIBILITY research
Conduct research on design and responsiveness for application.
Conduct research on design and responsiveness for application.
2 sprints
MOBILE DESIGN SYSTEM
Build all design components for Patient application in Figma.
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.
Update all of the existing application interface with the new component library.
Design System Basics
Design System Basics
🧱 Building out of Tokens
🧱 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.
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
📏 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
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
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.
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
Old branding
New branding samples
New branding samples
Building the Foundation (Design Tokens)
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.
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.
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.
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.
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.
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
Building Components
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:
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:
Web components
Accordion
Button
Calendar
Card
Dashboard
Dropdown
Input Field
List
Logo
Message
Accordion
Button
Calendar
Card
Dashboard
Dropdown
Input Field
List
Logo
Message
Menu
Modal
Pagination
Search
Separator
Table
Tab
Tag
Timeline
Video
Menu
Modal
Pagination
Search
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.
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.
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...
In total, I have built...
215
215
Web components
Web components
273
273
Mobile components
Mobile components
Update All Interfaces
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.
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
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.
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
With the new design system, designers can shorten deliver time by
5 times
5 times
Manager feedbacks
Manager feedbacks
Dahye Yoo
Dahye Yoo
Director of Product Design at Scene Health
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!"
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.
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.
All product images and descriptions displayed were approved by emocha Mobile Health dba as Scene Health.
my other works
my other works
Enhancing Google Home subscription retention
Enhancing Google Home subscription retention
Systematically highlighted premium features value
Systematically highlighted premium features value
Revamping fleet management platform
Revamping fleet management platform
Gained 80+ new business customers, overseeing 1000+ vehicles in 1 year
Gained 80+ new business customers, overseeing 1000+ vehicles in 1 year
Location
Location
Base in Boston, open to relocation
Base in Boston, open to relocation
* Thank You in Vietnamese