About Sketch
Sketch is a web application configuration tool designed to enable the Masimo implementation team to import and configure policy source data: Early Warning Scores, Vital Signs Checks, and Electronic Medical Records—into Masimo monitor devices, tailored to the specific requests from each hospital.
My Role as A Design Lead
90% of users reported difficulty operating Sketch, with only a 55% success rate in completing tasks without fully relying on printed manuals.
As the Design Lead, I spearheaded a redesign of Sketch to address these challenges. Our team collaboratively developed a new web tool that provides a guided user experience, substantially lowering the learning curve and reducing the average time required to complete each task by 47%.
Redesign
80%
Task Success RateUser SatisfactionProject Brief
Product
Web App - B2B
My Role
Design Lead
Timeline
Q1 ‘21 - Q3 ‘22
Masimo Implementation Team
Primary Users - Phase 2 Redesign
Teams
2 Interaction Designers
2 Human Factor (Research)
6 Developers
1 Motion Designer
Skills
User Flow
Architecture
Wireframes
User Interface
Prototype
Design System
User Interview
Usability Testings
My Responsibilities
User Groups
01 Spearhead Redesign
Led the Sketch redesign and together as a team to simplify the configuration experience, increase task success rate while reducing operation time.
02 Promoted Testings
Collaborate with Human Factors to initiate and perform the first user interview, heuristic evaluation and usability testing for Sketch web app.
03 Identify Pain Points
Through the user interviews, we were able to identified the problems of the current web app and transform these challenges into design opportunities for the redesign.
04 Pioneered Design System Library
Designed the first Sketch design system and received management approval and support to implement it across all Masimo web apps.
Hospital Technical Team
Future Users - Phase 3 Future Release
Current Ecosystem
Problem Statement
User Pain Points
The implementation team encountered challenges and difficulties while using the old Sketch application due to unclear guidance, confusing navigation, inconsistent UI and complex configuration steps, leading to operational difficulties and reduced efficiency. 90% of the internal technical users reported having difficulty operating Sketch without relying on printed manuals, notes, or assistance from others.
Business Pain Points
In the current ecosystem, the ongoing communication between the hospital and Masimo is time-consuming, reducing overall work efficiency, and leading to delays in project delivery.
Redesign Goal
The Sketch redesign aims to enhance the overall user experience by reducing the learning curve and boosting user’s work efficiency. Its goal is to increase task success rates and shorten operation times, enabling faster hospital delivery with configured devices, thereby strengthening client relationships and trust in Masimo.
The Vision Ecosystem
Phase 3
User Interview Insights
Heavily Rely on Printed Manuals / Training Notes
“I have been using this product for over a year now; sometimes I still need to refer to the manual to understand the terminology and follow the instructions for importing the policy source from Masimo devices due to lack of guidance on Sketch” - Brian
High Learning Curve
“I remember when I started using Sketch, I had to work over time because how hard it is to learn to operate.” - Mark
Lack of Guidance and Instruction
“We typically avoid assigning the Sketch web app to new technicians when we're busy, due to its challenging operation and the extensive training time required.” - James
Pain Points
Extraneous Cognitive Load
The screens are overwhelmed with dense data and visual clutter, making it difficult to process and navigate the web app efficiently.
Lack of Instruction + Unclear Terms
There are numerous technological terms with lack of instruction.
High Learning Curve
Despite training, users are still facing challenges onboarding with Sketch without seeking for help and reading the manual.
Inconsistent Visual Language
There are inconsistencies in the UI components, including sizing, colors, typography, and behavior.
Design Opportunities
Minimizing Cognitive Load
Reducing the visual clutter and establishing a clear visual hierarchy with consistent UI components to highlight key contexts and actionable items.
Clear Instruction + Terms
Provide a clear step by step instruction and guidance with defined terms.
Less Learning Curve
Provide guidance or tutorial with clear instructions and visual demonstration.
Design System Library
Create a design system library that is dedicated to the Masimo web app in creating consistent UI components, behavior,
and user experience.
01 Policy Source
Old Experience Pain Point: Extraneous Cognitive Load
As an implementation staff member, I was aware that we will soon have over 20 devices, including third-party options, displayed on this screen. I was concerned about how 20+ device selections would fit on this screen and it was going to be challenging for us to find the desired device.
Revamp Design Solution: Minimizing Cognitive Load
I can now quickly locate the desired monitor device.
02 Tutorial
Old Experience Pain Point: Difficult Learning Curve
We were having trouble remembering the importing methods for each devices since there are no built-in tutorial on Sketch web app to guide us through the import process. We have to heavily rely on outdated printed manual and notes that lead us to 65% of success rate in the first try without anyone’s help.
I can now follow the sketch tutorial step by step to guide me through the import methods for each devices. The task success rate for our team has increased to 90%.
Revamp Design Solution: Less Learning Curve
85%
03 Create Custom Parameter
Poor visual hierarchy, confusing navigation, and inconsistent UI design create an overload of cognitive load and visual clutter, making data entry challenging.
Old Experience Pain Point: Inconsistent Visual Language
Revamp Design Solution: Consistent Visual Language
With the new design of consistent layout and UI components, I can now easily navigate and input data to create custom parameters.
04 Add Contributing Parameter with EWS
Old Experience Pain Point: Lack of Instruction | Difficult Learning Curve
Operating the system was very challenging and time consuming due to the lack of instructions, missing back button, confusing navigation, and inconsistent UI. These issues led to numerous errors and my average time to complete this task is 12 - 19 min.
Revamp Design Solution: Clear Instruction | Less Learning Curve
With the new design and flow, my average time on adding a contributing parameter is now 5 - 10 min.
Design System Library
Old Design
First Web App Design System Library
Currently, at Masimo there are 6 different web applications, yet there was no design library dedicated to these products.
To address this gap, I have initiated the first design system specifically for Sketch web applications with the team. This design library is already being adopted by Trace, Nest, and PSN; establishing a unified design language and delivering a cohesive user experience across all web app.
55%
Task Success Rate40%
User SatisfactionAvg Min on Each Task12.6
Avg Min on Each Task6.7
Inconsistent UI + Interactive Behavior
“The visual and UI behavior inconsistencies in Sketch make it hard to navigate and use efficiently. It often leads to repetitive work that doesn't improve productivity, which is quite frustrating.” - Josh