VIGO
Stay Healthy and Happy during Home office.
• Stretch to relieve tension
• Exercise at home
• Track your Health
• Support healthy lifestyle with Checklists
• Book Medical Appointments
Role: Research & UX/UI
Timeline: November 2020 - April 2021
• Stretch to relieve tension
• Exercise at home
• Track your Health
• Support healthy lifestyle with Checklists
• Book Medical Appointments
Vigo is a Responsive Web App designed for people who want to support their health and improve their lifestyle during the pandemic.
November 2020 - April 2021
Vigo app was created as a final deliverable on the Career Foundry UX Design course. The goal of the project was to go through the whole design process from research to conception, visualization, and testing of a product.
UX Designer
The whole design process from research to conception, visualization, and testing of a product.
To create Vigo, I followed the Design Thinking Process. This helped me iteratively redefine problems and find alternative solutions that were not immediately obvious with my initial understanding.
1. Problem statement
2. Competitor analysis
3. User interviews & surveys
4. User personas,
User journeys,
User flows
5. Sitemap
6. Low-fidelity
7. Mid-fidelity
8.Interactive &
clickable prototype
9. Usability Tests
10. A/B Preference tests
11. Polishing the design
12. Design Documentation
13. Mockups
14. Concluding thoughts
A well-defined problem statement is critical to understanding the goal of the UX design project, choosing the right development direction, and explaining to stakeholders what needs to be accomplished.
20-45-year olds who currently work from home and want to improve their health.
A responsive web app focused on supporting a healthy lifestyle.
During breaks, while working from a home office, in the morning or evening.
At home
It’s difficult to maintain healthy routines in the home office and find a way to stay fit.
People who work from home during the lockdown need a way to relieve stress and tension in the body, get ergonomic tips and advice for physical and mental well-being because they want to stay fit and happy during the pandemic.
An app that allows users to access:
• Stretching exercises and workouts
• Checklists, tips, and articles about physical/mental health and ergonomic home office.
• Booking medical appointments
A competitive analysis is a great way to gather and compare data about products on the market. I used this method to identify the strengths and weaknesses of products and opportunities for my project in order to make more informed decisions.
Our project have good chances to win users on the market if the following conditions are met:
• Adapting an app for all devices and operating systems
• Beautiful visually clear exercises and stretching tips especially for the home office
• Appealing trackers and checklists that motivate the user to do activities
• Visualization of user progress
• Good marketing strategy
I conducted User interviews to gain qualitative data for my app and User surveys for quantitative data. This combination allowed me to get valuable insights into potential users’ needs and define the direction of work.
• Identify users’ pain points and challenges in maintaining a healthy lifestyle at home.
• Discover user’s past experiences and challenges they have had with workouts and stretching at home.
• Identify the user’s issues with booking medical appointments.
• Learn about the health problems users experience after long periods of desk work and how they deal with them.
• Learn about users’ previous experiences with health/wellness apps.
• Discover users’ challenges with healthy habits.
• Identify features that can be useful for them in such an app.
I started analyzing interviews with organizing and sorting data, that I got from each participant
Next, I created an Affinity map to sort data from user interviews into clusters based on actual themes for my app
87%of participants having a desk job and 82.6% currently working from home.
78% are not satisfied with the amount of their physical activity and physical condition
74% of participants thinking that tracking their healthy routines progress with checklists can be useful and want an app for staying physically and mentally fit during the Home office.
15 participants choose stretching exercises and checklists and trackers for healthy habits for their health app.
1. Stretching exercises
2. Checklists and trackers for healthy habits
3. Short guided workouts
4. Exercises against pain and strains
5. Getting professional advice
1. About mental health
2. Ergonomic tips
3. About physical health
4. Curious facts about health
User Personas
Based on the user research conducted, I created three User Personas representing different audiences for my project. Personas allow design decisions to be made based on real data from real users, keeping the target user groups in mind at every stage of the design process.
User Journey
maps
I created user journey maps for my 2 primary Personas - Maria and Claus to understand and present goals, habits, and behaviors of them in reference to my project even better.
My user journey maps are focused on visualizing processes a user goes through in order to reach his goals.
User Flows
User flows representing the pages my users will interact with to complete their tasks and achieve their goals.
In this initial phase of project development, User Personas, User Journeys and User Flows helped me:
• Identify the key tasks and features of an app
• Outline and document Key Tasks to ensure that the information architecture supports them at each stage.
Consequently User Personas, User Journeys and User Flows guided me to create an initial site map.
To design the Information Architecture of my application, I created an initial sitemap based on user flows. The initial sitemap was refined with a card sorting method.
As a result of card sorting, I identified the main categories that potential users consider as logical categories for placing the content of my product. This will help me refine the Infomation Architecture of the Application and make it user friendly.
After defining the main features and their location, I started sketching my first wireframes based on user flows and user personas.
First, I created Low-fidelity prototypes by sketching my ideas to structure the features that are critical to my target audience. This is the best and fastest way to sort out all the important points that came up from a sitemap and user research.
At this stage, I used Adobe XD to create more detailed wireframes to show the form and features of my app. These are the wireframes for one of the main functions - stretching exercises.
Using a low-fidelity prototype as a foundation, I created the first digital Middle-Fidelity prototype that presents more detail to better convey the app’s form and function.
At this stage, I have improved and detailed my wireframes and created a clickable prototype so that users can test the main features of the app.
With high-fidelity clickable prototype, I had to pay as much attention as possible to all the details in the project as much, as possible at this stage. It’s delightful to think about how users are used to seeing interfaces like this, where they want to find a particular feature, how I can make an interface useful and their experience enjoyable to achieve their goals.
I conducted: 4 Moderated remote tests and 3 Moderated in-person tests.
Through analyzing Usability Tests with Affinity maps, Rainbow Spreadsheet and post questionaries (Single Ease Question and System Usability Scale),I identified the top 5 issues.
• To evaluate the ease and learnability of an interface for users
• To assess how quickly and simple users can complete the tasks
• To observe if new users understanding the app from the first use.
To interpret and organize the information from my usability test recordings I used an Affinity map. The important quotes of participants were sorted into the following groups:
1. Because of “Get started” on the first screens, the onboarding was skipped
2. Difficulty with closing the Hamburger menu.
3. It was a friction point for 3 participants to find the Appointments and Checklists.
4. Appointment Confirmation needed where users can check all details.
5. The Medical Appointment screens for choosing date and time looked unfamiliar.
I left “Get started” button just on screens with
setting goals.
Appointment Confirmation screens added.
Now users can check the details.
Most participants found Vigo easy to use and quick to learn; they felt confident using the app.
However, usability testing showed that some of the features were not as well integrated or named.
The changes described above were important and worth investing resources into to create user-friendly interactions within the app.
I conducted two preference tests with 12 participants to find out which Splash screen feels more attractive to participants and what format to choose for Onboarding screens.
To determine which Welcome screen participants would prefer from two options.
All of my 12 participants prefered option A
A option got 100% votes. This means that I can be very confident that this option is actually better, and not performing better due to random chance.
To choose the style and format for my Onboarding screens.
10 from 12 participants prefered option A
Option A got 83% votes. Most part of participants would prefer to see Onboarding screens of the app in such format.
Preference Test is a great fast method to determine the best option for a project. I found out that participants prefer simple, not overloaded designs with clean minimalistic concentrated information without distracting details. My test results graphically highlighted the best options with such a significant difference in preferences.
In this phase of my project, I improved the design through the peer reviews gathered during the design collaboration and applied gestalt principles.
On Doctor’s profile screen users will be guided from the top with the most important information (Profile photo, star rating, Doctor’s name)
Call to action (CTA) “Book Appointment” is highlighted over the whole screen with primary color.
The Buttons and Doctor’s Profile Card are clearly separated with a distance, sizes, and color. Besides, information about doctors is also separated into logical groups.
I agree with this feedback. Without an extra button, the screen will look cleaner and it will prevent overloading.
• I changed the header for the 7-day program
• Added a section with the schedules for each day.
• Left the start button at the top so users can quickly start exercising without having to scroll down.
Now it’s clear that it’s a program for a week and what you can set a reminder for.
Here I had struggles with CTA button colors and contrast ratio, which I discussed with my mentor and tutor and came to a final decision.
Gestalt Laws of Grouping and the Principles of Design are extremely useful in order to improve an app’s design and usability. It is crucial to keep them in mind during working on projects for avoiding clutter and confusion in interfaces.
Design collaboration helped me to find some pain points and improve my design. It happens often that after long working on a prototype you can’t notice some mistakes anymore, that’s when feedback is necessary.
I created design documentation, including style guides, patterns, and design language to standardize my design and make it reusable. The interface was designed to be bright with colored accents to highlight important areas.
Design documentation is important for any project to keep it consistent and to communicate the design with everyone who will be working on it.
After several tests, iterations, and design polishing, the final mockups are ready and waiting for the following tests and iterations.
Want to see the Vigo App in action? Check out the clickable interactive prototype below.
Want more details about the project progress? Than you can also watch video presentation of the app.
My product has changed drastically after the last usability test and I think at this point a new round of testing needs to be done to understand the further direction of improvement.
I think the further user testing would be completely different as the app has changed so much, got many details and visual elements. Now potential users can use it as a finished product and give me valuable feedback
Following the Design Thinking Process to create Vigo gave me a lot of insight for iterative improvements needed to create user-friendly products.
This project was part of the Career Foundry UX design course. I would like to thank the Career Foundry team for this experience and my Mentor Christiane Moser and tutor Baraa Abuhussein who helped me with every question and gave valuable feedback.
Photos and Illustrations credits:
unsplash.com
Pana, storyset.com
