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
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)
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.
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.
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.
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.
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.
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:
Needs:
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.
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.
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
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 order to 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.
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.
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.
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.
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.
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.
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.
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.
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
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:
Recommendations (priority high to low):
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.
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
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!
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.
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.
Copyright © 2016-2022 szanilee.com.
Website Design & Development by Szani Lee.