The Problem:

The makeup industry in the United States alone is a massive market, without even counting the global makeup industry. Millions of Americans, of every gender and sexual identity, consider makeup a part of their day-to-day lives. However, a hole in this market exists; There isn’t a widely accepted, mobile application specifically dedicated to meeting these consumer’s makeup-related needs. 

For a makeup user to access their favorite makeup tutorials and products they must go to multiple different resources located all across the internet.

Top Goal:

I needed to condense product information, makeup tutorials, and a virtual makeup  try-on feature within one mobile application for users to access conveniently. 

My Role And What I Did:

I was in charge of successfully executing this project from start to finish, making me responsible for:

• Market Research and Competitor Analysis

• User Research

• Solution Ideation

• Information Architecture

• Wireframing

• Product Prototyping

• User Testing

Studying The Competition + Researching The Users

I began by diving into some brief Market research (getting to know the American makeup industry better). Next, using Jakob Nielsen's 10 General Principles for Interaction Design, I conducted a Heuristic Evaluation of two apps and one website that were also focused on the cosmetics community. This Heuristic Evaluation was done to gain valuable knowledge from the usability successes and short-comings of these existing resources within the community I was seeking to design for. Beginning to feel as though I had some useful questions for potential users, I found participants for user interviews.

My goal was to discover how these individuals used makeup in their daily lives, what purpose they felt it served for them, and how their use of it fit into their routines and schedules.

After interviewing seven individuals, and reviewing their input, some patterns emerged.

Two personas seemed justifiable, due to the fact that I had discovered two different motivations among my interviewees.

 Primary User:

This group of users’ motivation was self-expression. This user became known as the Expressive User.  This group is more likely to be open to a wide variety of experimentation with both their products, as well as their aesthetic. While they appreciate it when their makeup is affordable, ethical and conveniently fits into their routine, these are not their main concerns and motivations. These individuals are much more concerned with feeling as though they understand and are part of popular aesthetic trends, and are able to experiment and self-express.

Secondary User:

The other group was motivated by finding products and looks that would fit comfortably into their lifestyle. This user was called the Holistic User. Similar to the Expressive user, the Holistic user is not totally uninterested in creative expression, but it’s not what their main priority is. When this user purchases a product, they are more concerned with the product’s price, ingredients,  ethical production process, and effect on skin health. 

Something both user groups adamantly expressed was that they wanted a way to test out their products virtually, and they hadn’t yet found a way to do this that worked well for them. They also both expressed frustration with the difficulties they experienced while trying to follow along with makeup tutorials. 

After I had talked to my users, I began the process of refining a solution to the main pain-points that had been expressed to me.

 The goal here was to utilize various ideation methods and processes to help me begin designing a Minimum Viable Product (MVP). I began by isolating a few key pain-points highlighted from my interviews, and distilling them into “How Might We” questions. 

Next, solution ideations were based on these “How Might We” questions. From my solution ideation process, I determined the ‘do or die’ features that my prototypes would need to include, and established that my crucial “Red Route” functions were: Try On, Tutorials, and Products.

Sketching Red Routes and Initial User Testing

I determined my Red Routes by first, creating a Sitemap to determine all the features I would want my app to ultimately have. Next I compared all features to my user interviews, User Personas, and HMW questions to determine three routes that were going to be essential to the basic use and function of this app. From here I roughed out a User Flow of my determined Red Routes. 

I then created sketches of my Red Routes, and conducted guerilla user testing on these sketches.

I reached out to 5 potential users randomly and asked them to test out, and give me their thoughts on my initial sketches. Features that multiple users struggled with were what I focused on next. I refined these sketches in my official wireframes and then created a final wireflow, allowing me to even more concretely determined the progression from screen to screen, as well as the direction for the app’s visual design.

User Interface Design

After establishing how information should initially be organized and creating wireframes based on user tests, it was time to determine visual elements. 

A mood board and style guide were created to establish a standard that the visual designs of the app would follow. These design elements were chosen  to give a sense of dynamic ‘femininity.’

 After establishing an aesthetic direction that I wanted the app to follow, I began creating a first version prototype. 

Color, typeface, font size, and item placement were carefully considered, aligned with Material Design standards, and edited on each screen. The goal was to maintain a dynamic, energetically feminine aesthetic. There was a large amount of necessary information on each screen which presented a challenge when trying to present it in a clean and legible format.  

Testing the Prototype

After designing screens for three Red Routes using Adobe XD, the Red Routes were used to create a prototype with InVision. This first round of testing was conducted with four users. Their feedback was collected, assessed, and compiled into categories based on whether an issue was critical, major, minor, or normal.  For an issue to reach critical status, two or more users had to express it as a pain point. 

Pain points included issues like, recognizability of icons, difficulty scanning information on over-full Try On screens, and problems understanding how specific titles were phrased. Based on findings from user testing, changes were implemented, and revised Red Routes were used in a second round of user testing with 5 users. 

During the second round of user testing that was conducted on the revised Red Routes, the 5 new users responded well to the designs overall.  Edits to font size, color contrasts, copywriting, icon placements and designs, had all helped the users have a smoother interaction with the prototype.