Wellness Tracker Testing App UX Design

In a super early-stage startup, I designed a mobile app to check your body wellness using a urine test strip.

Role

Sole UX/UI Designer

Deliverables

Visual Design, UX Design, Mobile UI Design, UI Motion, Prototyping

Team

A small team of developers

Client

Client Logo

Overview

I was in charge of the whole design process for Perfeqt. My role covered everything from the initial benchmarking, designing, handing over to developers, and maintaining the app’s user experience.

perfeqt images of customers using the app

Context

Perfeqt is a wellness insight product using urine test card that you can do it at your own convenience, also featuring a personalized lifestyle plan, food recommendations, and customized supplements.

Discovery

We're checking out some products that share similar mindset from the user experience perspective. This helps us see what competitors are doing.

Based on what we found, we're sorting them by asking:

  • How easy is it to use on my own?
  • Can I tailor it to my own speed and situation?

Our product user experience should hit the sweet spot, get the wellness parameters insight in no time, conveniently at home, or any location of their choice.

positioning

Vivoo approach is pretty much what we're aiming for, so we decided to use it as the UX benchmark.

ux benchmark vivoo

Ideation

Given the tight deadline, I opted for an "Copy and Modify" approach to quickly generate ideas, focusing on achieving maximum impact with minimal effort.

Interaction Tree Map

I put together my findings into an Interaction Tree Map, which is a great way to organize all the info architecture. It lays out user interactions visually, making connections clearer and the whole experience smoother.

Interaction tree map

The benefits of Interaction Tree Map are allow us to do early reviews with stakeholders, gives a clear overview of existing features and screens, and eliminates the need for an additional user flow. And I feel confident to move forward with the design phase.

Design Discovery

design guidelines 1 design guidelines 2

I started with building new reusable UI kits and assets needed, integrating them into the existing design library in alignment with the existing design guidelines.

Based on the Interaction Tree Map, we also need some animations to showcase the test-taking process. Then, I created the animations using Lottie, a tool specifically designed for building motion graphics for UI designer.

Design Deliverable

User Login

perfeqt app login screen

Test Instructions Screen

perfeqt app landing screen after login

Step-by-step Instructions

perfeqt app test taking instruction screen

Test Card Scanning Process

perfeqt app scan process screen

Results & Homepage

perfeqt app results screen

Impact

Perfeqt has grown 5 times since 2021, driven by strong momentum in the at-home testing market, solid marketing effort, and effective product adoption with user centered constant iterations. So far, Perfeqt's doing pretty well with over 12K people signed up and 11K product subscriptions.

reviews community

Conclusion

What could I have done better? Sure we're far from perfect, there was unclear value to our customers, especially where people tend to use our competitors more compared to our products. By really understanding their problem, I hoped that we're able to create value that fills the unmet problem which aren't satisfied by our competitors.

What did I learn? I learned that there is no one-size-fits-all solution to satisfy the users problem. What works on Vivoo may not work on Perfeqt. Understanding the unique needs of the products users is key in creating a feature that will work for your product. I kept looking at what other similar products were doing, instead of just trying to focus on the actual problem. Once I did, the answer was right in front of me.