Mauve

Inspiration

Growing up, my older sister always gave me skincare advice—"don't touch your face so much", "wash your face in the morning and at night", "APPLY SUNSCREEN EVERY DAY". However, not everyone has that access to skincare from such an early age. I wanted to make an app that would act as big sister to everyone.

What it does

Makes skincare more accessible through an interactive quiz that curates a simple skincare routine with them. Suggests products based on skin type, skincare goals, and price range. Also provides tutorials, skincare tips, and more to h

How we built it

I first started with initial sketches on Procreate and GoodNotes. I then moved onto low-fidelity wireframes that I imported into a Figma file. From there, I built the necessary components for high-fidelity wireframes. After building all the elements, I created the interactions to create a working prototype. I also created a typographic spinning logo in Adobe After Effects to incorporate into the loading screens.

Challenges we ran into

The scrolling feature to show the suggested products and tutorials on the last screen was confusing to work with because I wanted to create a vertical and horizontal scroll interaction.

Accomplishments that we're proud of

The interactions in the prototype look like a realistic, working application. Additionally, I was able to learn how to integrate simple animations into the interface.

What we learned

The scrolling functions and how to use layout grids.

What's next for Mauve

I want to include a habit tracker and rewards system to encourage users to maintain a skincare routine. Furthermore, include a feed page that has articles and tutorials for people who want to learn more about skincare.

Built With

• figma