SkinVision App
Designing a wound assessment app for a handheld medical device used by doctors and nurse practitioners in hospital and clinical settings.
PROJECT TIMELINE
8 months
(Sep 2018 - Apr 2019)
THE TEAM
1 UX Designer (me!)
1 Product Manager
5 Software Developers
2 Mechanical Engineers
1 QA Tester
MY ROLE
Lead UX designer for end-to-end product design of a medical device application.
MAIN GOAL
Help wound care clinicians be more efficient in their everyday clinical practice.
01.
THE PROBLEM
More people in the world suffer from chronic wounds than lung cancer, breast cancer, and leukemia combined. And yet, clinics and hospitals still lack advanced wound care technology to help clinicians manage patients’ wounds. As a result, doctors and nurses are struggling with time lost due to inefficient documentation processes.
The Opportunity
We saw an opportunity to provide clinicians with a tool to manage wounds efficiently, so they could focus on what truly matters — their patients.
So what exactly is "SkinVision App?"
SkinVision is a wound assessment application for a medical device based on IOS software. Clinicians can capture images and obtain measurements of wounds to assess healing progress and select an appropriate treatment.
The Task
-
Create a simple, intuitive UI
-
Redesign an automatic wound measurement feature
-
Redesign the image capture feature
Please note: To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of the company I worked for. I have replaced the original company and product names with the alias, “SkinVision”.
02.
MY ROLE
As the sole designer at a healthtech startup with 20 employees, I had the opportunity to spearhead the UX design of a medical device application.
DESIGN:
-
UI Design
-
Visual Design
-
Sketches
-
Wireframes
-
Hi-fi Mockups
-
Interactive Prototype
-
Design Iterations
USER RESEARCH:
-
User interviews (with team)
-
Stakeholder interviews
-
User testing
-
Personas
-
Storyboards
-
Affinity maps
-
Usability testing
I worked in 2-week sprints with a team of 10 to build the product from scratch in 8 months.
I stopped working on the project after the final design executions for the minimum viable product and design hand-off document were completed.
The first release of the product is set to launch globally in September 2019.
03.
MY PROCESS
I follow IDEO’s human-centered design and lean UX design thinking process to make sure that my design decisions are supported by user research and feedback.
04.
UNDERSTANDING
USERS
To understand more about clinicians' workflows and relationships with technology, we conducted user research with 15 participants. This led to the development of two personas and one storyboard.
User Personas
Based on conversations with current users and potential users, I created personas for a typical SkinVision user to guide design decisions and the team's priorities throughout the project.
There were two types of users: doctors and nurse practitioners.
Persona of a doctor, "The Decision-maker".
Persona of a nurse practitioner, "The Caregiver".
Storyboarding
Imagining the scenario in the form of a storyboard helped the team empathize with users so that we could better address their pain points and frustrations.
I created a storyboard of a typical day for a Wound Care nurse.
Remote Usability Testing
By reaching out to 5 existing users and asking them to complete a series of tasks using SkinVision, I was able to validate some of our persona assumptions and spot users’ pain points.
Something we didn't realize about our users...
It wasn't until we visited a clinic in person that we realized clinicians wear gloves while using the app. This finding gave us leverage to create a better experience for users.
Thank goodness for user research! 😅
Clinicians have to be wearing gloves at all times to avoid spreading infection.
Important user insights:
-
Navigation on the current app slows users down and in some cases impedes their workflow.
-
Clinicians are open to using new tech as long as they don't have to go through extensive training, and as long as they have access to customer support.
-
In order to trust our medical device, users expect there to be a high level of security to protect patient information.
-
Clinicians must wear latex gloves while assessing patients with the device.
USER QUOTES
“When I can't figure out how to do something in the app, I feel like I'm better off without it."
WOUND CARE PRACTITIONER / SCARBOROUGH, ON
“When I can't find images on my current device, it makes me less efficient at my job."
ENTEROSTOMAL THERAPIST / TORONTO, ON
"It's difficult to tap most of the buttons, especially because I'm wearing latex gloves when I'm with patients."
WOUND OSTOMY CONTINENCE NURSE / GUELPH, ON
05.
DEFINING THE PROBLEM
Analyzing Existing User Flows
I analyzed the existing user flow of performing a wound measurement to understand where users were struggling the most (highlighted in red text).
Existing task flow: Users performing a wound measurement (Problem areas highlighted in red text).
Identifying Pain Points
After usability testing, I jotted down each user’s pain points onto a Post-It note. Then I used affinity mapping to group the pain points into similar categories on a wall.
Affinity mapping pain points on a wall, each colour represents a user. The white boxes represent a category.
Prioritizing Pain Points
Then I prioritized each pain point based on its importance to the user as well as its importance to SkinVision’s business needs.
Prioritizing pain points on a 2x2 matrix
I redefined the pain points important to business and users:
1
Users had trouble finding and organizing images.
2
Users had difficulty obtaining quick and accurate measurements using the “Wound Measurement” feature.
3
Users found the “Image Capture” screen layout was not optimal for taking quality images of wounds.
Further usability testing on the current app...
During usability testing (on the existing app), the user was asked to capture an image of a wound, and then find and delete it from the ‘Image Library.’
These were some of the test results:
Existing "Image Library" user flow, highlighting main problem areas.
Understanding the problem to be solved...
Taking user needs, user pain points, and business needs into account, we came up with these questions:
-
How might we build a second-generation device that speeds up and simplifies clinicians' workflow?
-
How might we ensure that the device is safe, secure, and ethical for clinicians and their patients?
06.
IDEATION
We hoped to build a platform that was safe, secure, and ethical for clinicians and their patients because we wanted people to be able to trust the product, but we ended up having less than a week to teach ourselves about HIPAA compliance!
Considering the ethical implications of our designs early on...
The product manager and quality assurance manager had to make sure our team was well-versed in HIPAA Compliance to ensure the product met sensitive patient data protection standards, before the design and implementation phase of the project.
Keeping patients' medical records and other health information safe and secure was our number one priority.
Sketching Wireframes
I came up with several potential solutions to address the 3 pain points mentioned above. Sketching out wireframes is a quick and easy way for me to get my ideas across, without getting lost in the finer details of design.
Wireframe sketches of potential solutions.
Lo-fidelity Wireframes
I created some quick wireframes using Sketch to show the product manager and development team rough ideas for the app functionality, layout, and UI components. The wireframes made it easier for developers to communicate feasibility issues and offer feedback early on.
A few low-fidelity wireframes I created in Sketch.
07.
VISUAL DESIGN
& BRANDING
The 'why' behind the UI
Drawing on our user research, we discovered that when clinicians feel supported, encouraged, and empowered in their daily practice, they can deliver more efficient care to patients.
Mood board
I created a mood board using InVision to inspire the look and feel of the user interface.
Moodboard created in Invision, to inspire look and feel of the UI.
Style Guide
SkinVision’s brand is meant to embody trust, support, and healing. These brand values helped inspire the colour palette, shapes, movement, and typography. I created the style guide using Sketch.
I created a UI style guide in Sketch.
Designing a new logo...
I used pen and paper to sketch logo ideas first, and then mocked up the logo that best signified "growth" and "healing" in Adobe Illustrator.
Sketching logo ideas with pen and paper.
Final light and dark logos designed in Adobe Illustrator.
08.
PROTOTYPING
Hi-fi Mockups
I jumped into Sketch to create high-fidelity mockups of my proposed solutions. To view the interactive prototype I created using InVision, click the button below:
Above: Major app sections
THE SOLUTION
Giving clinicians back their time
1. Simplifying the navigation and flow.
Instead of a library that consists of a collection of jumbled images, users can add patients and wounds to the app so that captured images are automatically stored under the appropriate patient and a specific wound.
2. Adding a search bar and filter button.
Instead of manually searching for images or creating folders, users can search for images by patient name, by keywords, or by using filter options.
3. Incorporating data visualization.
Before, users had to manually track wound size. Now, they can see a quick and clear view of a wound's healing progress over time on an interactive graph.
4. Designing an accessible 'delete' button.
The "delete image" button used to be hidden under a menu. I turned it into a "trash" icon and made sure it was obvious on the "Review Image" screen.
A closer look at UI design decisions...
Annotated user flow highlighting improvements to the UI.
Speeding up the wound measurement flow...
Annotated user flow highlighting improvements to the Wound Measurement feature.
09.
VALIDATION
Testing the Prototype
I tested the interactive prototype with 5 new users to validate whether the problem has been solved. Tap the button below to view the Invision prototype (if you haven't already):
Validation results:
After conducting validation tests and iterating designs:
-
Users navigated through the app with ease and didn't get lost
-
Users found the action buttons with text (such as "Save" and "Next") more intuitive than previously used icons
10.
KEY TAKEAWAYS
Outcomes
Teamwork makes the dream work 💪🏼✨
Despite a timeline of 8 months to complete all user research, design and implementation, user testing, and countless design iterations, we were able to deliver a minimum viable product that sped up and simplified clinicians' workflows and met safety and security standards for sensitive patient information.
"A minimum viable product is better than no product at all."
— COMPANY STAKEHOLDER
Lessons Learned
I had to remind myself that it's okay to let some ideas get squashed for the first release. Although it was tempting to explore nice-to-have features, it was important to manage my priorities and focus on key features of the product to stay on track and within budget.
A personal reminder...😅
"When you're designing a medical device, not only does the product have to be usable, it has to be ethical."
— COMPANY STAKEHOLDER
The Results...
Much more work to be done...
Throughout the project, I learned that old dogs can learn new tricks, they just might need some extra support!
In a later release, we hope to provide users with more in-app support such as helpful pop-up tips, tech support contact, and an onboarding app tour to ease the friction of learning new technology.
The first release of the product is set to launch September 2019.
50% decrease
in the time it took users to measure wounds
5X faster
for users to find images
35% increase
in wound measurement accuracy
82% of users
who were interviewed during final testing trusted the device to keep information safe and secure