top of page
Decoda mockup banner.png
icon fill.png
Mobile app case study
INTRODUCTION

Decoda is an app that helps its user manage skincare routines and receive information about the products they use.

This case study was part of a UI learning exercise during which I researched, designed and illustrated the app and logo while creating the optimal experience for its users.

THE CHALLENGE

In a world where skincare becomes more and more popular and part of our daily routine, users have no way of managing what products they use and for what purpose. They have minimal information about what actually goes into each product and if they actually work.

MY SOLUTION

Create an app that allows its users to create their own routine, research each product before buying it and review the ingredients and their concentrations, making searching for relevant products easier and allowing them to create smart decisions about their skincare as well as maximizing the results.

THE PROCESS

I started this process by searching for existing websites and apps that offer similar functions, as well as styles common within this section.

As a person who takes skincare very seriously, I knew the approach i wanted to take was one of functionality without compromising on the clean look and feel.

The first step was was research, during which I worked with a lean canvas to map out the ideas and components.

After getting the general ideas mapped out, it was time to build the wireframes.

DESIGN LANGUAGE

Once the wireframe was done, I went on to creating the design language of the app. 

That included creating the logo and color palette, to make Decoda distinct, beautiful and accessible.

#BC88ED

#7FC9A2

#FFFFFF

splash.png
COMPONENTS

The design language reflected the different aspects of skincare and creativity, the purple being the call to action, as a more lively color, while the green is more commonly used for natural products, medicinal products and more. 

onboarding 1.png
onboarding 2.png

One problem I encountered while working on the wireframe was that a lot of information needed to reach the user without causing too much noise for the eyes.

 

And so every description is concealed with a designated button to show more information. This allowed for a more coherent reading and the ability for the user to read only the information relevant to them.

sign in.png
home page new.png
ingredients.png
onboarding 3.png
update my routine.png
glycerin.png
THANK YOU FOR VIEWING
bottom of page