01.Research

Goal: To research the beauty industry and identify the demographics of BeautyShelf

Process: Market Research, Competitive Analysis, Provisional Personas, User Interviews

Research Plan

Beginning with comprehensive market research, I delved into understanding the nuances of the beauty industry and identifying key demographic characteristics.

I understood the necessity of conducting thorough research to determine if the product had genuine potential viability. Additionally, I aimed to uncover the specific user needs during this research phase, informing the features necessary for the app's development.

Before diving into research though, I put together a research plan document to outline my process and identify the research goals. Below I listed the main research goals that I needed to meet by the end of my research and the research questions that I planned to answer to during the study.

View Full Research Plan.

RESEARCH GOALS

To identify & define BeautyShelf’s target audience
To identify and analyze the competitors
To identify how people keep track of their beauty products
To uncover frustrations, motivations, needs and goals of users

A FEW RESEARCH QUESTIONS

Who are the potential users of BeautyShelf? What are their frustrations, needs and goals?
Who are the competitors? What are their strengths and weaknesses?
How do users organize their beauty product collections?
How do users keep track of their beauty products they have?
What kind of experiences do users have with beauty products?

Market Research

As part of my secondary research, I quickly gathered information about the beauty industry and the demographics of potential users for BeautyShelf. I looked into statistics and trends in the beauty sector and then focused on understanding consumer behaviors. Below are some key findings from this research.

STATISTICS & TRENDS (BEAUTY INDUSTRY)

Revenue in the Beauty & Personal Care market amounts to US $82,885 million in 2019
Average revenue / person in the market for Beauty & Personal Care amounts to US $251.86 in 2019
Rising trend of the use of natural ingredients in cosmetic products
“Simple & Clean” movement: products containing less ingredients or at least less of those could be perceived as harmful to humans or the environment

DEMOGRAPHICS

Younger consumers 17-29 are the most active beauty product consumers
Above the age 65, women also tend to purchase beauty products
Average income of consumers $50k - $75k or under who spend the most on beauty products
Majority of consumers are women and they lean towards niche beauty products as those brands settle for originality

CONSUMER BEHAVIOUR

64% of American families prioritize organic, natural and eco-friendly products when making buying decisions
Nearly 50% of consumers like the idea that a beauty product is personalised especially for them
25% of female Millennials who use beauty products get their information from beauty blogs
56% of GEN Xers and 41% of Baby Boomers prefer to shop online

WOMEN CONSUMERS

57% of women have purchased skincare products at Walmart of Target in the last 6 months
54% follows a beauty regimen
84% of female beauty consumers report having only basic or intermediate skills
82% of women believe wearing make-up makes them feel more self-confident

Competitive Analysis

When I checked out the competition, I found there weren't many beauty inventory products available, and the ones that existed had slightly different approaches. After analyzing their strengths and weaknesses, I saw an opportunity for BeautyShelf to excel by offering well-organized product lists, a modern user interface, and a personalized experience. This personalized touch could set BeautyShelf apart from other apps.

Provisional Personas

Based on the secondary research that I have completed, I created 3 provisional personas to define who the potential users are of BeautyShelf. These personas represent different groups of people with goals and frustrations. These personas gave me a starting point to focus on who I should approach and interview when I moved towards my primary research method, which was the in person interviews.

User Interviews

I knew that I needed to interview potential end-users to understand the biggest customer needs and determine the most specific needs of potential users that can create an excellent market opportunity.

View Interview Guide. I asked open ended questions about participants experiences with beauty products, their organizing, tracking and purchasing habits.

View Interview Notes

Interview Participants

Number of interviewees: 5
Age: 4 people between 21-28, 1 person 62
Criteria: Beauty lovers
Location: Arizona
Interview lenght: 10-15 minutes / person

02.Define

Goal: Synthesize research to define the target audience - and their needs, frustrations, goals

Process: Empathy Map, Persona, POV Statements & HMW Questions

Empathy Map

To streamline the synthesis of the extensive data gathered from the 5 interviews, I utilized one of my favorite tools, an empathy map. This helped me visualize the behaviors and attitudes of potential users more easily. By identifying patterns across the sticky notes representing data from each interviewee, I grouped similar ones into smaller sections. These three main groups provided valuable insights that guided the entire product design process. They became my go-to reference points whenever crucial feature or design decisions needed to be made.

Insights:

Users spend too much on high-end beauty products as they care about quality.
Users have difficulties remembering their thoughts about the items that they have tried.
Users prefer to purchase sustainable ethical beauty products.

Needs:

Users need to stay in their budget without giving up on quality.
Users need a way to track their detailed experiences with their beauty products.
Users need to be informed about which products are Vegan/Cruelty-free/Organic/Natural.

User Persona

Say Hi to Cholette! By combining the secondary and primary research findings, I created our persona whom I named Cholette. She is our fictional ideal user of BeautyShelf so her needs, goals, frustrations and motivations were kept in mind while making important design decisions. By relying on Cholette, I was able to design the app and features that best serve user needs.

POV Statements & HMW Questions

Once I knew WHO I am designing for, what the specific needs are of my target audience, I needed to define the core problems of my users in order to create a user-centered product. With the target audience defined, using the needs and insights, I wrote "Point of View" (POV) statements to define the core problems of users. Based on the POV statements, I could create the How Might We questions that helped me to start generating innovative ideas in the right direction to make the user experience delightful for Cholette.

03.Ideate

Goal: To generate ideas about the information architecture, app features and user flows

Process: Individual Brainstorming, Business & User Goals, Product Roadmap, Sitemap, Task Flow, User Flow

Individual Brainstorming

Once I have phrased the HMW questions, I had my starting point of brainstorming possible solutions to solve the core problems of users. Wrote each HMWs down and started to collect as many solutions I could think of. Then I took some extra time and explained in more detail what I thought of exactly. I did not really consider technical constraints at this point whether they would be easily applied to the app or not because I was planning to think about that during crafting my Product Roadmap document. View my list of ideas

Strategy: Business & User Goals + Product Roadmap

Before diving myself into designing the app, I focused on defining the shared goals of BeautyShelf and users to help achieve both business stated and user goals. I identified the shared goals of BeautyShelf and the users in orderto make better design decisions.

Then I laid out a Product Roadmap document, where I prioritized the HMWs and selected features from my brainstorming document that could be best implemented into the app and best solves the problems of Cholette by keeping in mind the shared goals.

Information Architecture: Sitemap

Next, I created the sitemap of the application to showcase the information architecture by indicating features, parent screens and child screens with different colors. The sitemap helps designers and developers understand how screens/features are connected to each other.

User Flow

To visualize how Cholette (our persona) would navigate through the app, I created a User Flow diagram with two scenarios illustrating her journey. The first scenario showcases how the user would add her own product to the application's inventory by utilizing the camera and scanning the barcode of the product in. The second scenario focuses on her need of finding harfmul chemicals-free beauty products in the database that she can add to her BeautyShelf because she wishes to purchase it soon. This helps me understood which screens should be designed in order to have a delightful experience.

Task Flow

Then I created a few Task flows to map out the journey for multiple single key tasks which are going to be completed a very similar way by the majority of users. These additional singular task flows helped me better understand what steps users take in order to achieve their goals.

04.Design

Goal: To design mid-fidelity wireframes and get ready for usability testing

Process: Low-fidelity Sketches, Mid-fidelity Wireframes

Low-fidelity Sketches

Finally, I have arrived to the actual design stage when I started to think about how the app would look like. Before going digital, I quickly sketched out on paper a few main screens with elements and features that I was planning to add to the mid-fidelity wireframes. Being neat with my design was important as I was planning on using these wireframes for my mid-fi prototype that potential users were to interact with.

Mid-fidelity wireframes

Based on the low-fidelity sketches, I created mid-fidelity wireframes in Figma, which I could later export to MarvelApp to build my mid-fidelity prototype. I have made quite a lot of changes compared to the sketches as I realized that those layout ideas of my sketches should be simplified in order to avoid confusion in this complex application.

05.Mid-Fidelity Prototype

Goal: To build an interactive prototype that can be tested by users

Process: Mid-fidelity Prototype in MarvelApp

Mid-Fidelity App Prototype

To save me time and to stay cost-efficient, I decided to run usability testings on the mid-fidelity wireframes before designing the user interface of the app. This allowed me to figure out what is needed to be improved on the current design so I could make changes to it in the beginning stages of the design phase. To be able to run testings, I linked my mid-fidelity wireframes together by using hotspots in MarvelApp and the limited functionality prototype was ready to be tested with a few users.

06.Usability Testing + Iteration

Goal: To test how well the prototype solve the problems, improve usability based on results

Process: Usability Test on Mid-fidelity prototype, Affinity Map, Revisions

Usability Test

Before I went outside and recruited a few women to participate in my moderated in-person usability testing, I put together a Test Plan document to guide me during the usability test. My ideal participants whom I was looking for were women aged between 18-40 who have love for beauty products.

Test Objectives

Determine if participants can complete the given tasks
Identify any pain points and confusion of participants
Identify possible changes that might improve user performance

User Tasks

Add your new balm - that you are currently using - to the right shelf by scanning the barcode in.
Update your personal lifestyle preference to vegan and organic.
Find a vegan & organic lipstick that you can happily add to your Wishlist as you really want to try it soon.
Check which other products you are planning to try (in the near or far future).

Results

After reviewing the videos that I recorded of the participants while completing the given tasks, I put together a document of how the participants completed each tasks, what I observed and what they said or recommended regarding the prototype.
View Test Notes

Affinity Map

With the help of the test finding notes that I transcribed from the recordings, I could create the affinity map to synthesize the findings to find out what could be improved on the prototype. I took notes from the test findings and grouped together the ones that were similar then tried to find patterns across the observations and comments, which is how I got my insights. Based on these insights recommendations were made to improve usability, which were prioratized from high to low.

Insights:

Users misread ‘Add a Shelf’, ‘Add a List’ as ‘Add TO’ shelf/list so they got confused.
Users correctly assumed that by setting the lifestyle preferences they would be suggested products based on that but they needed me to reassure them that they are correct about it.
Users added a new product to the app by navigating all the way to a selected shelf/list because they don’t expect at first that they could add product by the ‘add icon’ in the bottom bar.

Recommendations (priority high to low):

Rephrase actions. Instead of ADD, use CREATE word so users won’t misread them
Add ‘Add Product’ text under ‘add icon’ in bottom bar to let users know what they can do upon tapping on it and to decrease the number of steps that users have to take in order to add their own product to a shelf/list.
Add an info/question mark icon in the lifestyle preference card to remind users of the purpose of the feature when they tap on it if they (accidentally) skipped onboarding upon signing up.

Iteration

After I synthesized the results of the usability testing and I identified what could be improved on the design, based on the recommendations from the affinity map, I made changes on the wireframes and prototype to improve user experience.

UI Kit & Logo

Before jumping into the UI design of the app, I had to estabilish the branding of the business first. I identified the brand attributes of BeautyShelf first and then designed a logo for it. Brand adjectives: Fun, Lovely, Light, Lively, Modern. The logo creation process & style tile you can View Here

07.UI Design

Goal: To create high-fidelity wireframes + prototype

Process: High-fidelity wireframes, InVision prototype

High-fidelity wireframes

After making improvements to the mid-fidelity wireframes, I moved forward and designed the high-fidelity wireframes in Figma, which basically looks and acts like the final product. This way the app gets ready for hand-off to developers in order to create the final app!

High-fidelity prototype

Feel free to interact with the limited-functionality high-fidelity prototype below that I built in InVision! You can also have an access to the prorotype by this link.

Reflection

This project put pressure on me in the beginning as I haven't designed a mobile app from start to finish on my own - this is my first one - however I knew that it was going to be fun for me as I am myself a beauty enthusiast. Designing such a complex mobile app was challenging but by relying on my secondary research findings and in-person interview insights, I was able to move from one step to another easily as I had a clear understanding about what potential target users need when it comes to tracking beauty products.

Next Steps

Usability testings on high-fidelity prototype and make iterations on the design.
Keep track of metrics to see the engagement of main features.
Prepare for hand-off to developers.

BeautyShelf

Sorting Your Products, One Shelf at a Time! Featured in "The Best Fashion and Beauty App Designs" by DesignRush

About the project

Background

Process