Hello
Beauties!

Track Your Beauty Goals

CASE STUDY

iOS/Android Design
UI Design
UX Research

OVERVIEW

This project more than the app itself is an exploration of the differences between iOS and Android devices. The UI design, the interactive gestures and even the standards set by iOS and Material Design processes. As a Apple user, I have never encountered a Android device and so it was challenging to switch my thinking and style to match some Android elements.

This app is for all users who are interested in skincare, haircare, and body products. However, it is not an E-commerce app. It is specially geared towards those that are wanting to shift in to more clean products or who are already in the know and are looking for more help. It is for all ages and genders.

Artboard 1_edited.png

OBJECTIVE

This app happened because of my personal challenges with my skin. I wanted a way for users to have a platform where they learn, share, and educate about beauty.

According to one leading skincare company, skincare purchases should be based on education not impulse. I wanted to create a easier way to, a platform where they can take educated decisions. The app also has a diary feature that users can use to log their beauty products and track any changes.

APPROACH

I wanted to do my best tp lessen the confusion a customer goes through when making a purchase. The user can get the most optimal experience once the user profile is complete. Users can browse without inputting anything but the app will help give more suited recommendations based on what is saved for your skin or beauty goals.

Artboard 9.png

USER FLOWS

1

2

3

4

Artboard 10.png

FLOW DIAGRAM

iOS MID-FIDELITY WIREFRAMES

Primary, secondary and edit screens

DESIGN ELEMENTS

Artboard 12.png

I used rounded and solid fill shapes for thee buttons to adhere to the iOS design standards

TYPOGRAPHY

I stayed with the iOS typeface which is San Fransisco. Since iOS has much stricter guidelines, I decided to not use custom typefaces.

ANDROID MID-FIDELITY WIREFRAMES

Primary, secondary and edit screens

Primary Screens

Artboard 12.png

DESIGN ELEMENTS

Here I changed the buttons to flat squares with a slight shadow that we see in Android.

TYPOGRAPHY

I decided to go with Roboto a pretty sans serif typeface. I wanted consistency of a clean and clear loook.

MOBILE GESTURES

iOS and Android transition gestures

TAP

HORIZONTAL SCROLL

TAP AND HOLD

VERTICAL SCROLL

iOS

Artboard 13.png

ANDROID

Artboard 13.png

MOBILE DESIGN

iOS and Android design elements

I studied the iOS and Android design kits to understand the differences between key elements. I tried to keep as native to the devices as possible but still kept custom graphics (iconography) and color palette.

Artboard 4.png
Artboard 7.png
Artboard 2.png
final mockups.png