SunCare
Like many people in quarantine with access to social media, TikTok, and Target I developed a slight obsession with sun and skin care; not only for the latest trends but also for figuring out what ingredients separate the gimmicks from the good stuff. I found that the more I learned, the more products I’d find with a mix of good and not so good ingredients. After receiving a customized hair care system over the holidays I was curious to see what options there were for customized sun protectant, better yet customized sun protectant with skin care benefits. While there were quite a few options for skin care, some even offering sun protectant qualities in their products, I found that none of the products would protect against broad spectrum, UVA and UVB light. This is where my project began; is it possible to make a customizable sun protectant line that can shield users from the sun while simultaneously delivering skin care benefits?
I’d been looking for a project to allow me to stretch my creativity and employ the UI / UX skills I’d been learning on my own time for months when this idea popped into my head. While between freelance projects and my full time job I sketched, prototyped, user tested, (almost rage quit), user tested again, and designed to my hearts content to bring you SunCare.
Timeline 2 months
Tools Sketch, Invision Studio, Illustrator, InDesign, Photoshop
Role CEO, unpaid intern, and everything in between
Market research
Is anyone else feeling this way?
Brands like The Ordinary, Versed, and Kosas have had a huge spike in popularity during the pandemic which indicate an increased interest in no fuss packaging and ingredient transparency when it comes to a product line. I surveyed a few close friends to see how viable a customizable suncare line would be following this trend and how satisfied they were with already available suncare products. My survey yielded the following results-
Do you currently use sunscreen daily or in your beauty routine?
Is there a reason you do not to use a sunscreen in your daily or beauty routine?
Do you check ingredients in sun care products before you buy them?
Would you gift someone a personalized sun-care product?
Have you purchased or gifted other customizable products (ie hair care or skin care?)
Did you know the FDA only considers 12 active ingredients “safe and effective” for sun care products? (https://www.ewg.org/sunscreen/report/the-trouble-with-sunscreen-chemicals/#:~:text=The%20most%20common%20sunscreens%20contain,oxide%20and%2For%20titanium%20dioxide.)
While the majority of people I interviewed weren’t dissatisfied with suncare products already out there, they were open and eager for new opportunities.
Is there already a solution?
Although there are companies that specialize in customizable hair care and skin care, I haven’t found companies following the same approach for the sun care industry. A few sites such as Function of Beauty (hair care) and Y’OUR (skin care) both utilize a test for the user to find their perfect ingredients- this doesn’t solve my specific problem. Prose also offers a sophisticated design and user experience for custom hair care- but still isn’t in the industry I’m looking for. Most of these sites also cater to a specific audience, whether that be race or gender- I want Company name to be accessable to anyone interested in the products.
The concept behind these sites (bold, transparent information) did inspire the theme for Company name.
Identifying users and their pain points
There are several use cases to chose from
To better understand the needs of my audience, I developed two user personas.
Building SunCare
Laying out the features
I created two sitemaps based on my ideal user journey to plan out how the app would flow. Users needed to be able to create their own suncare.
Prototyping
Onboarding Flow
From here I started designing wireframes and incorporating visual design. I included an onboarding flow to quickly explain to the user how our site and products work. Features I included were ‘Next’ and ‘Skip’ options, page indicator to show how many screens there are, and consistent CTA. Once completing this flow, the user will be driven to the homepage.
Prototyping
Home Page, Product Page, and Navigation
Building from the checkout flow, I started creating outlines for how I wanted the rest of the site to look. My main focus was to create a seamless homepage, product page, and navigation to guide the user. In my first iterations I found I had too much going on; because I’m only focusing on 5 products that really opened up what I could do and how I could play with the site. I also wanted to focus on interactions and how I could streamline the process by using certain toggles and hovers for important information.
Homepage
Product Page
Product Page toggle
Hamburger toggle
Ingredient List
Ingredient Page
Prototyping
Quiz
Here you see a few of the question pages from our quiz. I wanted the flow to be simple, consistent and intuitive. I also took a look at the types of questions I was asking and adapted the answers to either A). drive to the next page when tapped or B). if a multiple choice question, including a ‘Next’ option to allow the user to select multiple answers.
Prototyping
Checkout Flow
As one of the most important flows in this project, I spent a while figuring out how I’d like this flow to look and feel. One of my mail goals for this flow was for users to understand how and why we chose their ingredients and from there drive them to checkout. Through these screens I made sure to included toggle options for the user to explore their ingredients and how they help with the goals selected in the quiz.
Info Page (Default)
Info Page (Toggle)
Cart Page (Deafult)
Customized Product Page (Default)
Customzied Product Page (Toggle)
Cart Page (Toggle)