BeautyShelf

    End-to-end mobile app design

    My Role: UX/UI Designer: UX Research, Information Architecture, Visual Design, Interaction Design, Usability Testing

    About: BeautyShelf, beauty inventory app

    Team: Self-directed (with expert mentor support and group crit feedbacks)

    Prototype: View prototype in Invison

    Time: 4 weeks, August - September

    About the project

    Background

    BeautyShelf is an app for makeup & skincare lovers that will help users to keep an inventory of their beauty products, to keep track of their products they have purchased, what they wish to purchase next, and also everything they have tried and loved so far. This app also helps users keep a detailed information about the users’ beauty products (name, brand, color, size, price etc)

    The Challenge

    • To give a user-centric approach to their app
    • Design the mobile app and estabilish BeautyShelf’s brand
    • BeautyShelf wants to utilize the camera to register beauty products & keep track of all products users have tried, want etc

    Process

    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

    I started the project with a thorough research in order to design a beauty inventory app with features and flows that make it delightful for people to use. 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 my secondary research method, I conducted a quick market research first to gather information about the beauty industry and to identify demographics characteristics. I started to read about statistics and trends regarding the beauty industry itself and after I have identified the demographic characteristics of potential target users of BeautyShelf, I focused on collecting data about consumer behaviours. Some of the key findings are listed below.

    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 it comes about competitors, there aren't many beauty inventory apps in the market as of today (2019 September). I analyzed 2 beauty inventory apps and 2 general inventory apps that can be used to track beauty products as well and listed out what strong features they have and identified the ones that could be improved within the app. I was able to understand how I can distinguish our product from the competitors.

    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

    Before I went out to interview people based on the provisional personas to empathize with users, I created an interview guide that helped me during the actual interviews. 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

    I made sure to record each participants during the interviews (with their permissions) so later when I was ready to synthesize the information that I have collected, I could review the recordings. I started to group data to be able to identify the user needs by looking for patterns across the sticky notes that I placed on my empathy map. I organized the observations into 6 main groups and by grouping similar answers further, I could successfully end up with valuable insights. Based on the insights, I phrased the user needs that I focused on when was designing our user-centric mobile app.

    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 crafted 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

    With the target audience defined, using the needs and insights, I crafted "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

    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-effective, 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.

Copyright © 2016-2022 szanilee.com.
Website Design & Development by Szani Lee.