Derma Relief

AR Shopping Guide to Smarter Skincare


Product Design, Research, Branding


YiFan Dai — Design, Pitch Deck
Joshua Kim — Project Manager
Olivia Xu — Developer
Sarthak Aggarwal — Developer


Figma, Blender, Google Forms


36 Hour Hackathon / Nov 2021


In November 2021, I competed as the sole designer in a team of 4 for Hack the Valley. The project idea came from our teammate Olivia's allergic reaction to common sunscreens. She had sensitive skin and frequent reactions to skincare products but had no idea which ingredient was causing her irritations.


We created an AR app with cross-matching technology that allows customers to scan skincare products, predict for allergens, and empower users to make quick, educated & sustainable purchase decisions tailored to their skin condition.


We were honoured with First Place in Loblaw's AR Challenge during the original hackathon, and our pitch deck subsequently placed Runner Up in Loblaw's Amplify Expo 2021.

"How might we create an AR experience for customers to make smarter shopping decisions for their skin health?"


Design process

I used the double diamond to navigate across my research, define, and test stages before eventually presenting the final solution with the pitch deck and interactive prototype.

The visual diagram also asynchronously communicated my status to my teammates for them to gauge when we would be able to integrate our works together (ie. prioritizing key features with the PM or passing the wireframes off to the developers).

Competitor Analysis

What's out there?

To start us off, I wanted to understand the existing apps and identify the gaps we could be resolving for. I examined 4 contending apps, comparing and contrasting their features.

The main similarity was that all required users to scan for barcodes and thus provided a list of ingredients. However, none of the existing apps offered personalized predictions or generated smart recommendations over time.

User Research

Listening to the consumers

To gather immediate responses from a large sample size, I released a survey to identify the existing challenges, habits & workarounds. There were 68 anonymous participants in total. I wanted to gather insights for the following areas:


  • How do you usually educate yourself on skincare products?

  • Are you aware of which ingredients are responsible for your reported skin allergies?

  • Tell me about a time when you were dissatisfied with a product purchase.

  • Do you check regularly the ingredients list? (why or why not?)


Key findings

83% cannot identify their own allergens

Over half of all participants have experienced allergic reactions due to unknown allergens. Despite this, 83% remain uncertain of the triggering ingredients, resulting in misinformed purchases & negative reactions. Users want to feel empowered in identifying their own allergens and making better decisions when shopping.

Wanting fast answers

Consumers often turned to the internet for clear explanations and sought advice from friends when selecting products. Having to research every ingredient was a time-consuming process for shoppers who simply wanted to make a quick decision. As a result, people felt they lacked the necessary information to make informed choices.

71% of consumers do not check ingredients regularly

Users reported feeling intimidated by the lengthy chemical names and unable to distinguish between beneficial and harmful ingredients for their own use. Thus, the lack of expertise led to ongoing misinformed purchases and allergic reactions.


"How do we create retail experiences that provide relevant information to consumers in stores that empower educated decisions?"


Who are we designing for?

I created a preliminary outline of our persona to better identify our audience. Given that our project was dedicated to Loblaws' AR challenge, we determined that the customer base of the company would serve as the context for our user group.

Prioritizing features

Upon discovering some key takeaways, I then brought the research back to my teammates. Along with our project manager (Joshua), the two of us finalized a list of features to resolve users' pain points:

Key features

  • Ingredients breakdown & relevancy to user

  • AR cam to scan & determine product matches

  • Cross matching algorithm to predict for allergens‍

  • Add to cart (if it's a good match)

  • Sharing with social network

  • Continuous surveys to improve the allergen prediction


Features Highlight

Onboarding quiz

Upon sign-up, users can input their skin concerns & known allergies to generate personal recommendations.

Streamlined for checkout

Once a user decides on a good match, users can then swipe up to learn about the ingredient breakdown or add to cart for an expedited shopping experience.

Personalized allergy alerts & matches

Once a product is within view, the AR cam projects a summary of pertinent information such as Allergy Alerts, benefits, or harmful ingredients.

AR projection courtesy of Joshua & Olivia.

Keep up with friends & fam

Users can share their product reviews or browse for recommendations on their home page from their social circle & skincare professionals.


A look back...

Designing with strategy

During the hackathon, I was tasked with analyzing direct competitors to enable product differentiation. Aside from focusing on the pixel perfection of my prototypes, I also learned to design with market positioning in mind. As a result, I created features that both solved for pain points & offered unique value propositions to our customers.

Rethinking the home page

If I could iterate on my designs, I would showcase the community recommendations feature as a curation page instead. With the current infinite scrolling design, it would take the users a long time to discover products that work for them. Whereas a curation page would have more room to embed educational articles on how to take care of your skin or highlight collections curated by dermatologists that could provide more professional skincare advice.

Next steps

What about food?

I'd also like to take the design one step further to expand into the food industry. While our original plan focused on skincare, the application of AR technology can easily be extrapolated to educate users on their food intake & grocery purchases for health journeys beyond skincare.

More Projects