We are trying to solve the lack of awareness of (harmful) ingredients in skincare and hair products; most people who use these products do not pay attention to all of the ingredients. They may only buy them based on the ingredient that is part of the product's title, but nothing else. These consumers sometimes get bad reactions to these products and do not know what exactly is causing it. We want to enlighten consumers about the ingredients while also recommending them products that they should stay away from (either because it has bad ingredients and/or it has an ingredient that has previously given them a reaction).
How might we teach people about harmful ingredients in products and what to avoid in order to prevent negative reactions?
What is our market?
Who are our users?
User Archetype
Mira Scarlet
Competitors
Chosen Competitor: INCIDecoder
INCIDecoder uses two typefaces; Klavika Bold for headings and Georgia for their body type. Their hierarchy is as follows:
They have several static images on their homepage, and whenever you refresh the page, the displayed products change. However, there are only a few different product combinations, which never intermix.
I conducted my user research by creating a "Self-Care Questionnaire". I asked people their ages, gender, and general questions regarding their skin and hair care routines (if any). Some questions were,
My survey responses showed me that most people have skin care routines that are performed daily. For the most part, they do not pay close attention to the ingredients; they either look at the main ingredient being advertised on the product's label, or only make sure it does not contain fragrance/irritants.
In terms of following what they see online, they are highly likely to buy a trending product that has good reviews, especially if it comes from an influencer they really like, or a person they know. However, they also showed that they would not buy this product without doing some research on it. This is great, as Diaphonous can be their resource to do research.
We are targeting teenagers and young adults, as they are the biggest and most consistent users of skin care. People aged 12 - 24 typically experience acne and other skin concerns, and want to try to rid themselves of it. People who follow influencers and are often on social media also fall under this age group. Thus they are most likely to follow trend without researching a product.
Name: Jasmine Liay
Age: 21 years old
Status: Full-time university student with a part-time job
Desires: To learn what ingredients in products irritate her skin
About Me: Jasmine Liay is a 21 year old woman who suffers from acne-prone skin. Despite performing her skincare routine twice a day, she still suffers from frequent breakouts, and her skin is easily irritated. She tries to research products before purchasing but does not know much about the ingredients being used. Jasmine has spent hundreds of dollars on skincare but only few products help. She wants to know what ingredients irritate her skin so that she can steer clear of them. Jasmine is unaware of which product(s) in her skincare routine are causing her to suffer from breakouts. She also suffers from excess hair shedding and does not know why.
When users sign up for an account, they immediately begin the "Routine Builder", where they can input their current skin and hair care regimens. This can then be re-accessed from their profile in case of any changes to their routine(s). The "Skin Product Search" and "Hair Product Search" pages will be the same in terms of layout; companies (who produce skin/hair products) will be listed in alphabetical order, and products can be searched by brand name. When a brand is selected, users will be routed to a page with all of its products, and upon selecting one they will be taken to another page that lists all of its ingredient information.
The "Ingredient Explanations" page will feature the most popular ingredients being used right now, for example: vitamin C, niacinamide, hyaluronic acid, etc, and an explanation of what each one is. Specific ingredients can also be searched to learn more.
When debating on how to structure Diaphonous, I took inspiration from the Sephora website, by displaying products in a multi-item carousel. The "rating" under each prodcuct is to be Diaphonous's personal rating of how effective and safe it is, on a scale of 0-5.
Another question was how to lay out the brand searches, especially since some brand names can be pretty long; would they look strange or out of place? Should I keep a fixed width for the shape that will contain its names, cut the long ones short?
After playing around with the placement, alignment, and width of brand names, I decided to break the grid a little bit. Longer brand names will be assigned a longer containment shape. Also, if one name is long, it can push into the following column, and the brand that should have been in that column will get pushed to the next (or, if its at the end, pushed to the next row). For example, in the Skincare Products search page, the brand "ARQUISTE Parfumeur" is long and pushes into the fourth column. As a result, "Augustinus Bader" is listed in the first column of the next row.
Something that I struggled with while designing the routine builder was, how can users add the products they use? As a solution, I listed all products that can be used in a regimen, and users can set the quantity to 0 if they do not use any of them.
In the user's profile, they can switch between viewing their skin and hair care regimens. This made the most sense rather than compiling them in one page, as some users may only have one routine. At the top of their routine, there is a summarization of what could potentially be affecting them negatively and what they may be doing wrong.
Click here to interact with the final prototype.
Diaphonous, if it was a real project, would have the ability to solve people's skin concerns and possibly lessen cases of skin cancer and other ailments. When users learn what works for their skin and what products contain harmful ingredients, they will devise a regimen that they will only benefit from.
Diaphonous was not the first solo project I've worked on, however it was the first project I created where I had almost zero guidance. I used all my learnings I accumuluated throughout my undergraduate courses to put this together; it was not an easy task, but it has prepared me for designing independently in the future. I am now confident in my abilities to design without a team.
To further this project, I would design a page that describes the scale used for rating products. I would also approach creating the banners for each page differently, perhaps making them span the fullwidth and creating more of a consistency in their designs.
Once I master Javascript, I would like to code a demo version of this website and host it. I would love the opportunity to collaborate with chemists and make this project a real thing, where everyone can be educated of what they are applying to their bodies.
