Product Design | UI | UX

complexin.

Conceptual design for a mobile app that helps novice users learn about skincare.
complexin. aims for users to walk away with an understanding of their skin, products, and terms in order to generate interest in their own skincare routines and reach their skin goals.
View Prototype

Overview

This was a fictional capstone project during my time at Brainstation.

I created a mobile app for those who identify as skincare novices to learn about skincare. My goal was to meet them at their level and create an experience that is approachable yet easy to understand so they could feel comfortable and confident about starting their skincare journey.
My Role
UX/UI Designer
Project Duration
Feb 2021 - Apr 2021
Tools Used
Figma, Miro, Google Forms
Platform
Mobile
Problem Space Discovery Synthesizing + Design User Testing Final Design Final Thoughts
Problem Space

The Challenge

Current Optics on Skincare

Over the years skincare has been coded as a feminine practice and has made people feel as though it’s not for them or that they shouldn’t be bothered with it.

With complexin. I aimed to change the perception and wanted to encourage those who may have felt shunned from it. I initially wanted to figure out:
How might we ungender skincare in order to encourage more people to make skincare part of their daily routines?
Discovery

Understanding the Challenge

Assumptions vs. Reality

Through user interviews, I realized that my initial assumptions were wrong; there was more nuance to the issue.
Skincare Knowledge
People want to understand products, how to use them, how to create a routine, etc.
Knowledge Everywhere
People are overwhelmed by the amount of information.
"How Does This Benefit Me?"
People want to understand how products and having a routine can help them.
Skincare Knowledge
People want to understand products, how to use them, how to create a routine, etc.
Knowledge Everywhere
People are overwhelmed by the amount of information.
Basic Explanations
Language used around skincare is confusing and hard to understand.
Junk Skincare
People want help separating which products are good or bad for them to buy and use.
"Where Do I Begin?"
People don’t know where to start their journey.
Basic Explanations
Language used around skincare is confusing and hard to understand.
Junk Skincare
People want help separating which products are good or bad for them to buy and use.
"Where Do I Begin?"
People don’t know where to start their journey.
"How Does This Benefit Me?"
People want to understand how products and having a routine can help them.
With these findings in mind, I realized that I needed to pivot and figure out:
How might we help people who identify as novices to learn about skincare and products in a way that’s easy to understand?
Synthesizing + Design

Define & Design

Creating Personas and Flows

I identified two major user groups from my research: pure beginners and people with intermediate knowledge who had more targeted and specific questions.

Since this was a short timeline and a concept project I focused on:
  • Designing and developing a user flow for the pure beginner persona (Kyle).
  • Wireframes related to a user searching and learning about a product category (ex. moisturizer).
User flow that describes a user searching and learning about moisturizer.

Task Flow

Sketches of four different wireframes for the product page and home page.

Wireframes

User Testing

User Testing & Feedback

Testing Goals

I was aiming to see if the flow and screens designed met users expectations for the tasks that were given to them.

There was two rounds of testing and each group I gained valuable feedback that allowed me to make changes aligned to what people were expecting.

New Screens Added

Low fidelity wireframe of a new screen that has the type of skin care products people might use.Low fidelity wireframe of the "Learn About" screen
Testers wanted to use the learn button in the nav bar.

An additional task flow and screens were created for users whose first instinct was to use that icon.

Header On Home Screen

Low fidelity wireframe of the home screen that has "New Articles, based on your interests" at the top.
Testers were unsure about what type of information would be appearing here.

A header was added to indicate what articles would show up and why they’re relevant.

Favorite on First Sight

Low fidelity wireframe of heart icons being added to the search results screen.
Testers wanted the ability to quickly add items to their favorites for when they’re unable to read an article or text at that moment.

Favorite icons were added to articles and products in the search results.
Final Design

Meeting Design Goals

My solution helps to fill an educational gap for those that have been intimated by the skincare space and needed a resource they could turn to for information that is easy to understand.

Even though I made a pivot in my project, my solution still touches on my initial goal of un-gendering skincare. I made assumptions that people didn’t care when truthfully it’s that people don’t have easily digestable information that allows for them to care and dive deeper.

App Features

With the final design I wanted to prioritize:

Ability to Explore Information

  • Side-scrolling of articles at the top, which is updated daily, allows for exploration of different relevant topics.
  • Articles are tailored based on interests chosen during the onboarding process and are continuously curated as the user uses the app and favorites items.

Find Information Quickly

  • Quickly find information, whether articles or products, that match the search query.

Easy to Understand

  • Favorite feature - to save and review for a later day or a refresher on the topic.
  • Suggestions of products that correlate to the topic, making it easy when you’re out shopping in the world.
Final Thoughts

Project Lookback

What I Learned

The Importance of a Good Question
Asking good questions to get quality insights is important. I think there might have been missed opportunites to get even better insights.
Synthesizing Research
Learning how to take in and understand all my research and turning it into bite-size understandable insights.
Applying Feedback
How to better listen and understand others points of views and experiences to figure out solutions and apply those changes in a meaningful way.

Future Plans

Moving forward with this project, things I'd like to work on next are: