Milk Makeup Contest

The design process for creating a microsite for Milk Makeup.

Links to the Interactive Prototype

Desktop

Mobile

About

This a school project where we were told to create microsite Contest Page for an existing brand or our own brand. I chose to do it for the company Milk Makeup. Milk Makeup is a vegan based cosmetic and skincare product company. The products they sell are vegan, paraben-free, and cruelty-free.

My Role

I led the Projects User Experience (UX) and User Interface (UI) - of this project. I also receive constructive feedback from my trainers on what I was designing. 
Mains task
1. Ideation and Narrowing down the Persona
2. Steps to Build the Project
3. Planning and Defining 
4. User Interface & Experience

The Challenge

The high-level goals were to:
1.  Create a reward program for Milk Makeup users to allow frequent Makeup users to showcase their Talent. 
2.  Take into account what to present as the rewards, and how to inform the users of the steps for participation.

Design Process

The first step of the design process was to choose the company and the problem I will be trying to solve for them. The company I chose is Milk Makeup and the problem is that their skincare products don't sell as popular as their makeup products. This will be solved by creating a contest, with the reward of the users winning skincare products. This is an important step before going on to define the next steps of the project. After concreting on this idea, the process involved in defining our persona, and analyse how competitors and users behave to allow to move on to prototyping.
 
After analysing these insights, I began to work towards the solution, by creating flow charts and wireframes to give me clarity on how the user will interact. From this I went on the production mode, designing the interface by narrowing down the colours, type, action buttons and going on to create the final prototype with keeping the design principles 
in mind. 

Concept

The concept of this project is that People submit their Makeup looks with Milk Makeup on, and based on how many likes they get on Instagram, they Win Milk Skincare Products.   

Persona

Knowing your persona makes your data stronger. The project is created for people who are Millennial Girls and Guys. They follow Makeup Trends, Show of their makeup talent on social media platforms and inform people what's good on their skin.

User Flow

flowchart-01.jpg

Wireframes

The Wireframe was designed to build the structure and architecture of the way the information, visuals and interactions will be displayed. I decided to concentrate on five primary screens. 
These are the wireframes for the Desktop and Mobile website.   

wireframes.jpg
wireframes-01.jpg

Style Guide

Aarti_StyleTile_2.jpg

I wanted to ensure that the colours were on the line of Milk Makeup’s website. Therefore, I kept the colours and fonts simple and streamlined. The colours that were picked up were young and bold. The colour yellow was picked to give some contrast and give the page a certain pop. 
For the Heders, Sub Headers, call to actions black and white were mostly used to give the look of boldness, and for easier readability. 

Since Milk Makeup products want to sell to the persona of being trendy to Millenials using a bold text was a good choice, therefore sans-serif fonts were used. 

Prototype: Desktop and Mobile

The screens were designed to have a responsive functionality for desktop and Mobile.I also created an Invision Prototype for them. 
These are the links to the Prototype- 

Desktop

Mobile

NEXT STEPS:

This project was a great way to further explore principles of information architecture and the art of distilling complex information into simple flows with labelling, navigation, and organization systems.

 

With more time, I would revisit the functionality of giving more concrete steps to participate in the milk makeup contest, perform more usability tests. I would also improve the UI design for mobile. 

View Projects