About Sketch
Sketch is a web application configuration tool designed for the Masimo implementation and hospital technical teams. It enables them to import and configure policy source data, including Early Warning Scores, Vital Signs Checks, and Electronic Medical Records, into Masimo monitor devices based on hospital needs and requests.
My Role
As the Design Lead, I have led the redesign of Sketch. We collaboratively developed a web tool that enables the users to operate Sketch with minimal learning curve and offers an intuitive and guided user experience.
Redesign Impacts
80%
Task Success Rate85%
User SatisfactionProject Brief
Product
Web Application
My Role
Design Lead
Timeline
Q1 ‘21 - Q3 ‘22
Teams
2 IXD Designers
2 Human Factor
6 Developers
1 Motion Designer
Skills
User Flow
Architecture
Wireframes
User Interface
Prototype
Design System
User Interview
Usability Testings
My Responsibilities
Spearhead Redesign
Led the redesign of Sketch to enable the Masimo Implementation Team and hospital technicians to easily configure policy settings with a minimal learning curve.
Identify Pain Points
Through the user interviews, we were able to identify the problems of the current web app and transform these challenges into design opportunities for the redesign.
Promoted Initial User Interview / Testings
Collaborated with Human Factors to improve the design and experience based on heuristic evaluations and usability testing with the users.
Pioneered Design System Library
Led and developed a comprehensive design system library for Masimo web applications with the team.
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, and complex configuration steps, leading to operational difficulties and reduced efficiency. 86% of the users are having difficulties in the initial step - “importing policy source” due to complex import methods with no guidance and instruction.
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 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
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”
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.”
Lack of Guidance and Instruction
“Sketch is a very technical tool and so it took me a while to get hold of this tool. There are overwhelming data and too many steps to remember without much guidance; especially adding a contributing parameter for EWS .”
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
Enhance the user experience by 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 quickly locate the desired monitor device with step by step guidance.
02 Tutorial
Old Experience Pain Point: Difficult Learning Curve
As an implementation staff member, we were having trouble remembering the importing methods for each devices. There are 4 different import methods for each monitor device and there are no built-in instructions on Sketch web app to guide us through the import process.
I can now follow the step by step tutorial to guide me through the import methods for each devices.
Revamp Design Solution: Less Learning Curve
03 Terminology Definition
As an implementation staff member, I was having trouble remembering all the technical terminology and I would always have to reference on the printed manual for answers.
Old Experience Pain Point: Unclear Terms
Revamp Design Solution: Defined Terms
I can now define and understand the technical terms on Sketch.
04 Add Contributing Parameter with EWS
Old Experience Pain Point: Lack of Instruction | Difficult Learning Curve
As an implementation staff member, with the lack of instruction and guidance on ‘Add Contributor Workflow’, it was very challenging for me to operate the workflow.
Revamp Design Solution: Clear Instruction | Less Learning Curve
I can easily add a contributing parameter and edit the contributor scores with clear instructions.
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 Satisfaction2.3
Avg Min on Each Task
4.8
Avg Min on Each Task
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.”