HONEST BEAUTY-

A UX case study looking into how we might help beauty product consumers better connect with the ingredients in the products they are purchasing.

OVERVIEW

I love beauty products, I love pretty packaging, and all things cosmetic. My aggravation started when I, a person with extremely sensitive skin, purchased a product labeled as ‘organic’, but it was not. The product was actually full of some pretty harmful chemicals that sent my skin into a downward spiral. Having bad skin is something that makes me unhappy so the fact that a product did that to me was frustrating. I knew I could not have been the only person who had these issues, but after some research I discovered the beauty industry has some pretty alarming issues within it beyond bad ingredients. Many beauty products on the market lack transparency in the ingredients they use, practice false advertising tactics, produce mass amounts of waste, and are unethically produced. I slowly realized that a couple pimples on my face were a small blip on a big scale of the implications of the beauty industry, but it got me thinking...

DESIGN CHALLENGE & CONSTRAINTS

PROJECT TIMELINE: 12 WEEKS

ME: A NEW DESIGNER

THE TEAM: JUST ME!

RESEARCH: EXPLORATION

The first thing I did was ask myself, “what are the mobile tools out there that are currently helping consumers shop for beauty products in a more mindful sense?”

RESEARCH: USERS

I needed to validate if there were others who were concerned about the same issues in the beauty industry as I was, who may be interested in a tool that could help them assess the products they were buying. I began by narrowing down a grouping of questions that I would want to ask my participants… but who were my participants? I decided since this project was close to my heart, to ask people within my same demographic. I reached out to 5 women ages 19-32 to see if there was even a need for something like this in the market.

THEME EXTRACTING

From my interviews I extracted the pain points, motivations, and behaviours of my users in order to narrow down the key needs and wants of my target user.

INSIGHTS

1. Users care most about the ingredients in their products and less about the environment

2. Users want a quick way to understand ingredients

3. Users want product recommendations

CORE EPIC

From my interviews I developed around 50 user stories, where I found that my users were mainly concerned with learning more and understanding the ingredients in the products they were buying

HOW MIGHT WE...

After extracting the themes from my user interviews, I aligned them with the different patterns I discovered in my initial app exploration in order to develop a core how might we statement to shape my solution around.

'How might we assist beauty product consumers within the purchasing process make more informed choices about the products they are buying?'

PERSONA DEVELOPMENT

After conducting my initial user interviews I gathered the data I discovered and aligned it with the different demographics and personalities of the people I spoke too. This led me to create Jana, she is in her mid 20’s, she is moderately environmentally conscious, she is on trend in fashion and cares about her appearance. She is most concerned about products that are testing on animals, and wants an easy quicker way to understand the products she is currently, using as well as the products she plans to purchase.

JANA'S EXPERIENCE

After developing Jana I started to think about what her experience would look like in terms of how she would go about using my product. I mapped out her experience, she starts off getting ready to go on a date later that day, she notices a breakout, she goes to her local drugstore and purchases a few natural products to help her fight the breakouts. She ends up breaking out even worst from the products and is very upset and cancels her date. She wishes she would have had a way to verify the ingredients in the products she purchased.

JANA'S FLOW

From Jana’s experience I created a flow for her in order base my sketches on a particular task Jana would go through when using my product. I decided to have her go through a quiz process in order to identify a product package that would be best suited for her needs.

SKETCHES

I did some initial sketching in order to plan out how I wanted my elements to be laid out. I began exploring onboarding, and the home screen and the different ways that I could show products.

UI INSPIRATION

I quickly realized it would be needed to create a mood board of UI inspiration. As a new designer it is key to understand the makings of successful app’s and UI patterns, so by mood boarding and pulling inspiration from popular beauty apps I was able to nail down key elements in my design.

SKETCHES

I followed my task flow diagram in order to create a sketched iteration of what this flow would look like when digitalized. The rough version gave me a mappng for what my digital wireframes would look like.

IDEATION

After sketching I took my task flow and created some initial digital mockups of how I would like the product to look and feel. Once I had a functioning prototype I conducted a round of user testing, I took the insights from user testing and created a section version, and tested again on a sample, and continued to repeat the process. Some key insights that influenced some of my biggest design decisions when creating Honest Beauty, were:

ITERATION- LO FIDELITY SCREENS: USER TESTING

1. Users needed an on boarding process in order to help them understand where they were in the flow

2. Users did not like the iconography used, felt it made the app look ‘ cheesy

3. Users wanted the quiz portion of the flow separated because they felt the scroll option was tiring

SKETCHES

After a few rounds of user testing, my user flow began to evolve so I referenced my initial task flow, and UI mood board in order to create a more solid frame work of wireframes for my next round of iterations. These sketches took into account a bit more detail as I was ready to begin injecting colour after I had finalized this iteration of the flow.

COLOUR INJECTION: HI FIDELITY

Colour injection posed a large strain for me as I was overly ambious at first. I began by creating a mood board to narrow down colour and texture inspiration that would help guide my design decisions. I sorted my mood board based on colours that blended well with eachother, and began pulling samples from different pallets which I liked the most, and then attempting to inject them into my designs.

The large range of colours, and textures caused a slight dilemma in terms of discovering my brand identity. So, I decided to follow my process as a UX designer, and user test again but this time with colour. I created 30 different samples of the home screen, and showed a sample of users and polled which design was best received and decided to stick within that colour pallet.

COLOUR

After user testing my designs I found that the pinks and purples were most well received with my target audience. I sampled the section in my mood board with those colours and textures and began designing based on this sample.

ITERATION-HI FIDELITY SCREENS

I created a few onboarding screens with a chosen colour pallet and user tested with a different group of people in order to gather further findings on how this colour pallet was received. It ultimately tested well so I went with this as my semi-final design (I say semi, because no design is ever final or perfect).

HONEST BEAUTY: UI LIBRARY

Once I developed my colour pallet, and finalized my font choices, and icons I created a UI library in order to maintain design consistency throughout my app.

BRAND CONCEPTION

I started brand brain storming by what Honest Beauty meant to Jana, how would she describe us?

Honest Beauty is….

Casual & Girly

Feminine & Classy

Clean, clear and simple

Not overly complicated

Organized rather than complex

Key Words that Honest Beauty lives by

Fresh

Clean

Transparent

Environmental

Easy

Simple

Fun

Airy

Light

Young

Feminie

WATERMARK IDEATION

In order to establish a watermark I played with a variety of different fonts and styles to get it just right.

LOGO/APP ICON

In developing an app Icon/logo I wanted something simple that embodied a clean beauty feel. I started off by sketching a variety of different options and I digitalized my favourite one, and then I converted it to an app icon logo.

SKETCHES

RESPONSIVE WEB

I created a marketing page to give potential users a quick and easy over view of what the main task of the Honest Beauty app would be. I started off by doing some quick sketches and then moved on to some digital wireframes.

SKETCHES

DIGITAL WIREFRAMES

I created two versions of the wire frames before injecting the physical content in order to see where everything should fit.

RESPONSIVE WEB PROTOTYPE

I went with wireframe 2 because it created a visual hierarchy that allowed the user to truly visualize what the Honest Beauty app would be like.

If you are reading this, it is because your browser does not support the HTML5 video element.

RESPONSIVE WEB

The prototype is responsive for both web, and mobile

FUTURE IDEATION

In the future for Honest Beauty, I would love to explore different flows of what Jana could do in the app. It would also be crucial for the user to be able to explore Honest Beauty on a desktop view. Here are a few mockups for how that may look.

OUTCOMES

As my first UX project, Honest Beauty has given me a deep insight to the depths of the UX process at its core. The experience creating this product from start to finish has given me the ability to see through a project at its core. I take away from this the ability to make strong design decisions with my user in mind from end to end. Throughout this learning process I have learned that criticism is my best friend, insights from user testing are what makes a product functional and enjoyable. I am so grateful to have had the experience to create a project that is so close to me in every way shape and form, and I look forward to applying these skills in the future as a UX designer.