PROJECT TIMELINE

February 2024 - June 2024

Chrome Dashboard _ Exercise Library(10).png

MY ROLE

User Research
Affinity Diagram
Information Architecture
User Flow

Wireframing
Prototyping
Visual Design
Usability Testing

Vitto.ai - UI/UX Case Study

A video-based web software that promotes good health habits

TOOLS

Figma
Fathom
Miro

Google Forms
Trello
Maze

1. Project Overview

i. Background

A video-based web software that promotes good health habits through the mirroring concept. Users view short video clips of people engaging in healthy activities, such as stretching, yoga, or other quick workouts, and are encouraged to follow along and make similar movements.

ii. Problem

The result of our user research shows that...

Users spend an excessive amount of time seated in front of their computers due to online work and study.

When individuals sit for long periods, they can have many issues, such as back and neck pain, depleted energy levels, high stress, and weakened focus for tasks.

As this type of problem emerges, a majority of the population could negatively impact the healthcare system.

iii. Solution

Get in shape with... the Vitto.ai software!

The solution we provide is a video-based application that supports effective health habits via the mirroring concept, a reliable and effective method that encourages users to replicate exercises.

A visual pop-up will appear to remind the user that it is time to take a break from their computer to exercise, grab a snack, or take their medication.

After viewing a short clip of exercises such as stretching, yoga, and so forth, users gain the motivation to copy the movements, significantly improving their overall health.

2. Design Process

i. User Research Methodologies

Tasks would be organized and completed through Trello to maintain communication within the team and the progress of the project. We began the project in Figma to understand the conceptual aspect of the Vitto.ai web extension. This would help us identify what users want from a break/exercise reminder software add-on.

Two methods would be utilized when acquiring user data for the project:

User Surveys

User Interviews

ii. Surveys

The Google Forms would aid the team in creating surveys. They would serve as a simple yet effective way to gather qualitative and quantitative data to measure for the user experience design.

After posting the surveys and evaluating the responses, we found that many users mainly...

spend at least 4 to less than 8 hours a day online.
do remote work from their home.
did not seek healthcare professional advice from health management apps.
spend at least 30 minutes using health management apps.
visit social websites like Youtube, Facebook, and Instagram.

iii. Conducting User Interviews

The team's focus shifted over to the user interviews, where more in-depth questions could take place. Our aim was to gather additional details on the user's lifestyle and the way they keep up with their health progress through a questionnaire.

The Fathom software (an AI notetaker) was employed in case we needed to backtrack and transcribe the information from the interviewee's answers. Achieving deeper answers from interviewees would be moderately challenging since the questions would have to be phrased in such a way that they did not sound redundant or repetitive.

Once the interviews were completed, they were transcribed so that the responses could be recorded in written form and analyzed for the development of the web application. The team's research findings revealed crucial points relating to the user's lifestyle and preferences for working towards positive exercise goals.

Key takeaways from findings:

Many users want to perform exercises at home due to a lack of time.

Users find it cumbersome to go to the gym to exercise since they do not want to leave their comfort zones.

Moreover, it can be difficult to do exercise activities due to a lack of time from school commitments and work.

Users were unable to make efficient and effective use of break reminder applications.

Other health applications typically have an unwieldy nature, making them unusable for individuals.

In addition, tracking food and water intake within the health management apps can be demotivating for those who want to exercise.

iv. Journey Map

The journey map that we created does not showcase any particular personas since the concept of the Vitto web extension would target a huge demographic of users by having a single fictional entity. As we analyzed the data that we gathered, we noticed users all had the same goal:

to find a way to deal with their eye strain, occasional mild headaches, or other types of issues when sitting at their desks for a long time.

As seen on the journey map, Vitto.ai acts as a tool that users can engage with in order to enhance their overall physical, mental, and emotional health. The conclusion of the users' journey has made them more relieved and hopeful about their condition. Feedback revolving around negative outcomes is taken into consideration to ensure that the needs of the users are fulfilled.

v. User Storyboard

Although it is not an accurate depiction of the end result, the storyboard (AI-generated) made in Miro still gives a distinct perspective from the perspective of a user who experiences eye strain. When the user searches for a solution to fix their eyesight, they eventually discover the Vitto.ai app that helps remind them of their break reminders.

1.
User is working remotely and is experiencing eye strain.

2.
User looks online for an app that can help them with their problem.

3.
While searching, they come across the Vitto.ai web extension.

4.
As the user is working, they get reminded that it is their break time.

5.
The user follows the steps for the exercises and has break reminders regularly.

6.
After a week, the user's eyesight and overall health improves significantly.

vii. Competitive Analysis

To gain an in-depth perspective of what our users want, we examined the strengths of health management applications and analyzed the concepts that could be improved.

The team collaborated on gathering informational data on the distinctive attributes that are seen in our competitors' products, such as the reward and punish system, an in-app library of resources, and many customizable options to suit users' needs. We would identify negative aspects of health/break reminder software, allowing us to devise solutions that successfully engage users into performing exercise and spend less time on their computer.

3. Prototyping

i. Low Fidelity Wireframes

An early prototype with functional buttons had been designed to capture the overall look and feel of the dashboard. While it was able to take users to another page, we had worked on a slightly more developed version for the usability testing.

The top part of the screen would include a navigational bar to quickly access main components on the dashboard, whereas the left menu would take users to subcategories, cutting down on steps to reach certain pages.

ii. Usability Testing

A total of twelve users participated in the usability testing to give clear and unbiased feedback. The purpose was to know how simple it was for users to navigate through the dashboard to accomplish a task or reach a specific page. The Maze software tool would be put into effect for collecting data from the test.

Task: locate the Finger Lift exercise through the exercise library.

Results of usability test...

66.7% Direct Success

More than half of the participants successfully found the "Finger Lift Exercise."

39.3% Misclick rate

More than half of the participants had not clicked on the right buttons.

23.2s Avg. duration

Total seconds to complete the task. In this case, it took a long time to locate the exercise.

These results would provide sufficient information on developing a superior user interface that avoids wasting time and helps users achieve specific tasks more efficiently.

iii. Style Guide

Before refining the user interface, a brand theme would be necessary for the project since it required an appealing and modern style to boost usability levels. The various colors play a pivotal role in keeping a consistent and usable user interface for knowing what can be interacted with on the dashboard.

iv. High Fidelity Wireframes

Several changes had been applied to the design, such as updating the color scheme and adjusting a few icons to ensure users have a better understanding of how the dashboard works.

v. Challenges and Solutions

Throughout the creation process, the team reassessed numerous components of the project in order to provide the best usability experience for those who want to have a healthier lifestyle.

We reflected on the process that not only delivers a product that

supports physical health but also encourages positive fitness habits through break/exercise reminders.

Challenges

Solutions

User Interview

Ensuring the interview is confirmed.

Recording and auto transcribe.

Differences in timezones.

Network issues (power cutting off).

Thematic Analysis

Analyzing data correctly from the surveys.

Understanding what users want so the web extension is made to their liking.

Creating insights.

User Flow

Mapping the dashboard to the other pages.

Make sure it correlates well with the information architecture.

Creating insights.

User Interview

Sent confirmations and addressing timezone issues.

Allowing respondents to answer questions on their own time.

Having another team member present during an interview in case one loses connection.

Thematic Analysis

Using the transcript to locate key phrases within answers.

Saving time by utilizing chat GPT to analyze collected data.

User Flow

Due to the complexity of the dashboard, the user flow had been separated into three components.

Double checking to see if user flow lines up with information architecture.

4. Next Steps

Since the high-fidelity wireframes had been completed, production of Vitto.ai will move into the development stage turning it into the final version. The project requires further usability testing to ensure the software offers a high-quality user experience and functions correctly for a wide range of individuals.

The project had been an engaging experience for me, as I have learned many lessons, such as knowing efficient techniques within many types of software for UX design and gaining a deeper understanding of what techniques to use when designing for users.

UX Case Study

◀ Prev.

Autumn Grill

Illustration Case Study

Next ▶

PROJECT TIMELINE

February 2024 - June 2024

MY ROLE

User Research

Affinity Diagram

Information Architecture

User Flow

Wireframing

Prototyping

Visual Design

Usability Testing

Vitto.ai - UI/UX Case Study

A video-based web software that promotes good health habits

TOOLS

Figma

Fathom

Miro

Google Forms

Trello

Maze

1. Project Overview

i. Background

A video-based web software that promotes good health habits through the mirroring concept. Users view short video clips of people engaging in healthy activities, such as stretching, yoga, or other quick workouts, and are encouraged to follow along and make similar movements.

ii. Problem

The result of our user research shows that...

Users spend an excessive amount of time seated in front of their computers due to online work and study.

When individuals sit for long periods, they can have many issues, such as back and neck pain, depleted energy levels, high stress, and weakened focus for tasks.

As this type of problem emerges, a majority of the population could negatively impact the healthcare system.

iii. Solution

Get in shape with... the Vitto.ai software!

The solution we provide is a video-based application that supports effective health habits via the mirroring concept, a reliable and effective method that encourages users to replicate exercises.

A visual pop-up will appear to remind the user that it is time to take a break from their computer to exercise, grab a snack, or take their medication.

After viewing a short clip of exercises such as stretching, yoga, and so forth, users gain the motivation to copy the movements, significantly improving their overall health.

2. Design Process

i. User Research Methodologies

Two methods would be utilized when acquiring user data for the project:

User Surveys

User Interviews

ii. Surveys

The Google Forms would aid the team in creating surveys. They would serve as a simple yet effective way to gather qualitative and quantitative data to measure for the user experience design.

After posting the surveys and evaluating the responses, we found that many users mainly...

spend at least 4 to less than 8 hours a day online.

do remote work from their home.​

did not seek healthcare professional advice from health management apps.

spend at least 30 minutes using health management apps.

visit social websites like Youtube, Facebook, and Instagram.

iii. Conducting User Interviews

The team's focus shifted over to the user interviews, where more in-depth questions could take place. Our aim was to gather additional details on the user's lifestyle and the way they keep up with their health progress through a questionnaire.

Key takeaways from findings:

Many users want to perform exercises at home due to a lack of time.

Users find it cumbersome to go to the gym to exercise since they do not want to leave their comfort zones. Moreover, it can be difficult to do exercise activities due to a lack of time from school commitments and work.

Users were unable to make efficient and effective use of break reminder applications.

Other health applications typically have an unwieldy nature, making them unusable for individuals. In addition, tracking food and water intake within the health management apps can be demotivating for those who want to exercise.

iv. Journey Map

v. User Storyboard

1. User is working remotely and is experiencing eye strain.

2. User looks online for an app that can help them with their problem.

3. While searching, they come across the Vitto.ai web extension.

4. As the user is working, they get reminded that it is their break time.

5. The user follows the steps for the exercises and has break reminders regularly.

6. After a week, the user's eyesight and overall health improves significantly.

vii. Competitive Analysis

To gain an in-depth perspective of what our users want, we examined the strengths of health management applications and analyzed the concepts that could be improved.

3. Prototyping

i. Low Fidelity Wireframes

An early prototype with functional buttons had been designed to capture the overall look and feel of the dashboard. While it was able to take users to another page, we had worked on a slightly more developed version for the usability testing.

The top part of the screen would include a navigational bar to quickly access main components on the dashboard, whereas the left menu would take users to subcategories, cutting down on steps to reach certain pages.

ii. Usability Testing

Task: locate the Finger Lift exercise through the exercise library.

Results of usability test...

66.7% Direct Success

More than half of the participants successfully found the "Finger Lift Exercise."

39.3% Misclick rate

More than half of the participants had not clicked on the right buttons.

23.2s Avg. duration

Total seconds to complete the task. In this case, it took a long time to locate the exercise.

These results would provide sufficient information on developing a superior user interface that avoids wasting time and helps users achieve specific tasks more efficiently.

iii. Style Guide

iv. High Fidelity Wireframes

Several changes had been applied to the design, such as updating the color scheme and adjusting a few icons to ensure users have a better understanding of how the dashboard works.

do remote work from their home.

Users find it cumbersome to go to the gym to exercise since they do not want to leave their comfort zones.

Moreover, it can be difficult to do exercise activities due to a lack of time from school commitments and work.

Other health applications typically have an unwieldy nature, making them unusable for individuals.

In addition, tracking food and water intake within the health management apps can be demotivating for those who want to exercise.

1.
User is working remotely and is experiencing eye strain.

2.
User looks online for an app that can help them with their problem.

3.
While searching, they come across the Vitto.ai web extension.

4.
As the user is working, they get reminded that it is their break time.

5.
The user follows the steps for the exercises and has break reminders regularly.

6.
After a week, the user's eyesight and overall health improves significantly.

Throughout the creation process, the team reassessed numerous components of the project in order to provide the best usability experience for those who want to have a healthier lifestyle.

We reflected on the process that not only delivers a product that