Overview

Existing perfume and cologne products features an array of top notes, middle notes, and base notes to create distinct fragrance profiles. However, the complexity of these layered scents can often make selecting the right product confusing and at times frustrating for users, especially when potential allergens are involved. Current fragrance products do not provide users with personalized options that take both preferences and allergies into account.

AroMatch, our very own fragrance customization quiz, simplifies and personalizes the fragrance selection process. It empowers users, particularly those with allergies or are overwhelmed by fragrance options, to enjoy a safe and tailored scent. The quiz surveys the users’ fragrance preferences as well as existing allergies, generating specific top and middle notes that align with their tastes. These are then paired with our base note of borneol to create an aromatic blend. The final combination of the product is then branded with a unique personalized product name generated by AI.

Logic-Flow

With our emphasis on inclusivity for users with allergies, our AroMatch quiz begins with allergen options for users to select and exclude from the final personalized product. Users can select none or multiple allergen options.

After allergen selection, AroMatch moves on to survey the users’ fragrance preferences. With the base note of L-borneol to generate our desired mosquito-repellent effect, users select their middle and top note preferences that AroMatch tabulates to generate a final personalized product. The logical flow of AroMatch is presented in the diagram below:


A simple diagram of the logical flow of our AroMatch quiz.

The ending page displays the middle and top notes of the final product that were designated based on the users’ selections. The top of the quiz page shows the AI-generated names that brands the users’ personalized fragrance products.

We included a warning pop-up alert that warns users if their fragrance selections match a particular allergen selected in the allergens selection page. Users have the option to proceed with their selection or retake AroMatch for a product that excludes designated allergens. If allergens and fragrance selections do not match, a different pop-up is shown.

Implementation

We used Javascript-based code to create our UI.

You can find the code here: https://gitlab.igem.org/2024/formosa/-/blob/main/static/js/quiz.js?ref_type=heads. Listed below are some distinct features implemented:

  1. We stored the AI-generated fragrance names of each possible middle note and top note combinations in distinct arrays.

  2. We used if-else statements that search the question number and answers using searchParam.get(“qN”) == “SELECTION”. Once the user selects an option matching a specific if-else statement, the statement alters the URL to store the added information.

  3. After all questions are answered, AroMatch searches the final quiz page URL, matching the distinct URLs with a corresponding ending page with specified middle note, top note, and personalized product name. The personalized naming is done through calling on unique fragrance name arrays through preset Javascript variables.

  4. Personalized middle and top note options are displayed for selection based on previous selections of fragrance preferences.

  5. Allergen selection are similarly stored in the URL in “algy=000000000” section. Array elements alters between 0 and 1 based on which allergens are selected by the user. AroMatch searches this parameter using searchParam.get(algy) == “ARRAY”. The warning pop-up is displayed if elements matches with the users’ fragrance selections in the searchParam.get(“qN”) == “SELECTION” statements.

Demo

Try out the AroMatch quiz for yourself!

The following pictures are in chronological order.


1. AroMatch's allergen selection page.


2. Sample AroMatch qustion page.


3. Sample AroMatch ending product page with allergy warning.

Future Prospects

We plan to build upon the current AroMatch quiz by constructing additional options and parameters for greater inclusion of user preferences and potential allergies. Potential directions of expansion include:

  1. Additional fragrance ingredient options in the answer arsenal

  2. Fill-in-the-blank options for fragrance ingredients, fragrance types, and allergens

  3. Longer, more extensive question sets

  4. Additional preferences (eg: inspirations from existing brands, inclusion of specific words and ingredients) for names of personalized fragrance products

The expansion of our AroMatch quiz would increase our products’ customizability and inclusivity.