Desktop & Mobile UI Prototypes

This General Assembly Visual Design project challenged us to create a single “long-scroll” style landing page and responsive mobile version for iPhone 8. The design was based on a creative brief provided for us which outlined LiquidLab, a boutique and privately owned cold press juice company whose primary audience, of mainly professional women aged 30-45, are health and nutrition conscious. The company will share information on healthy living, nutrition, and focus on body positive messages. Long term healthy living and diet adaption/augmentation is the core goal.


Step 1: Project Goal & Strategy

This exercise was meant to distill from the provided creative brief what is the company’s main objective and strategy. This first stage of the project aided me in better understanding LiquidLab’s goals and who I was designing for.

Objective:

Create customized nutritional juice options for a health-conscious demographic.

Strategy:

Cater to user’s needs by providing daily routine of healthy, locally sourced juices customized for their lifestyle and goals.


Step 2: Brand Keywords

As a group of a designers, we brainstormed a list of keywords from the creative brief. This involved pulling descriptors from the brief and adding our own words (adjectives and nouns) that best fit the company’s goals and target audience.

Produce
Sophisticated
Vibrant
Modern
Customized
Cosmopolitan
Local
Lifestyles
Intelligent
Feminine

Healthy
Juice
Diet
Fresh
Body positivity
High end
Nutrition
Easy/convenient
Tasty
Yoga & Exercise


Step 3: Mood Board

In creating the mood board I strived to envision the key words pictorially, while focusing on images that put forth the feeling of freshness, nutrition, and vibrant juices and produce. While the final project did veer in some ways from this original mood board, I believe the essence of the chosen images, illustrations, and color scheme carried over and helped in defining the final look.

Liquid_Labs_Mood_Board.jpg

Step 4: Hand-Drawn Wireframes

sdfsdfsdfsdfsdsdfdsfsdfsdfsdfds

LL_Mobile_HD_Wireframes_Small2.jpg

Step 5: Digital Wireframes

sdfsdfsdfsdfsddsfsdsdfsdfsd


Step 6: Style Guide

asfaasffffsdfsdfsdfsdfsdfsd


Step 7: Desktop Design

sdfgsdfgsdfgdsfhsdfhsfg

Main_Scrolling_Modules1.jpg