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.
Impact
65%
Conversion Rate Increased By62%
User Satisfaction Increased ByProject 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 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 goal of the redesign is to offer a seamless onboarding process for setting up the policy source on Masimo monitor devices, ensuring a frictionless user-friendly experience and minimizing the learning curve.
The Vision Ecosystem
User Interview Insights
Lack of Instruction
“Many of us are facing challenges with the initial step of importing the Policy Source in Sketch. There are 4 different import methods for each monitor device and there are no built-in instructions on Sketch to guide us through the import process. We often find ourselves relying on our notes or seeking help from colleagues. As we anticipate adding over 20 devices onto Sketch in the future, the lack of guidance becomes increasingly concerning.”
Unclear Terms
“Sometimes I still need to read the printed manual to understand the terminology on Sketch.”
Overwhelming Data and Steps
“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.
Difficult 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.
Usability Testing
Instruction + Terms
“Even when we are trained, we still forget some of the terminology. It would be nice to see what each of the terms mean on the spot.”
Tutorial
“Tutorial is a great idea! I would love to have tutorial in sketch; especially in policy source. This will be a game changer!”
Smaller Steps with Less Info Matters
“It would be nice to break instructional steps into smaller steps; guiding us through the process.”
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
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.