SCANADU
URINE
APP
SCANADU
SCANADU
URINE
APP
SCANADU
SCANADU
URINE
APP
SCANADU
SCANADU
URINE
APP
SCANADU
App design for SCANADU URINE product. We wanted something that took the sterile medical feeling away - something simple, approachable, and easy to understand.
The UX, in reality, was quite a complicated one that dealt with precision and timing, so we wanted to make sure to guide the users so that they didn't notice they were engaging in complex tasks in an effort to reduce user error.
App design for SCANADU URINE product. We wanted something that took the sterile medical feeling away - something simple, approachable, and easy to understand.
The UX, in reality, was quite a complicated one that dealt with precision and timing, so we wanted to make sure to guide the users so that they didn't notice they were engaging in complex tasks in an effort to reduce user error.
CHALLENGES
CHALLENGES
CHALLENGES
AS EASY AS 1-2-3! ...OR SO WE THOUGHT
AS EASY AS 1-2-3! ...OR SO WE THOUGHT
What we envisioned for SCANADU Urine when we started off was something SO SIMPLE:
What we envisioned for SCANADU Urine when we started off was something SO SIMPLE:
... but science proved otherwise.
After our initial failure to produce acceptable results, we needed to fully understand the constraints.
... but science proved otherwise.
After our initial failure to produce acceptable results, we needed to fully understand the constraints.
STEP #1
UNDERSTANDING CONSTRAINTS
STEP #1
UNDERSTANDING CONSTRAINTS
HOW WE WENT ABOUT IT
HOW WE WENT ABOUT IT
BECOME AN EXPERT (well, as much as you can)
BECOME AN EXPERT (well, as much as you can)
Talk to the scientists to understand the technology that went into how this test is possible
Understanding how the algorithm was trained
Talk to the scientists to understand the technology that went into how this test is possible
Understanding how the algorithm was trained
Step #1 - Understanding Constraints
HERE'S WHAT WE GATHERED:
Step #1 - Understanding Constraints
HERE'S WHAT WE GATHERED:
1. PADDLE DESIGN & CONFIGURATION OF CHEMICAL PADS CANNOT BE MODIFIED
1. PADDLE DESIGN & CONFIGURATION OF CHEMICAL PADS CANNOT BE MODIFIED
UX needs to be planned around this constraint
UX needs to be planned around this constraint
- Urine must not touch the color bar sticker; causes reflections during photo capture
- All chemical test pads (called analytes) must be evenly saturated with urine
= must have a way to "apply" urine onto test pads (hardware)
- Urine must not touch the color bar sticker; causes reflections during photo capture
- All chemical test pads (called analytes) must be evenly saturated with urine
= must have a way to "apply" urine onto test pads (hardware)
2. IT TAKES 60 SECONDS FOR THE ANALYTE PADS TO 'DEVELOP'
2. IT TAKES 60 SECONDS FOR THE ANALYTE PADS TO 'DEVELOP'
2. IT TAKES 60 SECONDS FOR THE ANALYTE PADS TO 'DEVELOP'
Do we need some sort of timer function within the app?
Do we need some sort of timer function within the app?
- Need to have users start timer manually since we'll never know when they've dipped the paddle into the urine
- Start timer in the background after users get to dip screen?
- Need to have users start timer manually since we'll never know when they've dipped the paddle into the urine
- Start timer in the background after users get to dip screen?
3. AFTER 60 SECONDS, THE USER WILL NEED TO 'SCAN' OR TAKE A PHOTO OF THE PADDLE THROUGH THE APP FOR PROCESSING
3. AFTER 60 SECONDS, THE USER WILL NEED TO 'SCAN' OR TAKE A PHOTO OF THE PADDLE THROUGH THE APP FOR PROCESSING
Photo capture must be automated
Photo capture must be automated
- Need to let users know the app will capture an image automatically
- Guide user on how to take a 'good' image of the paddle; it must be taken a specific way
= App will open viewfinder x seconds before it snaps a photo
= teach users how to capture an image successfully during the development period
- Need to let users know the app will capture an image automatically
- Guide user on how to take a 'good' image of the paddle; it must be taken a specific way
= App will open viewfinder x seconds before it snaps a photo
= teach users how to capture an image successfully during the development period
STEP #2
INTERNAL USABILITY STUDY
HOW WE WENT ABOUT IT
HOW WE WENT ABOUT IT
OBSERVE
OBSERVE
Gathered all the pain points in each step of the test process as it stands now, by conducting numerous user research with inherited UX (app, instructions, other materials)
Gathered all the pain points in each step of the test process as it stands now, by conducting numerous user research with inherited UX (app, instructions, other materials)
Step #2 - Internal Usability Study
WHAT WE TESTED WITH
Step #2 - Internal Usability Study
WHAT WE TESTED WITH
FIRST ITERATION UX:
FIRST ITERATION UX:
Follow along on walk-through app
Simple instructions with simple animations
Required confirmation at end of each step before moving forward
Step #2 - Internal Usability Study
QUICK INSIGHTS
BOTTOM LINE: PEOPLE NEED GUIDANCE
Using the app described above, we quickly found out we need to:
Get more specific about what it is we want people to do (semantics)
Guide people through the entire process
We also needed to go back to the science team and ask ALL the questions that we could possibly come up with.
Step #2 - Internal Usability Study
SO, HOW DID WE GET HERE IN THE FIRST PLACE?
Step #2 - Internal Usability Study
SO, HOW DID WE GET HERE IN THE FIRST PLACE?
Step #2 - Internal Usability Study
SO, HOW DID WE GET HERE IN THE FIRST PLACE?
The first UX considerations were given by scientists; they are experts so they're able to fill in the blanks if small nuances in instructions were missing.
In an effort to keep things simple, we gave instructions before the testing process began. This approach asked users to remember a lot which leads to mistakes, rather than directing them at each step.
We were looking at individual problems vs reconsidering the wholistic system - both UX and physical.
= NEW APPROACH, NOT BAND-AIDS
The first UX considerations were given by scientists; they are experts so they're able to fill in the blanks if small nuances in instructions were missing.
In an effort to keep things simple, we gave instructions before the testing process began. This approach asked users to remember a lot which leads to mistakes, rather than directing them at each step.
We were looking at individual problems vs reconsidering the wholistic system - both UX and physical.
= NEW APPROACH, NOT BAND-AIDS
The first UX considerations were given by scientists; they are experts so they're able to fill in the blanks if small nuances in instructions were missing.
In an effort to keep things simple, we gave instructions before the testing process began. This approach asked users to remember a lot which leads to mistakes, rather than directing them at each step.
We were looking at individual problems vs reconsidering the wholistic system - both UX and physical.
= NEW APPROACH, NOT BAND-AIDS
The first UX considerations were given by scientists; they are experts so they're able to fill in the blanks if small nuances in instructions were missing.
In an effort to keep things simple, we gave instructions before the testing process began. This approach asked users to remember a lot which leads to mistakes, rather than directing them at each step.
We were looking at individual problems vs reconsidering the wholistic system - both UX and physical
= NEW APPROACH, NOT BAND-AIDS
STEP #3
REVAMP UX
HOW WE WENT ABOUT IT
REVISITING CONSTRAINTS
We went back to the PRD and filled out constraints that we learned from the scientists and set off to rethink the entire flow
Step #3 - REVAMP UX
WHERE WE LANDED
We took the approach of giving people the general overview of the test so they knew what to anticipate next
Added additional "Set Up" step, naming all components and collecting all materials needed to do the test in 1 spot
With some improved UX copy and additional steps added, we landed on the following flow:
STEP #4
EXTERNAL USABILITY STUDY
HOW WE WENT ABOUT IT
TESTING THE WHOLE EXPERIENCE
At this point, we'd successfully re-thought the entire flow of the test. We had the demo app, the required custom cups, and all other components that went into walking through the entire SCANADU Urine process.
It was time to put it all to the test!
Step #4 - External Usability Study
THE SET-UP
SCANADU URINE kit prototype with an outer product sleeve and instructions/quick start guide
SCANADU URINE kit prototype with quick start guide removed, revealing contents beneath
SCANADU URINE kit prototype with quick start guide, as well as paddle "placemat", removed, revealing the paddle pouch underneath
Step #4 - External Usability Study
SEEING IS BELIEVING
The minute we put the whole system (hardware and app) in the users' hands, the pain points became more apparent:
Do not put specific instructions on the box - some started the test without ever launching the app
We included an insert in the box that directed users to follow instructions within the app
If we title buttons with actions we want users to take, they'll review previous instructions to confirm that they are able to move on
STEP #5
APPLY LESSONS LEARNED
HOW WE WENT ABOUT IT
HOW WE WENT ABOUT IT
THE BALLAD OF TOO LITTLE/TOO MUCH
THE BALLAD OF TOO LITTLE/TOO MUCH
There are a lot of constraints that are at play in this product. We could have given users a big list of DO NOT's, but we wanted to deliver a positive experience, so we experimented a lot in finding the perfect balance of telling people too much vs too little.
Here are some results:
There are a lot of constraints that are at play in this product. We could have given users a big list of DO NOT's, but we wanted to deliver a positive experience, so we experimented a lot in finding the perfect balance of telling people too much vs too little.
Here are some results:
CONSTRAINT
CONSTRAINT
Urine must touch the test pads only
Minimum volume for urine = 40ml
GOALS
Get users to collect a urine volume that reaches only up to the height of the test pads
UX RESULT - DIGITAL & PHYSICAL
Make a vessel that is big enough to cleanly collect a urine sample
Make vessel that automatically helps adjust urine volume as users collect
Because collecting to a specific fill line made people anxious, we instructed them to;
1. Collect between max and min fill heights
2. Over collect, then adjust later using the pour spout
1. Collect between max and min fill heights
2. Over collect, then adjust later using the pour spout
CONSTRAINT
CONSTRAINT
Test pads on the paddle may only be immersed in the urine sample for less than 2 seconds
GOALS
Get users to dip the paddle in urine sample very quickly
Express urgency without stressing people out
UX RESULT - DIGITAL & PHYSICAL
Place "Do not open until instructed in app" reminder on paddle pouch
Remind users not to open the pouch until instructed in the app during the intro video
Remind users to open the pouch and confirm they'd done so before continuing onto Dip/Dab/Drop step
CONSTRAINT
Test pads on the paddle may only be immersed in the urine sample for less than 2 seconds
GOALS
Get users to dip the paddle in urine sample very quickly
Express urgency without stressing people out
UX RESULT - DIGITAL & PHYSICAL
Got specific: Dip for 1 second
Visually show how fast the dip is in the demo video
CONSTRAINT
Test pads will return false results if they are left developing for more than 60 seconds after being saturated in urine
GOALS
GOALS
Get users to start the timer immediately after they dip the paddle in urine
UX RESULT - DIGITAL & PHYSICAL
Demo Dip/Dab/Drop/Start Timer sequence right before they do it
Help Dip/Dab/Drop/Start timer rhythm by pacing it out visually with flashing blocks
Gently remind users to tap "Start Timer" by playing a sound and phone vibrating after 5 seconds
CONSTRAINT
Test pads on the paddle need to develop for 60 seconds before users can capture an image of it to get their test results
GOALS
Retain user focus on the app for 60 seconds while paddle develops
Teach users how image capture works during the countdown with a video
UX RESULT - DIGITAL & PHYSICAL
Play instructional video of how to line up paddle to the paddle outline that will appear on the screen
Keep engagement by showing users what will happen next
CONSTRAINT
Users have only 1 shot to capture an image of their paddle per test - otherwise, test pads become overexposed, rendering a false reading
GOALS
Prep users for image capture when the timer runs out
Educate users on how photo capture with the app works
UX RESULT - DIGITAL & PHYSICAL
A combination of video and written instructions of the photo capture process while the timer counts down
At 12 seconds left, the viewfinder reveals live feed so that users are able to adjust the camera
On-screen feedback on how to perfectly line up paddle to the paddle outline within the app once viewfinder opens
Thanks for reading!
TEAM
CLIENT
SCANADU
DIGITAL AGENCY
SCANADU
CREATIVE DIRECTOR
SCOTT THOMAS
USER EXPERIENCE DESIGNER
EMMA SCRUGGS, MANUEL PELAEZ
DESIGNER
LAUREN JOCHUM
TOOLS
SKETCH
INVISION
ADOBE AFTER EFFECTS
A/B TESTING
PEN & PAPER
