PortfolioYourSkin: Personal Skin Care Advice

YourSkin: Personal Skin Care Advice

★ Project duration Two weeks 
★ Team 3 people (Maria Arranz Domínguez, Elena Ilyuk, me) 
★ Tools Used Figma, Illustrator, Figjam, Trello

Finding the perfect routine that fits your skin is hard: especially during a time where millions of products are available, millions of review videos can be found on YouTube – and when your skin is constantly changing due to hormones, different lifestyles or external factors such as the weather circumstances.

This is why, for this project, we decided to work on an app that offers skin care advice and personalized routines. Our final product would be a new mobile app designed to support and improve behavior around skin care, and a landing page to illustrate the benefits and features.

Interview, research, order, cluster, find out, conclude

First of all our task, was to find out people’s motivations to use such an app. What are their reasons to buy online or offline, what are their  current skin routines and problems, what are their general preferences when having to choose one or another type of routine or procedure, etc. To get all this information, we performed 5 interviews and got 23 answers from our survey.  

We started off with the Lean Survey Canvas to check what information we wanted to know, and afterwards we grouped  and ordered all the information we received from the interviews and surveys.

Our team organized all the information into an Affinity Diagram according to the topics mentioned during the surveys and interviews.  And here we saw a huge number of different opinions. 

Some of the customers trust only defined brands, others trust previous customers’ opinions. But almost all of them buy their products online because they can review these opinions. And one more point: all of the people we interviewed confirmed that they track their skin state in some way or another, but 100% consider the price when buying.

Affinity Diagram

Main points and conclusions from our user research where as following:

Our user prefers to buy cosmetic products online, because they rely on (online) reviews 

 Our user prefers less steps for a treatment

 Our users like to track their skin state and stay up to date

 Our user are mainly guided in their product purchasing by a) prices and b) ingredients

Find the problem and get to know our user

Based on our research, we came to the following problem statement:

Our skin care advice app should be designed to achieve save time and money while recommending personalized products with the right ingredients and needs. We have observed that finding the right skin care routine is time consuming or really expensive, which is causing people to not apply the right treatment to their skin.

To really get our problem statement to come to live, we created a persona and a corresponding empathy map.

So, meet Sofia! Sofia is a 26 year old woman that is going through something a lot of women in their twenties / thirties are struggling with: she recently got off the pill and now her skin is changing. 

She doesn’t feel that comfortable anymore, and she’s looking for a new trustworthy routine, that doesn’t cost that much and fits exactly what she needs. 

Sofia is a symbol for our general user, and therefore we already found or key indicators for a succesful skincare routine app: it should save time, money and should empower girls like Sofia to feel self-confident within their skin and while performing their skincare routines.

To stimulate user trust, we should also make sure to be careful in using influencers and before/after photos. These kinds of content will most likely decrease the amount of faith Sophia will have in our app and brand.

Click to read text
Click to read text

Now that we know Sofia, let’s take you to her journey as a user of our app. 

At first, Sofia’s a bit blue. She doesn’t feel comfortable with her skin, which changed a lot due to hormonal changes.  She has no idea what to do and how to start to solve these problems, because she doesn’t want to free time and money to visit a specialist.  A lot of her research therefore happens through Google, her friends and influencers. But: there is so much to choose from. How do you know that works for a friend, also works for her?

Eventually, she reads some good reviews on our app and gives it a chance by a download in the app store. She feels hopeful, and finally feels happy again. 

When she takes the face scan and the questionnaire, she is still quite happy, because she feels that the app has a professional and empowering approach. 

However, she still needs to see before she completely believes.

Our competitors

Discussing the possible paths to follow, we all agreed that our app should save not only money, but should also save time for the potential user.

We have to offer everything that our competitors offer, and more – all in one place. However, we also need to take into account that we should focus on mainly one problem to work on. We can’t solve all the problems at once!

 

Eventually, we decided that our best solution would be to offer our users personalized products with the right ingredients, according to their skin problems.

Speaking about our competitors, like My Skin Track, Feeling My Skin, Skin Theory, or Skinary, we can see that they offer a lot of tracking options. However, only the last one offers more personalized routines. Having this point in mind, we moved on to the next steps.

Creating an overview and finding the best features

Afterwards, we decided on our features using the Moscow Method –  a prioritization technique used to reach a common understanding with everyone who is involved in the process.

Here we voted on prioritizations for different features within our app, such as the skin scanning feature, the daily tracking and potential sharing options.

Must Have
▸ Ability to track habits and goals
▸ Dashboard data visualization
▸ Skin scan feature (taking a photo)
▸ Profile set up including important information and goals
▸ User / Product reviews
▸ Ability to upload photos
▸ Option to buy direct from our app

Should Have

Questionnaire with relevant skin questions
▸ A clear accessible answer summary
▸ Maximum 5 products per treatment when offering relevant products
▸ Proof of trustworthiness
▸ Explanation of the company

Could Have

▸ Product discounts
▸ Daily track of high impacting things (e.g. smoking, coffee, water)
▸ FAQ list
▸ Reminder notifications
▸ List of skin issues and ability to choose them to be treated or not
▸ Sharing options

Should Not Have

▸ Advertisements
▸ Obvious marketing
▸ Usage of influencers
▸ Before/after photos from other users

Drawing, testing and iterating

Afterwards, it was time to – a little confession: my favorite part –  go to the drawing table!

We first did a lot of sketching. And with a lot, I mean a lotWe decided to all draw some lo fidelity prototypes, based on the before established sitemap and Moscow method table.

Next, we went through these prototypes and decided the best and worst parts of all the pages and features we came up with together. 

This way, we could easily filter out the best way of putting all our research into practice.

 

Now that we had the visual idea of our future app, we put everything on digital paper – our mid fidelity prototypes!

Below, you can see a few screens we designed for the mid fi. To test this prototype, we sent our app for testing on the Maze platform. 

With 24 testers, we eventually got quite a good overview of the things we would need to iterate on. The testing in Maze led to a few main points:

1. It is not clear that you have to take a photo

2. It should be clearer what buttons are clickable and if yes: user feedback to see if it is clicked

3. We have to better visualize what products are recommended for the user’s skin

Thanks to this feedback, we could redesign the mid fi to make the screens more understandable and intuitive for the user.

To give you an idea of the iterations we made, you can see two examples below.

In the first version, we didn’t really explain anything about the face scan. So we added some extra copy to explain the goal, and what the user had to do.

The next iteration was about the ‘recommended for you’ button. 

We first thought just a ‘☺︎’ would be enough to illustrate that this would be a recommended product for a user. 

However, this was not the case. Again: you are clearly not your own user. Therefore, we had to options:

1. Explain somewhere that a ‘☺︎’ means that a product is recommended for you

2. Change the ‘☺︎’ into the text ‘recommended for you’

We decided to go for the second option, to keep the amount of pages and extra information for the user to take in to a minimum.

Finding a visual identity for our brand

Before going to the hi-fi,  we needed to get some ideas about the  visual branding part. Therefore, we first thought about what we wanted our brand to convey.

After a brainstorm, we went with the following terms: inclusive, trustworthy, radiant and natural.

Besides, we also wanted to compare our competitors on the visual side. For this visual competitive analysis, we checked or 3 main competitors: Skinnary, Feelinmyskin and SkinTheory.

The most matching factors we saw for our competitors were: a lot of blue / medical tins, many round forms and a lot of contrast.

To test a color scheme and general visual vibe for our brand, we tested three different moodboards with the following question: which moodboard do you associate most with being inclusive, trustworthy, radiant and natural?

With 64% of the votes, the third moodboard really stood out. So this is where we went with!

Finally: the high fidelity prototype!

After a lot of hard work, a lot of research, a lot of fun with the team and a lot of sketched (oh, and also – a lot of coffee): we finally created our interactive high fi!

You can see the click-through in the video below, but I will also walk you through it verbally below the video. In the eyes of our grateful and always willing to work persona, Sofia Velasquez.

1. This is the first time Sofia sees the app, so we don’t have an account yet. I press “don’t have an account” and I land on the onboarding proces. Let’s start the process!
2. First, she selects her goals. Sofia, for example, wants to track my habits and get a clearer skin.
3. Time for the face scan! Sofia open the camera and take sa photo – the analyzing starts.
4. Now the app is going to get all her data together, so she just has to wait a bit. This way, YourSkin can find the best products and match our skin situation with our goals.
5. Sofia’s results are in! She can see how, among others, our acne, pores, sun damage and hydration levels are.
6. She fills in some personal details: she’s 28 years old, a female, and my skin is normal.
7. Sofia fills in some personal details to be able to receive the data summary in her e-mail.
8. There’s a surprise! Sofia receives 5 free samples so that she can test if the recommended products work for her.
9. She opens her e-mail and finds the e-mail from YourSkin. Here she sees her skin analyzed, the recommended products and a link to create my account, so she does so.
10. Sofia’s account is created! Now she can log in.

 

11. To show you all the features, we’re just gonna pretend that Sofia’s has been a member for a longer period of time. You see the results of her tracker right in the home menu. She can fill in her tracker and save her data.
12. When she clicks on the calendar, she can see the details of the previous tracker updates. For example the 9th is marked red, because Sofia didn’t sleep well or performed her advised skin care routines. Whereas on the 19th, it’s green! That was a good day for Sofia’s skin 🙂
13. Now we’ll go to the face scan part. The face scan process goes exactly as in the onboarding flow, but now we can add comments and rate the current state of our face.
14. Up next: Sofia visits the webshop! She can see the products that are recommended for her, based on her skin scans and tracker. So if Sofia for example clicks on the Clarins Gentle renewing Cleaning Mouse, she sees a warning: not recommended for your skin! Not what she wants of course, so let’s go back.
15. Sofia filters on “recommended for you” and she goes to the Cleansing Foam Extra Soft. She can check the reviews, and can go back up, she can buy a tester or the full size. Sofia will now buy a full size and goes to the shopping cart.
16. There she just clicks confirm and she automatically receives a confirmation, because her personal details are already in her account, as we can see from the main menu.

Conclusion, learnings and next steps

Overall, I really loved this project. Doing everything from UX research, user flows, visual design and the final high fi prototype was absolutely a challenge, but a really fun and educational experience.

Of course, iterating on the high fi and the overall process, there are some things that can be improved.

Most and foremost, we can definitely improve the solution by offering more detailed questionnaire at the beginning of the onboarding flow. Besides, we should also make it visually more clearly that you can also buy a pack of products, as being a direct morning or night routine.  

So not just only a product list to buy, but perhaps directly  show an adapted pack of 3 products for one specific skin issue such as acne or dehydrated skin. Next, when the skin issue is solved, the user should be able to easily offer a changing feature for the products. 

However, I’m still very proud of how we worked together as a team and how our final product turned out. 

Thanks for taking the time to read this full case study, I hope you enjoyed it!

Scroll up

No posts were found for provided query parameters.