Derma Relief

AR shopping guide for smarter skincare

my role
User Research
UI  & UX Design
Pitch Deck Design
Google Forms
time frame
36 Hour Hackathon (Nov 2021)
Team members
Me — Design, UX Research, Competitor Analysis
Joshua Kim — Project Manager, Developer
Olivia Xu — Developer
Sarthak Aggarwal — Developer
at a glance


The 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 subsequently placed Runner Up in Loblaw's Amplify Expo 2021.

Design Challenge

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

Competitive 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, responding to questions such as: 

  • How do you educate yourself on skincare products?
  • Do you know 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 the ingredients list? (If no, why not?) 

Key findings

83% cannot identify their own allergens

Despite 54% of users reported having had experienced allergic reactions to skincare products in the past. Over 80% of those consumers do not know which ingredients caused their allergic reactions and continue to make misguided purchases.

67% reported that being able to identify which ingredients to avoid would make them feel empowered in being able to make better purchase decisions.

88% of participants feel that it would help them avoid committing to products that contain allergens, thus decreasing the possibility of negative retail experiences.

Wanting fast answers

From the survey, the most popular workarounds were googling for fast answers in layman's terms and/or asking friends for product recommendations.

Customers want information about each chemical in front of them to make their own decision, however, even when presented with background information on each chemical, most consumers lack professional training in being able to differentiate good chemicals from bad, not to mention the further discretion needed on the concentration & dosage of each chemical.

71% of consumers do not check ingredients regularly

Users reported feeling intimidated by the long chemical names and unable of differentiating between beneficial and harmful ingredients for personal use.


In the research process, consumers also self-reported a common habit of sharing their favourite cosmetic products with their friends and family within their social circles.


What should we include?

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

  • Ingredients breakdown & relevancy to user
  • Cross matching algorithm to predict for allergens
  • AR cam to scan & determine product matches
  • Add to cart (if it's a good match)
  • Sharing with social network
  • Continuous surveys to improve the allergen algorithm

Key features

Onboarding quiz

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

AR projection courtesy of Joshua + Olivia

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 to assist users in making educated purchase decisions without having to manually search up every chemical.

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.

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. If they see an item they would like to try, users can also add items straight into their shopping cart.

UX breakdown


Once signed in, users are briefed on the value proposition of the Derma Relief followed by transitioning them into the initial Skin Quiz.

Onboarding Skin Quiz

To kickstart the algorithm, users are asked to input known allergies and their skin conditions to collect the initial dataset.

AR Cam

In addition to the AR projected info-cards, users also have direct access to ingredients breakdown via the camera screen, signaling allergy alerts and level of risk associated with each ingredient. Once the user commits to purchase, the shopping cart can be easily reached via the bottom CTA buttons.

Streamlined for checkout

The goal is to offer entry-points on different pages to add-to-cart buttons so that users can have an expedited shopping experience.

Follow-up survey on past purchases

Two weeks after purchasing, users are asked to input their experience with the product to improve the cross-matching algorithm in identifying allergens.

A look back...


It's about drive, it's about *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.

What about food?

If given the chance, I'd like to take it 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