UI/UX Design Project
Vitalysis

Overview

Vitalysis offers a unique telemedicine platform that helps users easily track their blood sugar, diet, and sleep. As a one-stop-shop, Vitalysis allows patients to monitor and easily create visualizations of their data and health that they can share with their practitioners.

What I focus on

As an early-stage start-up to create a brand new application there are many things need to do. What I focus on is registration flow for the user. I worked with one design lead Hadia for the whole project.

Defining the problem

• Elderly people having a hard time complete the registration flow.
• Too much information for users to fill in before they can use the application.
  
• Balance user needs and company needs.

Target Audience

Based on our research we conducted to two personas for future design

User Journey

The registration flow can be included in any application, but how could we provide a better user experience? Through user testing and user behavior, we observe that when users need to fill in the personal information they show impatience. But when we interview them in-person, they act more relaxed. So we boldly change the form-filling style to dialog style in the registration flow.

Our iteration cycle is Testing → Measure → Learn and Research → Build.
For each round of user testing, we will find 3-5 users to collect the data (we might video record if we get the user's approval). Based on the user's behavior and feedback, we measure the usability of the current design, which gives us a direction on the next iteration.

Version 1

High-Fidelity

We got the old flow from the Vitalysis, and we turn it into high-fidelity to do the first round user-testing. The purpose is to validate our concerns and find out what are the pain points for the users.

Version 2

Show user type

Since the app supports both patient and doctor accounts. We refine the UI to display user type on the "create account" page, so the user is very clear on which type of user accounts they are registering, and reduces confusion. With the intention to balance the requirement coming from the business perspective. We remove the "Skip" button so that the app can collect more patient information

Version 3

Dialog style

From the user's feedback and usage behavior, we discover that users are not excited about switching apps, because they felt tiring to fill in forms. By asking more questions, we realize that users are more willing to participate in an interactive or conversational setup. So we try to bring this idea into our design

Key Finding 4

Icon-based avatar

V3 got many positive feedbacks. However, the chatbot using real person avatar cause confusion among elderly users. Because they thought their doctor has changed. So we modify to use a icon-based avatar to avoid confusion

Final Design

Key Feature 1Verify User's EmailVerify the user's email address before proceeding with the registration, which helps maintain high information credibility within the platform.

Key Feature 2Chatbot Registration FlowUsing interactive chatbot registration flow to give a user-friendlier experience instead of plain-old form filling. Also maintains the flexibility of revising previously replied answer if there's a user input error

Key Feature 3Final ConfirmationComplete the registration flow with a confirmation page, where user can double-check and revise their information if necessary