Derma Relief

AR Shopping Guide to Smarter Skincare


Product Design
Pitch Deck


Project Manager (1)
Developers (2)


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 a range of tools to research and define my solution within the double diamond structure. My methodology supported a systematic and iterative progression, ensuring a thorough exploration of the problem space.


Analyzing competitors

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.


While users can commonly access a list of ingredients via the barcode scans, none of the existing apps offered personalized predictions or generated smart recommendations over time.

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

Despite past allergic reactions, participants remained uncertain of the triggering ingredients, resulting in misinformed purchases & negative experiences.

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 is a time-consuming process for shoppers who simply wanted to make a quick decision.

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.


"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 needs

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


Final Designs

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

The current homepage design traps users in an infinite scroll before discovering plausible recommendations. If I could redesign it, users would be able to filter through curations based on their skin concerns and access educational articles from skincare professionals.

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.

Thanks to

Shoutout to my teammates, Joshua Kim, Olivia Xu, and Sarthak Aggarwal, for their incredible work ethics and fun spirits to collaborate with on such a innovative vision.