SNAPSHOT

Snapshot allows health-conscious individuals to log their bloodwork readings into a responsive health portal to record their health and medical information, as well as access general physical and mental wellbeing features.

 

My Role:

UX UI Designer

Duration:

10 months

Tools:

Figma

Look, we have a problem ⚠️

People have neither easy access nor a complete understanding of their bloodwork which only makes it easier for them to ignore their health.

Snapshot can solve this problem 🛠️

by allowing users to store their own blood work in one spot, they will be able to check their bloodwork at any time at any place and stay more conscious of their health.

 

Anyone with Snapshot could:

  • Store all of their blood results in one place

  • Get a brief explanation of the blood result instantly

  • Visualize change in the result over time in a graph

  • Look up medical terminology or health-related articles

  • Remind your family member to get a blood test

  • Share your blood result and date of your blood tests with your family members

  • Look up nearby lab locations

Design Process

 
  • Competitive analysis (S.W.O.T Analysis) + 4 Interviews + 12 User Surveys

  • User Persona + User Journey + User Flow (3)

  • Card Sorting + Information Architecture

  • Lo-fi wireframing (pen&paper)

    Hi-fi wireframing and prototyping (Figma)

  • Usability testing (6)

  • Implement the feedbacks from the usability testings and fellow designers

 

I surveyed 12 people

 

I was shocked to find out that out of 12 people I surveyed 91.7% didn’t remember where they placed their last bloodwork results and 33.3% don’t think taking blood tests regularly is essential in order to stay healthy. This is a real problem.

Through the result, I learned that the reason why adults don’t prioritize taking blood tests is that they don’t know what to do to improve! They merely don’t know where their health stand because they can’t find where their bloodwork is! It’s easier to assume they’re healthy than taking time and energy to go to the doctor. This is where Snapshot could come in. Snapshot will save the energy and time to understand one’s health.

I interviewed 4 people.

 

Originally I targeted people in the 50s and 60s.

People who need this application the most are older adults. However, through the interviews, I learned that older adults are intimidated by technology because they have lived in a time when there was no technology. This made me realize that the design needs to focus on accessibility.

I shifted the target audience from 50s-60s to 30s-40s

I realized I need to target an audience that is more familiar with the technology. That way, it would buy us more time to perfect the functionality of the platform and refine its accessibility. Simultaneously, they could act as another source of motivation for elders to learn the technology as family members.

Competitive Analysis

 

One of the few takeaways was design details about information privacy on Carrot since users might be hesitant to register their personal information.

There are not many applications active in this market. I was able to find a few of the mobile applications but they didn’t have a significant audience judging by the reviews. After investigating the reviews for the two major applications, Sansara and Carrot Care, I learned it’s because of the number scanning inaccuracy. This taught me that users like to use the camera to scan the bloodwork numbers. If this was a real project, I would signify this detail with the software developer before conducting usability testing.

Recreating the situation

 

Card Sorting

 

I used Usability Hub website to conduct card sorting surveys before building Information Architecture. I was shocked to learn how people would go to ‘Progress’ and ‘Search’ pages to find different content. I realized I need to create a categorizing system on the search page to navigate people to the desired content faster.

Information Architecture (1st attempt)

 

Time to build the backbones for the design! Using the information I learned from the user flows and the card sorting tests, I spread out all the pages that would cover all the possible paths in a hierarchy that would guide users easily to what they want.

I asked people what kind of app they think Snapshot is by solely looking at the I.A.

 

However, after finishing the first draft, the application seemed to be all over the place. So I asked a few people (who never knew about Snapshot) to look at the I.A. and tell me what they think it’s about. They thought it was a health recommendation-providing application instead of a data-storage application. That was problematic because it means the I.A. was distracting users from the true identity I planned for Snapshot to be. The extra features I added were confusing the users. Also because the app was offering too many features all at once when they first open the app, it was taking attention away from the main feature which is the bloodwork-storage feature.

Information Architecture (Revised)

 

I reinvented the I.A. with a more dramatic hierarchy. This time, users would have to click on the submenu to access the extra features that are not very relevant to what the application is about. I was very happy with the result because this I.A. is definitely emphasizing the two main features of the app (Library and Analytics).

Low-Fidelity Wireframes

 

Because phones are products users interact with their fingers physically, I believe it’s still important to draw it out by pencil to imagine how people would interact with the application. I would only draw out low-fidelity wireframes, a minimal structure of the design, to save time.

High-Fidelity Wireframes

 

This is the fun part where I bring all my ideas to life! I transformed all the hand-drawn low-fidelity wireframes to hi-fidelity wireframes using a prototyping software Figma.

Let’s test it out!

 

I conducted six rounds of user testings to observe how users would interact with the application in real life. The tests were carried out formally after establishing a test plan, script, contracts, and demographic questions before the interviews. I tried my best to make users feel as comfortable as possible so that they could play by the true characteristics and not the person they feel pressured to be. During the sessions, I paid careful attention to participants’ attitudes, word choices, and facial expressions. I tried to catch any detail that was insinuating discomfort and asked flexible follow-up questions to identify any pain points they have a hard time articulating.

Take-aways from the usability tests

#Affinitymap #Rainbowchart #ABTestings

 
  1. Inconsistent word choices of “blood test result” and “blood readings” were confusing the participants.

  2. Unrelated content on the result page confused the participants.

  3. The length of the onboarding was too long, and some of the survey questions felt irrelevant to the users.

  4. Participants wanted to see more guidance and tutorials.

  5. The majority of the participants thought the application was cool but too complicated for older adults to learn.

  6. Participants suggested adding more colors.

Let’s compare.

Before / After the revisions

Before

the usability tests

After

the usability tests

Design System

Scroll down: Color Guidance, Typography, Iconography, Elevation,

Design elements, Illustration, Images, Animation, Responsive Layouts

Challenges

Working Alone

There were many times I was stuck between more than two ideas. During those times I wished I had teammates to ask for the objective perspective on the situation so I could move on. I learned that I tend to spend a long time making design decisions because I’m biased towards my own design. When I think back, I would have appreciated working with other designers because it would have given me another level of motivation.

Too much Freedom

Because I got to spend as much as I want on my project, I wasted too much time chasing the idea of the “perfect solution”. Since this is the first UX project I’ve worked on, I tried to build a firm foundation one by one rather than trying to finish the project as fast as possible. However, after spending a long time on one project, I’ve learned that achieving small goals on a planned schedule is more important and efficient than making compromises to be perfect because there is no “perfect design”.

Learning

You have to be a good person to become a good ux designer

The reason why I wanted to continue to grow as a UX/UI designer is that my journey as a UX design not only taught me how to make eye-catching designs but also challenged me to become an empathetic person. It forced me to really put myself in other people's shoes to understand their real pain points. The rewarding satisfaction coming from solving a problem that a lot of people might be experiencing around the world hits different.

Next
Next

Diction (Vocabulary Learning App)