beauti
research findings
Our research consisted of both competitive analysis and interviews of makeup users with various backgrounds and levels of experience. We asked interviewees about their use of makeup applications, their level of comfort with finding makeup products, and their experience in-store versus online shopping.
We interviewed 4 people ranging from 18 to 22 and found our users had a wide range of experience with makeup, as well as makeup applications they’ve used. Some users felt there wasn’t really a makeup community available, and when going in stores, they felt unwelcome due to the employees. Additionally, we conducted competitive analysis for 5 different existing applications and platforms that makeup users could utilize. While some of the applications gave the availability to shop without going in store, the AR in the apps made it hard for some users to test makeup virtually based on their different skin tones.
personas
From our user interviews and competitive analysis, we formed personas of our target demographic. We used these personas to identify our users and determine what they might need from our product. We wanted to ensure we included those with heavy exposure to makeup, as well as those who aren’t as comfortable using it. We also wanted to incorporate their likelihood of buying in-store makeup verses online to see their pain points. From these personas, we were able to create a user journey map and really focus on the key aspects of their experience that we could implement in our design
user journey map
Based on the information we gathered from our user interviews and the personas we created, we built our user journey map to define pain points and places where the user would be most affected throughout the experience.
design requirements
Based on our user journey map, we saw users lost confidence in stores when confronted by an employee. With that we wanted to design a solution that would create a positive experience. We worked towards creating a diverse experience for the user, as well as giving the users a community based platform to interact with. Using data from our interviews, creating our personas, and user journey map, we created a list of requirements that would best fit the users needs.
-
Ensure users are able to find products within their desired price range.
-
Ensure products and reviews are for a diverse audience and to be inclusive of all skin types and conditions.
-
Determine user's skin type and find products that fit user accordingly.
-
Create a platform that encourages collaboration between users. Enable ease of finding and sharing product information and reviews.
-
Give users the ability to build a profile to ensure their feed has users similar to their skin type and preferences.
​
These design requirements functioned as a base for our features we would incorporate in our low-fidelity prototypes.
storyboards
By creating storyboards, we were each able to form a path the user could take when reaching their final destination. Through this, we were able to evaluate the users experience and create a product that would best fit their needs. Our individual storyboards helped layout a baseline for where we wanted our product to go and what to focus on.
information architecture
Our information architecture helped us lay out key paths the user could take and determine what the general layout of our application could look like. This helped solidify the ways our app would be connected through the different pages. Our application gives the option to take skin type and skin tone quizzes if the user desires, but also gives them the option to opt out of the service. Our feed page was a place to easily connect to other pages based on what a user could be looking for.
paper prototype
Following our information architecture, we were able to focus on sketching key paths the user would follow. Our three key paths included a user creating a profile, a user connecting with other users like them in the app, and a user taking the skin tone or skin type quiz. Our paper prototypes gave us valuable feedback on whether our sketches were clear or if the paths were straight forward. Based on the feedback we received and group discussion , the paper prototype gave us the ability to redesign and refocus our decisions leading to our usability testing.
Task 1: User creates a profile that helps filter products while shopping for a new foundation.
In this task, the user wants to find a new foundation soley based off their profile. All the products that are recommended cater to the users wants and needs identified in the creation of their profile.
Task 2: User can connect and chat with other users like them to discuss products and build a sense of community.
In this task, the user can go to another user’s profile and start a chat with them. They can also form a connection with the user, and see various updates through their notifications.
Task 3: User can take quizzes to find skin tone or skin type.
In this task, it will give the user the ability to find recommended products that fit their skin.
usability testing
After we completed our paper prototypes, we tested it with potential users to see how smoothly they could follow key paths and target where we might be able to improve. This was a great way to test our low-fidelity prototypes to see how it would function in the real world. Through the feedback and findings we earned from our users, we were able to implement the changes in our wireframes.
​
our results:
-
Have a clear design - do not overcomplicate features for the user or overload them with information.
-
Think about the context of the application and where and when it will be used.
-
Make information accessible and easy to understand, so users of varying makeup experience can enjoy it.
annotated wireframes
After receiving the feedback from our paper prototypes, we took them into consideration and created our annotated wireframes. These wireframes would take the user through key paths and flows they would experience when using the actual app. This was a great way for us to focus on the clarity of the screens as well helping us solidify which order our screens would go in. After receiving critiques on our wireframes in class, we used these comments to further our design which led to our high fidelity mockups. Some buttons and icons were not intuitive on the meaning to the user, so we had to change a few of our icons. We had to make our wireframes look less busy so the user would not be overwhelmed when trying to complete their goals.
*one key path is shown above
high fidelity mockups
skin tone quiz page
Features include: Video to Explain Instructions, Completion Bar, Camera for Skin Calibration
-We devised a skin tone quiz to acquire the users skin tone. Through this page the user is instructed to take various photos to find the best products that match their skin.With simple instructions and a short video, the user is able to navigate this task with simplicity and ease.
-A completion bar is displayed as it shows the user how far into the quiz they are. With eight steps in the quiz, the completion bar gives users the assurance of a quick process to find them the best products.
skin tone results page
Features include: Skin Tone Results, Tags, Suggested Users, Suggested Products
-Through this page users are able to see their skin tone results from the quiz. From the suggested skin tone, the user is presented with products and users who may be similar based on the quiz results.
-Users are able to decide whether or not they are done with the skin tone calibration or if they choose to do so click finish, which takes them to the filtered shopping portion of the app.
profile page
Features include: Tags, Recent Activity, Written Reviews, Associated Groups, About, Connect/Chat With Other User
-We devised a personalized profile page to help encourage similar users to connect with others in the makeup community. Surrounding the profile picture in the upper portion of the screen, we displayed makeup tags and ways to connect with the user either through the app or other available forms of social media.
-Users can also check out other activity done through the profile such as reviews, joined groups, and created “looks”. This allows our users to both take in content and contribute their own.
product page
Features include: Tags, Price, Overview (Description, Reviews, Ingredients, Pictures, Buy)
​
-Within our product page, we wanted to go beyond pricing and wanted to include a more in depth overview of the product so the user can see what they are (looking at/ buying)
- By including tags and ingredients, we were able to ensure the user could find products that matched their preferences, as well as see what ingredients are included in the product they are viewing, which makes it easier to distinguish if products would or would not react with their skin
In creating our final design, we wanted to ensure the app looked engaging, but we didn’t want to follow the same design of most makeup apps by using pink. We went with purple because of it being a more neutral color, and we wanted our app to have an “elegant” and “royal” feeling to it. Thus we opted for a cursive text logo rather than a typewriter font. We refrained from using too much “feminine” makeup imagery or icons as it may be too stereotypical for our diverse target audience.
reflection
This project was an incredible experience as a team, we were able to grow our design skills and put all our strengths forth as a team. Getting feedback from our peers and utilizing our user interviews gave us the ability to use those insights to work towards creating a final product that for the users needs as well as the goals of our team. While working with diverse teammates gave us the opportunity to work towards a final product that fit the goal of our product, we also had difficulties focusing on which ideas to go forward with in our project. Our team all thought of strong and important features within the application to incorporate, but we needed to ensure that these features would be applicable to all users and fit their needs properly. Bridging off that, being able to choose which feature we would incorporate was also a place of difficulty for us. As we began creating our product, we had many ideas of what features to incorporate in the app, as well as if we should expand outside from this app and work on a physical prototype. While there were many great ideas created and features we wanted to add, we had to make sure these features were feasible, and that it would fit the user’s need with ease.
The most surprising thing about the project was how our initial idea of the project and features changed compared to the end result. After getting feedback from our classmates, instructor and user testers, we found that they all had different understandings of the purpose of our app, and we had to change it to meet our target audience’s needs and make our purpose of the app clearer.
Our team was really able to come together for this project. While we all initially had different ideas on what to incorporate in the app, we were able to work together and use the insights into creating a product that best fit the needs of our users. We worked by distributing the (work) among our group in order to make the assignments more feasible. We tried to incorporate the strengths of everyone in our group when delegating specific tasks. We would also meetup and discuss what someone would specifically work on or if there were any critiques we should incorporate within our product. This made it possible for our team to be on the same page, and work towards creating a product with the feedback in our mind as well.
This project was only a quarter long, however if we had more time, we would have done some things differently. We would have extended the user-research phase to try to get more information on what makeup apps or social network makeup users are currently using and how they are being used. We would also make interactive prototypes and test them on users to see what features would actually be used, and what features would be neglected.
One of our ideas we didn’t flesh out due to time constraints was the idea of a physical prototype. We wanted to create an in-store device that would match the user’s skin tone and allow them to find products fit for them. However this would involve designing specifically for a store space, and doing more research on the in-store makeup shopping experience.