User Flow
Teddy Laguerre
UX designer
Bella Beauty Vegan
Personalized Beauty.
Overview
Overview (Mission)
Vegan Beauty & Wellness products are curated and handmade by Samantha.
This project was created because the client, Bèlla Beauty Vegan, is looking to expand their brand's reach and need an application where customers can view, purchase and ask questions about their products. They want the focus of the site to be on quality images so users can browse the best skincare or haircare products for them.
Client: Samantha Michel
Time: 4 Weeks
Role : Sole UX/UI designer, Style Guide, Deliverables, Wireframes, proto typing
Tools: Figma
Main Challenge
Bèlla Beauty Vegan is a very intentional brand focused on internal and external wellness and beauty. The main problem was that there wasn't a place other than Samantha's website for customers to purchase her products. Samantha also expressed wanting to create a website from scratch that would be easily accessible to her customers.
Solution
With the ideas Samantha presented to me I was able to create a nice modern site that focused on imagery and the products. The objective was to create a clean and user friendly online shopping experience.
Key Insight
To better understand the goals and expectations, I focused on what Bella Beauty was as a brand, what Samantha would like their app to convey, who are some of her competitors in their market, the pros, and cons of her competitors, and what kind of user experience she wanted to offer her customers. We were able to sit down and create the following information below:
Brand Personality
Simple, Cohesive, Intentional, Innovative, Stylish. I want the personality of the brand to be that of a person who loves the simple yet effective products that work and are what they say they are. Simple, effective and truthful products.
Site Keywords
Simple, Clean, Modern.
For Shoppers
An easy to navigate, simplified, and fast checkout experience. I don't want too many words on the app other than the necessary words for the shoppers to be able to navigate.
Pages
HOME, COLLECTION, ABOUT US, CART, CONTACT US
UI Design
Site Map
After speaking with Samantha I was able to get a better idea of what she wanted in her app, so I created my sitemap with the hopes that I could provide a simple platform where users will be able to locate products and purchase with ease. I wanted to create an experience for users that was not too overwhelming and easy to understand.
Style Guide
I created a simple style guide to outline colors, typography, and iconography.
User Flow
My user flows helped me decide the layout of each of my screens for each user task. I chose routes that were essential for users to easily create an account and easily purchase a product.
Low Fi Homepage
Low Fi Wireframes
After creating my sketches I created low-fi wireframes for the app. Creating wireframes helped map out the overall layout of the app. I utilized Figma where I was able to easily implement changes to the design.
Hi Fi Home Page
High FI
The main objective was to create a simple experience for users who are interested in buying beauty products. The idea is that the user will be able to quickly locate the product they're looking for and easy purchase once they have found it..
Testing
User Testing
User testing is an essential process with any app. The user testing helps provide great feedback and insight. This test was conducted to target issues with usability in the Bella Beauty Vegan prototype. Usability testing aims to track issues and make sure the app runs smoothly. This Test was conducted remotely over zoom with 5 different tests. The participants are all people who are familiar with purchasing products online.
Prototype
I used zoom to conduct user testing for my prototype. Test plans were created for the three user flows listed above.
Introduction
You are looking to buy beauty care products. You will use the Bella Beauty app to follow the following user flows. Please think out loud while you navigate through the prompts to let me understand what you are thinking and experiencing.
Task
Task number one is to sign up for the app and log in. We’re going to pretend that you already have a username and password.
Now the next task is to explore the home page in the app. What are some things you see or jump out at you? We won't have as many options on the prototype that are clickable.
Next, I want you to explore purchasing beard butter. Return to the home screen and click the beard button. You’ll then be brought to all the beard products for Bella Beauty Vegan. I want you to click the beard butter and continue to purchase the product.
For the last task, please explore the entire app and play with all of the buttons. Please let me know how the overall app feels? Are the button icons recognizable? Is the flow from screen to screen easy to follow? The last thing you will do is go to the profile page and sign out.
Questions
What frustrated you about this app?
What features, and elements stood out as enjoyable and helpful while using this app.
Is there anything you would like to add at this time? Thank you for your time.
User Testing Results
I launched these tests with 5 different individuals. The test was conducted and notes were taken to show concerns, users' comments, and complaints. I Then ranked the success of each task by identifying pain points in the design. I ranked the problems from high priority to low priority.
Conclusion
This project was an exciting dsign I was able to create for Samantha. I enjoyed collaborating with Samanta to bring her vision to life in this app. Overall Samantha was happy with the design and how the app turned out.