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.
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).
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.
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?)
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.
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.
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?"
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.
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:
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
Upon sign-up, users can input their skin concerns & known allergies to generate personal recommendations.
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.
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.
Users can share their product reviews or browse for recommendations on their home page from their social circle & skincare professionals.
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.
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.
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.
