top of page

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

  1. Create a simple, intuitive UI

  2. Redesign an automatic wound measurement feature

  3. 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.

IDEO-human-centred-design-process

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_Doctor_Jim Anderson.jpg

Persona of a doctor, "The Decision-maker".

Persona_Nurse_Nancy.jpg

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. 

Storyboard_Clinician_day-in-the-life.png

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! 😅

wound-care-clinician-treatment

Clinicians have to be wearing gloves at all times to avoid spreading infection.

Important user insights:

  1. Navigation on the current app slows users down and in some cases impedes their workflow.
     

  2. 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.
     

  3. In order to trust our medical device, users expect there to be a high level of security to protect patient information. 
     

  4. 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). 

Task-Flow_Existing-Measurement-markup.jp

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.

SkinVision_affinity-map.jpg

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.

SkinVision-affinity-map-2x2-matrix.jpg

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:

wireframe-flow-problem-areas

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:

  1. How might we build a second-generation device that speeds up and simplifies clinicians' workflow?

  2. 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-sketch-directory
wireframe-sketch-flow
wireframe-sketch-user-flow
wireframe-sketch-login

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.

Wireframe_View Patient_1x.png
Wireframe_View Wound_1x.png
Wireframe_Patient Directory_1x.png

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.

SkinVision_moodboard.png

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.

SkinVision_style-guide-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.

Logo Sketch 1.jpg

Sketching logo ideas with pen and paper.

Skinvision-logo-light
Skinvision-logo-dark

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:

hi-fi-mockup-iphoneXS_skinvision.png

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...

User-flow-high-skinvision

Annotated user flow highlighting improvements to the UI.

Speeding up the wound measurement flow...

Solution 1 - Measurement_2x.png

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:

Validation_user-testing

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

Like what you see?

Let's chat.

bottom of page