Bare It

SKINCARE iOS APP DESIGN

Research

Market Research  | Competitive Analysis  | User Interviews | Empathy Map

Market Research

I started out by conducting market research to identify demographics of skincare users and better understand the skincare industry.

Key Findings

• Social networks and forums are educating and influencing users in making decisions about skincare

• Amazon started its own in-house skincare line - targeting users based off industry statistics

• Users want to be told the products are free of parabens and other chemicals

• Users are looking for buzz words such as “Retinol” or “Hydroiodic acid”

Competitive Analysis

After researching many different apps, I decided to focus on these six competitors to conduct a competitive analysis because they offered a variety of different ways for users to find skin care products, evaluate their skin or current skincare methods, and/or better understand products ingredients as well as overall product usefulness.

User Interviews

Once I understood the industry and competition, I needed to conduct user interviews in order to build empathy for the users. From my market research, I knew I would be targeting women ages 18-35. I interviewed 5 participants (all female, ages 25-35) who use skin care product daily to better understand how they shop for skincare, what they look for in skincare products, their skincare routine, how often they try new products and what they knew about skin care ingredients.

Empathy Map

After gathering feedback from my user interviews, I created an empathy map to synthesize my findings, uncover insights, and define user needs. I found that users knew how their skin reacted to products and had skin concerns they were struggling with. They explained how they wanted natural and chemical free skincare products but often had difficulty finding products that worked well and identifying if products were good or bad for their skin.

Define

Persona | POV Statements & HMW Questions

Persona

Taking the user insights and needs synthesized from the empathy map, I created this persona Charlotte. Using the findings from my research to build a realistic representation of the user helps me build empathy for the user and make design decisions with their needs, motivations, goals, & frustrations in mind.

POV Statement & HMW Questions

After defining Charlotte as the target user, I created point-of-view statements based on the user insights and needs. From these statements, I created how might we questions to outline the problem in the form of a question in order to easily ideate solutions during brainstorm.

Ideate

Brainstorm | Project Goals | Product Roadmap | Site Map | User Flow

Brainstorm

To ideate solutions that solve the problems outlined with the how might we questions, I conducted a rapid brainstorm focusing on writing out any and all solutions without limitations.

Project Goals

Next I created a venn diagram in order to uncover mutual goals between the user and the business. These mutual goals help me make decisions on adding features to the app that will fit within the mutual goals.

Product Roadmap

Using the how might we questions, I outlined features that would solve each of Charlotte’s needs. I selected features based on feasibility, desirability, and impact. The roadmap made it easier to focus on key features for each of Charlotte’s needs, avoiding designing too many features at once.

Site Map

To visualize the app structure and organization of information, I create a site map highlighting the main navigation and pages. I studied design patterns in existing skincare apps and referred to my persona Charlotte, keeping her needs in mind.

User Flow

After I had an understanding of the site structure, I created a user flow to better understand decisions the user would make to flow through the site and identify all paths the user could take to complete each task.

Design

Sketches | Mid-Fidelity Wireframes

Low-Fidelity Wireframe Sketches

I created low-fidelity wireframe sketches of key screens I identified from the user flow. Thinking through layout, interaction, and flow of these screens by sketching helped save time as I moved into creating mid-fidelity wireframes.

Mid-Fidelity Wireframes

From the sketches, I was able to gain valuable feedback from peers and mentor about the app layout and UI elements. While constructing the wireframes in Sketch, I researched Apple's human interface guidelines in order to make design decisions that fit on an IOS device.

Prototype

Mid-Fidelity Mobile Prototype

Mid-Fidelity Mobile Prototype

Before creating high-fidelity wireframes, I wanted to test the mid-fidelity design in order to get feedback on the app’s usability.

Test & Refine

Testing | Affinity Map | Brand Identity | UI Kit | Revisions

Usability Testing

Affinity Map

To synthesize my observations from usability testing, I created an affinity map in order to identify patterns from my observations. I drew three insights from these patterns which informed the recommendations for the next iteration of the design.

Brand Identity

Before moving to high-fidelity wireframes, I needed to develop Bare It’s brand. I created a mood board focusing on their attributes; Inviting | Trustworthy | Natural | Honest | Real | Approachable.

To create the logo, I started sketching out ideas of a wordmark, getting inspiration from the mood board before digitizing. I then created this style tile below consisting of color palette, typography, and imagery to serve as the foundation for the app’s interface design.

UI Kit

Now that the brand is developed I can begin creating the high fidelity wireframes and revisions. During this process, I created a UI Kit to keep all the UI elements into one document for future reference when designing.

High-Fidelity Revisions

I applied the branding direction established in the style tile and incorporated the recommendations from the affinity map into the high-fidelity design. Below I’ve highlighted the key revisions based off the affinity map as well as the high-fidelity prototype.

Final Prototype