Curology

App Design

Due to the limited experience of a website for the Curology brand, users are unable to access their skincare routine easily. To establish regular engagement with individual skincare subscriptions, a potential solution is shifting from the mobile web experience to a dedicated app. This involves adapting the current design for the app format and introducing a feature to enhance interactivity.

Project Overview

Download Final Documentation

Key details, users, deliverables, and, project planning.

What is Curology?

Personalized skincare by experts for clinically proven results.

Subscription Service
Indirect Dermatology Care
Personalized Skincare box

Deliverables

Interactive high fidelity prototype - Every screen interaction created with the design system
Design Documentation - Showing my process (goals, research, and ideation)
Design System (Figma) - Based on the current Curology design system

Link to Final Presentation

Type of Project

App design. Transitioning the mobile web experience to an app experience and adding a creative component to enhance a user's experience with their subscription.

Tools & Research Techniques

Figma
Whimsical
Heuristic Evaluation
Competitive Analysis
Concept Testing
Usability Testing

*Note: This project was for an individual capstone assignment that lasted one semester (SPRING 2023). All of the work below has been conducted by myself, Christina.

Project Overview

Setting the Scene

Why does Curology need an app? Defining the pain points...

This is Kiki...

She has been a Curology subscriber for 3 months now and has loved the results of her free trial!
As she has been managing her subscription for her next order, she has struggled to navigate the mobile website experience.

Her Pain Points

She wants quick access to her Curology Account.
She struggles to navigate through the web experience.
Would like to track her progress + sense of accomplishment.

Her current experience:

Screenshot 2023-12-27 at 11.08.14 AM.png

Screenshot 2023-12-27 at 11.08.34 AM.png

Screenshot 2023-12-27 at 11.09.01 AM.png

The Redesign

Final Design

How have I addressed these paint points in the app design.

The changes made:

Profile to Navigation Bar - the profile was only accessible through the homepage in the early iteration.
Information Hierarchy on Profile - ensuring that the user can find their routine and subscription details easier.
Routine can be found easily - now accessible through homepage and profile settings.
Direct messaging with dermatologist - ability to message directly and access resources.
Creative component - to track their subscription, users get to enjoy a free gift/prize at certain milestones.

My Process

Through 3 milestones, how I got to the final design.

01

Understanding the current experience + exploring similar experiences

During this milestone, I conducted a heuristic evaluation on the current web experience, a competitive analysis on other skincare apps, and sketching based on research insights.

Evaluate the current experience + begin customization

02

Based on the research conducted, I sketched the current mobile app experience, created lo-fi/mid-fi mockups on Whimsical of the current experience for testing, and conducted concept testing to identify the pain points of the experience + iterations.

Research on creative component + Finalize prototypes

03

With the mockups tested, I researched + chose a creative component to add to the app experience, transitioned from mid-fi to hi-fi prototypes by using the Curology design system, and conducted usability testing and applied iterations

Milestone One

Understanding the current experience + exploring similar experiences

Goal for this milestone

During this milestone, I wanted to understand the space through a designer viewer rather than as a user. As an avid user of Curology, I have explored the website and have found inconsistencies and wanted to look into these further.

Goal

Identify inconsistencies, navigation issues, and/or features that need to be highlighted more.

Approach

In order to identify these inconsistencies, I decided to conduct a heuristic evaluation while a new user navigates through the website. Using Nielsen’s Ten Heuristics, I mapped out a cognitive walkthrough that addressed each section of the website and evaluated the user’s experience.

Setting up the free trial
1. Creating an Account
2. Taking the survey about current skin state
3. Purchasing free trial
Managing Subscription
1. Change what comes in the box
2. Change payment method
3. Canceling subscription
Community Aspect
1. Viewing other users’ journey
2. Create Postcard
Tracking personal progress
1. Viewing past progress
2. Updating your current progress
Contacting dermatology provider
1. Messages from provider
2. User to dermatology provider
Using resources provided by Curology
1. Research about diet
2. Research about skin & routine

Sneak Peak into the Heuristic Evaluation:

Link to Full Protocol

Takeways

Recognition rather than recall - certain buttons and features were hidden on pages that did not correlate with their purpose.
Consistency & Standards - the message thread was not a way to communicate with the dermatologist provider rather it was just a treatment plan submitted by the provider.

Recommendations

Change icons to match their intended purpose
Either redesign the message thread to allow for the user to contact their provider or design it in a way that does not misdirect the user’s intuition.

Screenshot 2023-12-27 at 12.11.22 PM.png

Goal

Evaluate other subscription/topical skincare apps in order to find inspiration for the Curology app. (seeing what works and what does not).

Approach

Created a Miro board frame with a table (apps names and features).
Features: setting up the app experience, managing subscription/account, communicating with customer service, browsing the app, creative components, inefficient or unused things, and extra features
App Names: Ipsy, Ulta, Lush, & FabFitFun

Link to Miro

Takeways

One creative component option would be a points system + tracking the points.
Making sure the users can contact Curology support in the app and not be redirect to the website.
Allowing the users to explore the app without immediately requiring them to create an account or subscribe.
Making the “create an account” system quick and easy. (allowing for further setup later)

Christina's Capstone Project - Competitive Analysis.jpg

Narrowing My Scope

Narrowing the Scope

During my research in Milestone One, I found that there were too many inconsistencies in both the “before creating an account” and “after creating an account”. These two different views were just as complex as the other, which led me to reevaluating.

Two options:

Focusing on before creating an account
Focusing on "account view"

Considering that my focus was originally on enhancing engagement within the app and including a creative component, I decided to focus on the account view. The “before creating an account” focus would require me to give the user incentive to create an account and that was not my original intention for this app.

This would allow me to:

Personalize the experience
Enhance engagement
Focus on the current subscribers

I also decided to move away from the points system because it did not fit with the subscription service that Curology provides. Due to this idea falling through, I decided to focus on the current experience still and to research the creative component in milestone three once the overall app design was established.

With my focus on after creating an account, I moved into my next milestone to evaluate that experience and make iterations based on testing.

Milestone Two

Evaluate the current experience + begin customization.

Goal for this milestone

In this milestone I decided to focus on evaluating the current web experience. I aimed to design screens that replicated the current mobile web experience in order to evaluate the experience. The takeaways from the test would inform the final design to ensure a seamless experience.

Goal

Adapting the mobile web experience to an app experience.

Approach

I started by sketching out the mobile web experience and adding a few features based on the desktop web experience.

With these sketches, I moved into Whimsical to adapt them to mid-fidelity in order to test with them..

Goal

To gain feedback on the current experience that will lead to a more seamless interaction with the later mobile app design.

Approach

In order to understand the user’s wants and needs of the app experience, I walked them through each screen. I allowed them to talk through each screen and recorded any inconsistencies, compliments, questions, and suggestions. These recordings were documented on Miro.

Takeaways/Iterations

After reviewing the takeaways from the evaluation, I made changes to the mid-fis. While not all of the questions were answerable and all of the suggestions could be utilized, I iterated based on the ones that could.

With these iterations applied, my focus moved from the current experience to the new app experience. Making it more personalized and enhancing the user’s engagement through a creative component.

Milestone Three

Research on creative component + Finalize prototypes.

Goal for this milestone

In this milestone, my focus was on personalizing the mobile app to enhance the user’s engagement.

Goal

To choose a gamification component that is recognizable and engaging to the user, but still benefits the company.

Approach

I conducted research by exploring which gamification components are most widely used through Medium Blogs. I wanted to ensure that the component I was going to choose would not distract the users of the true purpose of the app, which is to explore their personalized skincare.

“One of the best ways to avoid this scenario is to focus on how gamification can support your users as they move through your product, rather than merely providing them with unnecessary distractions for the sake of entertainment”

- Sofia Quintero (Medium Blogs)

Takeaways

Throughout my research, I found a lot of ideas that all circled back to a points system. Looking back at my competitive analysis, I remember finding that many cosmetic apps use the points system because they have multiple products. A customer is able to gain points through purchasing on their own time. I found that this would not work for Curology because it is subscription based and the points would only be distributed every two months. Then I found:

“Achievements are rewards that are given to users when they have completed a certain task or reached a specific level. Achievements can be used to encourage users to continue engaging with the platform and to strive to achieve more”.

- DesignGuru (Medium Blogs)

Considering that Curology could have something called “milestones” for the number of boxes (or how long the user has been using the subscription), I wanted to connect rewards along with them. I was able to ideate on the milestone idea along with a wheel that could be spun once the user reached one of the milestones. There would be different kinds of “prizes” or “rewards” that the user could win.

Mid-fi mockup of milestones feature

With each component of the app design in mid-fidelity, I moved into creating a design system that was inspired by the current Curology design system.

Goal

To make transitioning from mid-fidelity to hi-fidelity more efficient with the use of colors, font, and components.

Design System

High Fidelity Designs

Goal

To enable users to visualize the changes made from the mobile web experience to the adapted mobile app.

These screens are the finalized designs and the iterations made from the usability test can be found here.

Goal

Ensure that the hi-fi mockups are intuitive and all interactivity is consistent.

Approach

I conducted usability testing with the Figma interactive prototype with both designers and users of the Curology subscription. The test consisted of the following tasks they need to complete:

Navigating through the homepage
Location and evaluating the notifications page
Locating the messages tab and creating a new message
Navigating to their recommended routine
Looking through the profile tab
Finding where to cancel their subscription
Finishing with comments about experience

Takeaways

Add another screen where the user can see their skincare routine.
Make the homepage more interactive (connect more features with interactivity)
Redesign the notification page to give more feedback to the user. (add a few more features, like deleting and showing when a notification has been read already).
Add a logout button to the profile page.

Once these iterations were applied, the design was at its final design. Iterations may be made in the future based on future purpose.

Next Steps

Considering the time constraint and my abilities with Figma, there are a few iterations that I would like to make in the future. These are as shown below:

01

Add more interactivity

The routine page could have more interactivity. Thoughts: a swipe feature, animation, etc.

Designing the other view

02

Designing the "before having an account" view.

Implementing more features

03

Allowing the user to read more about skincare on the app instead of navigating to the website.

Reflecting on Project

Reflection

What would I have done differently? What am I proud of?

This semester was one of the most defining times for my understanding of UX Design and also how I approach design. Not only was I able to focus on things that I found most interesting, but I also got to test my knowledge on design. I learned so much during the process and my peers and professor were very supportive. While my initial project plan was changed multiple times throughout the semester, I found that this was more beneficial than it was destructive. I was able to identify my design strategies and how I perform under my own supervision. One of the most defining parts of this project was when I had a pivot point after my first milestone. I was forced to narrow my scope because there were too many things I could address in my project but I couldn’t because of time and my design abilities. Moving away from designing both the “before creating an account” and “after creating an account” and just focusing on the “after”, allowed me to really focus on the necessary parts. I knew that if I tried to take on both of them, I wouldn’t be able to address every issue. The design wouldn’t have been evaluated enough and I would’ve wanted to strive for more. Overall, I am really proud of the work I did this semester and cannot wait to do more personal projects in the future.