Project Brief

Defining

Development

Prototype

Retrospective

Project Brief

Role

solo designer

Team

1 (that’s me!)

Timeline

4 weeks, December 2023

Tools

Figma
Miro
Maze

The Objective

How can I make skincare management unambiguous, insightful, & accessible for all?

The Problem

For this project, I challenged myself to solve an "invisible" problem. While acne and skin irregularities are not frequently considered a factor in poor mental health, they indeed can have detrimental affects on emotional wellbeing.

After conversations with frineds and family, I learned that most struggle with finding the optimal skincare routine for their needs and then sticking to that routine. Thus, I set out to design a skincare personal diary for users to track all things skincare in one place.

Research & Discovery

I conducted both quantitative and qualitative research to gain deeper insight on the problem my app is solving.

User Research

I sent an online survey to a group of males and females in my community, asking specific questions about their experience with acne and other skin conditions. I wanted to specifically examine the psychological effects that their skin conditions left on them. The results revealed:

95%

faced lowered self-confidence

50%

faced anger

70%

faced embarrassment

Pain Points

“None of my skincare products seem to work like they advertise”

“I can’t find a skincare product that checks all the boxes for my needs”

“I can’t tell how my skin reacts to specific lifestyle factors”

“I can’t tell how my skin reacts to my lifestyle choices”

Secondary Research

To supplement my direct user research and utilize a larger sample size, I explored some meta-analyses to gain a richer understanding of how acne affects people. I discovered that:

Both males and females are similarly affected by acne, but females seek acne care 2.5x more often

Acne can appear in many areas aside from the face, such as back, chest, and shoulders

Acne is caused by many factors, such as diet, medication, hormones, and even weather

Target Audience

I decided to take a more holistic approach and design my app to be both gender-neutral and age-natural. Skincare tends to be considered a ”feminine” practice, raising a harmful negative stigma for males who want take care of their skin.
‍
This approach is not only more inclusive, but would expand my reach and have the capacity to make a beneficial impact in as many people’s lives as possible.

User Persona Development

To feel in closer to my users, I developed common personas. From online research of my target audience, I devised 3 people that would be most likely to use the Oliv app, including their personalities, goals, demographic information, and motivations to better cater my designs to them.

Defining

Branding

After many ideas, my color palette was narrowed down to be a combination of greens and blues.

- The greens convey a sense of health and growth, which encapsulates the goal of the app as a tool to help the user grow into their most confident self.

- The blues communicate a calming and professional energy, which helps build reliability for my brand.

For my brand's voice, I wanted to focus on uplifting the user as they face their struggles with acne. By using informal language and a neomorphic design style, the branding aligns with the playful and uplifting voice that I was aiming to give off.

Inclusivity & Accesibility

As a newer UX designer, I challenged myself to create an app that is accessible to all. This meant:

1. Making specific filters in the discovery page, including options for cruelty-free products, ingredients to avoid, price restrictions, and more.
‍
2. Choosing colors with a good contrast level in order to be read by people with all types of visual conditions.

3. Adhering to other elements of the WCAG.

Customer Journey Mapping

Modeling the customer's journey with Oliv in visual format was essential to my design process. The map allowed me to explore the user's needs, emotions, and thoughts at each touchpoint, exposing areas to reduce friction and helping me finalize the user task flow.

Information Architecture Diagram

Once all ideation and research was culminated, I drafted the information architecture diagram. This step was the final puzzle piece in setting up a foundation for my wireframes.

Development

Wireframing

My wireframes underwent many iterations, as I was the sole designer and recognized that my creativity would be limited compared to a team of designers. I conducted several rounds of user testing on a group of 3 - 4 subjects for different wireframe versions. After gathering feedback, I settled on a style that best fit my app’s goal and branding.

User Testing

I conducted a week of unmoderated user testing through Maze. I provided an interactive prototype along with task instructions, which allowed me to assess intuitiveness and discoverability using heatmap results. I also utilized the platform to gather open-ended feedback on users' emotions, satisfaction, and pain points.

Prototype

At a Glance

Interactive Prototype

Notable Features

Product Details

This feature is designed to enhance users' understanding of their skincare products. With the click of a button, users can access crucial details such as side effects, duration of use, costs, and personal notes associated with a specific product. This feature helps users conduct a thorough assessment, enabling them to make informed decisions regarding how worthwhile a skincare product is for them.

Note Entry

This feature enables users to provide detailed descriptions of their skin condition, including acne type, lifestyle influences, specific areas of affected skin, photos, and custom notes. By auto-recognizing patterns, such as the correlation between dietary changes and skin blemishes, the Oliv app yields user insights for a more special and individually-tailored skincare experience.

Goals & Stats

The primary objective of the Oliv application is centered around fostering a positive in-app user experience, with particular emphasis on boosting spirits. Thus, Oliv integrates motivational elements that are displayed upon opening the app. Users are given the capability to set personal goals, enabling the visualization of their progress. These features cultivate a sense of personal growth and improved confidence throughout the user's continued interactions with the application.

Discovery Section

This section allows users to find specific products uniquely suited to their needs. There is a range of filters the user can apply, including:
- product type
- cruelty-free
- ingredients to avoid
- price minimum and maximum
- vegan
- skin area
- brand

My Shelf and Collections

The shelf feature allows users to create a personalized “shelf” of products that they use currently or have used in the past. They are able to add up to 8 product categories and choose from a variety of icons to represent each product. The collections feature allows users to create custom groupings of products for them to view later. This is a newer feature I added after user testing because subjects expressed an interest in being able to create their own groupings, such as “products for mom” or “products I’m allergic to”.

Retrospective

What I learned

Providing everyone with equal access to educational and self-development tools is important to help combat the mental health crisis in our world today. While skincare is just a small part of it, Oliv is the first step in that hope.
‍
Humans prefer navigating digital products with minimal cognitive effort because of our short attention spans. Learning from this, I prioritized intuitive design in my app, aiming to make every click “mindless” for the user. This meant letting go of some "fancy" designs and text that, while appealing, could be misinterpreted. This decision was necessary to ensure a truly usable app, even if it came with a bit of sadness parting from those elements.
‍
Inclusivity is vital. Oliv gives users of all backgrounds, disabilities, gender identities, and ages the access to take part in a journey of personal development and education without barriers. To enable this, each design had to be intentionally crafted with the potential of it being used by anyone. For example, upon completing my initial prototype I realized that my text was too small in some places, creating a potential hindrance for those with visual impairments. Although tedious, I decided to go back and change the sizing of many elements to accommodate larger text.