Dictionary+ is an online platform made for The Ordinary, accessible throughout their existing online content to quickly read about active ingredients. The extension expands on customers' knowledge of skincare science that applies to their long-term goals and their overall confidence in navigating to related products.
Made by Nathan Lew, Francesca Reyes, Sahar Babaei and Elsa Sinuhaji
A strong, creative start to my 2022
This project was made in early February to March of 2022 as part of an information design course at SFU, with all insights based on the previous website. As the project lead, I was oversaw and conducted our secondary research, content & visual design. At the time, I also spearheaded interaction design and full prototyping in Figma—after submission, I took some time to refine these alongside the visual design
The Ordinary is a Canadian skincare brand driven by a scientific attitude to create affordable and transparent solutions. With a core set of ingredients, the DECIEM brand promotes the use of only essential products for a variety of skin concerns.
Despite their radical transparency, simply listing product ingredients did not appear enough to justify purchases. With chemical jargon's potential to overwhelm to beginners in finding items, we started to investigate our initial framing:
How might we present skincare science more digestibly for new consumers of The Ordinary?
At the start of the project, I was able to define the following places we could design for based on initial readings and reviews. Specifying these parts of our user journey aligned our team in drafting a list of research questions.
Friend recommends trying The Ordinary
Areas to assist
Browse and explore solutions + regimens
Check compatibility with current skincare
Reflect + personally test product efficacy
Final objective
More insight about best fits for self care
Early insights from secondary research
We began by investigating e-commerce behaviours and the specific information that future shoppers might want to be equipped with. By analyzing a case study by Engine Digital, responses from 88+ survey participants from ages 18 to 23 and reading through online journals, we learned the following insights:
Customers seek to be informed about results and effectiveness, first and foremost.
Recommendations help customers feel empowered in their choices and rationale.
Out of all info, users search and care most about products' function and fit in their regimen.
With these guidelines, we aimed to elevate novice users' understanding of skincare active ingredients in a more personalized manner.
The initial form—embedding ways to explore
While we explored personalization through questionaires, recommendations appeared surface-level and standardized for each user. By considering how to allow ingredient information could be accessible and persistent across the web experience, we landed on an approach similar to a pocket reference.
Touchpoints are embedded across existing content for optional exploration of our new system. The initial integration proposed new tabs teaching ingredient facts and similarities between products, leading to the potential of saving preferred items.
Refining the solution—takeaways from user testing
After creating an initial prototype on Figma, we gathered 8 participants to examine the effectiveness of each interaction. With all testers having previous experience shopping for skincare online and provided us with the following takeaways:
Prioritize the educational scope
Participants noted a lacked synergy with the info-first approach in previous explorations when focusing on saving products and ingredients for faster checkout. These interactions were removed to better unify the experience.
Be clear when being cautious
While product mixing warnings were initially included, participants were more assured by justification behind such statements when buying skincare.
Simplify the navigation scheme
With browsers already containing so many tabs and buttons, extra navigation can be an overwhelming visual rather than an affordance to new content.
With these final insights, we produced Dictionary+—a self guided approach to learning active ingredients & their place within one's routine.
A final walkthrough of Dictionary+
Onboarding on first visit
Users meet Dictionary+ through a modal highlighting the icon in the newly simplified navbar. This message can be ignored or set as a reminder for the next time they visit.
Insight from testing: Reduced navigation emphasizes clear call-to-action into platform
Entry from product pages
Tooltips on hover clarify chemical jargon and redirect users to Dictionary+ for further insight. By clicking the call to action, users can quickly review ingredient info and browse related products.
Insight from research: embedding interaction allows for optional exploration instead of imposing redirection to Dictionary+.
Hide unwanted ingredients
Ingredients that clash with one’s existing regimen can be filtered out of the product listing pages on future visits. These ingredients can be opted back into for product listing across The Ordinary's site after navigating to the respective tab inside Dictionary+.
Cautions before checkout
Justified warnings about product mixing are presented in Dictionary+ and before checkout at the bottom of the cart as a final review step. Reuse of the link component seen in product descriptions provides another opportunity to refresh one's knowledge and make more certain purchases.
Learning moments
As one of my first ventures into interaction design, I restructured my foundation for designing with strong intent at all stages of a project.
The most notable development in my own work was my attention towards strong content and research as these acted as the backbone for each aspect of the created experience.
Creating spaces for my team to develop and refer back to user research was especially crucial. Not only did it build my confidence in justifying design decisions, but also provided comfort in leading pivots in our direction for the most appropriate result.