Daily Havit Mobile App
UX/UI Design, Mobile Application, Concept
Project Timeline
8 weeks (Mar 2022 – May 2022)
UX/UI Designer
UX Researcher
Branding/Creative
My Roles
OptimalWorkshop
Miro
Octopus
Adobe Illustrator
Figma
Maze
Tools
This project gained visibility and was selected to be featured in The Best Navigation App Design by DesignRush, a platform known for promoting app design.Daily Havit is a vitamin recommendation app for people who want to get personalized vitamin supplements and get reminders to take the vitamin supplements on time during the day. This app allows users to purchase the right vitamin supplements, control their portion, notify them when they need to take vitamin supplements as well as educate them about taking the vitamin supplements.
Context
People consume multiple and a variety of vitamin supplements, some of them do not know which vitamin supplements and how much of them are good for them clearly based on their lifestyles and food habits and some of them purchase the vitamin supplements and easily forget to take them every day.
Problem
- Make it easier for customers to select the right vitamins (reducing overwhelming amount of choice)
- Help customers understand which vitamin supplements are necessary through quiz
- Give customers better understanding of how to take the vitamins
- Reminder feature, it makes customers take the vitamins on time, every day (keep healthy lifestyle)
- Customers can track their vitamin consuming status through calendar
- Customers can get delivered one box (30 packs) to their doors monthly (if subscribed)
- Customers can learn tips and myths about the vitamins & health through online board
- Customers have 1:1 consultation service with nutritionist
Opportunities
Research
In the research phase, I conducted competitive research, surveys, and user interviews. I expected to learn what people think about vitamin supplements, which vitamin supplements and how much they take them per day, how much money they spend for purchasing vitamin supplements, what main sources to find/buy good vitamin supplements for them, their consistency of vitamin supplement consumption.
Methodologies & Research Goals
- Understand people’s thoughts about vitamin supplements
- Understand their vitamin supplements consuming habits
- Find how they choose vitamin supplements
- Find if they take too much vitamin supplements even though they keep a healthy diet.
- Understand people’s needs and pain points of purchasing vitamin supplements.
- Learn how often people take vitamin supplements
Objectives
- People are between 20 to 60 and have an experience with purchasing and taking vitamin supplements.
- People who easily forget to take vitamin supplements regularly
- People who want to start to take vitamin supplements and have healthy routine
Participants
I conducted user interviews with 4 participants who have been taking different types of vitamin supplements regularly and irregularly. Interviews helped me recognize each participant’s pain points and goals from selecting and purchasing vitamin supplements also findings from the user interviews led me to generalize a persona.
Competitive Analysis
Researching 4 different competitors in a health supplement industry gave me each competitor’s strengths and weaknesses. Through this process, it helped me to understand how the competitors approach users to explain and sell their services and product informations. It gave me a better understanding of what Daily Havit mobile app has and how the brand provides users its services in a clear way.
User Interviews
Interview Findings
Surveys showed me 22 participants’ experiences in browsing, purchasing, and taking vitamin supplements. I learned that the participants had similarities in consuming and taking vitamin supplements but in browsing and purchasing phases, some participants had different patterns such as going to offline stores to get their vitamin supplements or getting recommendation of vitamin supplements from their friends or families before purchasing. This helped me build in-depth questions for user interviews.
Surveys
- Over 80% of the participants take vitamin supplements currently.
- 58% of the participants take them for over 2 years.
- 70% of the participants who do not take vitamin supplements are positive to take them in the future.
- One of the main reasons of taking them is to be healthy. (Other reasons: diet and pregnancy)
- 45% of the participants take vitamin supplements after eating breakfast, other 45% of participants take them whenever they remember. Only 10% of participants take them as soon as they wake up.
- Half of the participants purchase vitamin supplements through online sites, the other half of the participants purchase them in actual stores.
- In 90% of the participants, half of them buy vitamin supplements every 3 months, the other half of them buy the vitamin supplements every 6 months.
- Majority of the participants consider quality and quantity of vitamin supplements before purchasing.
- Over 50% of the participants spend between $45 to $60 when they purchase vitamin supplements.
- Over 70% of the participants have no experience with personalized vitamin supplements.
- Over 70% of the participants are positive to try the personalized vitamin supplements.
Findings
Define
After collecting data and understanding multiple users’ needs and frustrations, I created user persona and storyboard. Through the user persona, I was able to understand what features and information I should add to Daily Havit mobile app to meet goals and also how I minimize pain points. The storyboard also helped me to see user journey of how a user try the Daily Havit mobile app and reach her goal by using the app. These helped me finalize main features, goals for the app, and build task and user flows.
User Persona & Storyboard
I conducted closed card sorting that shows how 10 participants categorize 25 cards to 7 categories. Overall participants had similar ideas on account, order, settings and contact us cards. A few of them showed me different categorizing ideas such as “Review your vitamin supplements” in “Browse Products”. It was easy to get to know how to build a sitemap based on the sorting results.
Card Sorting
I created a sitemap to present the overall structure of the application with navigation, contents, and features. I was able to see the structure and get a clear image of how the website would look in the design phase.
Sitemap
Task flow is a method to understand and visualize the most necessary actions that would need to be performed by a user to take a quiz, get recommendation, chat with a nutritionist, browse product, select a subscription plan, purchase and manage schedule for taking the user’s vitamin supplements. It gave me an idea of creating a user flow to provide a little bit more complex interactions which could be possible in using the app. After the task flow, I created a user flow to show how a user acts at each decision point. I learned how many screens I need to create to offer enough information to the user in order to make them understand Daily Havit’s services and purchasing process.
Task Flow & User Flow
Ideate
Sketches of a few design layouts of the app with required elements such as quiz, main navigation, icons, CTAs, and cards with images and texts. I was able to predict which layout would work well for good usability. It made me create low-fidelity wireframes in Figma.
Pen & Paper Wireframes
It is page layouts in greyscale that would be required for building high-fidelity wireframes. It helped me understand overall layouts before seeing the high-fidelity design and organize information hierarchy via visual.
Low-Fidelity Wireframes
For establishing Daily Havit’s new brand identity, I gathered visual ideas and created a mood board. It was a good way to find how I want to show and design the mobile application, it gave me a defined idea of brand identity and UI kit. I wanted to put calm, friendly, inspirational, and authentic aesthetics, I used serif and sans serif fonts and different tones of green colors for targeting users who want to keep healthy lifestyles and be more active. I took inspiration from lively and calming-look design pieces.
Brand Identity & UI Kit
High-fidelity wireframes of Daily Havit’s mobile app with brand identity and color palette, images and copies. Creating a prototype based on the brand styles made me feel what the actual prototype would look like. I was able to understand if the sitemap and the mockups I created were coherent.
High-Fidelity Wireframes
Prototype
I created a prototype with the high-fidelity wireframes. It showed all the possibilities that a potential user can make.
High-Fidelity Prototype
Usability Testing
I conducted a usability test for Daily Havit’s mobile app via Maze to understand potential user’ performances when they proceed with 4 tasks. It gave me a chance to see what they thought of my output, how they complete the given tasks and why they incomplete the tasks. I was able to analyze what worked well and what needed to be improved. It also helped me to iterate the high-fidelity wireframes based on findings from the user testing.
User Testing via Maze
After the user testing, I created an affinity map based on the testing results and users’ comments. It showed me that which part of the mockups worked well and which part made that users got confused. It also gave me a direction to improve design for better usability.
Affinity Map
Iterate
Based on the few suggestions from the users, I edited the high-fidelity wireframes by adding a separate link section on the chat with nutritionists screen since some users got confused with a random link and they needed to get more clear direction at the end of the chat session. Also, it was a minor change, I edited spacing between an icon and an indicator on the navigation bar to give more breathing room.
Improvements
Reflection
From researching to creating the final mockups, I was able to learn understanding what users need through the personalized vitamin supplement service and what they care about the most when they choose their vitamin supplements. Also, the processes gave me how to build an intuitive, straightforward, and usable product to meet both business’s and users’ goals.
What I learned…
Next Steps
- Add an advanced scheduling reminder feature that users can set different time and date to take vitamin supplements. It will give them flexibility on scheduling.
- Add an uploading a medical prescription feature to chat with nutritionists screen that users are able to get more detailed feedback on their health condition and recommended vitamin supplements from nutritionists.
- Further testing and iteration: I would like to experiment this app with elderly users if the vitamin supplement recommendation and chat with nutritionists features are understandable and encouraging for them.