LiquidLab Visual Design

Image of Laptop Mockup for LiquidLab Website

Project Overview

This was a project at the Visual Design course at General Assembly to create a website design for the health drink client, LiquidLab. The website design incorporated visual design principles I learned during class including Gestalt principles of perception, color scheme, typography, visual hierarchy, contrast and balance.

Objective: Establish LiquidLab as a healthy and customizable premium juice supplier and increase Liquid Lab’s membership.

Strategy: To convince health-conscious, urban, upper-income people to improve their health by joining and trusting the LiquidLab community, instead of choosing an alternative, because LiquidLab offer superior quality, health benefits, customization, convenience, and locally-source products.

View Final Desktop Visual Design

View Final Mobile Visual Design

Visual Design Process

  1. Create personas of the client’s target audience
  2. Conduct competitive research to ensure the client’s brand is distinct
  3. Create mood boards to explore different look and feel styles
  4. Use grayscale low-fidelity designs to examine layout options with Gestalt principles
  5. Develop various color schemes possibilities
  6. Create low-fidelity designs with color
  7. Finalize primary and secondary colors scheme
  8. Select typography and button styling
  9. Built high-fidelity final designs for desktop and mobile
  10. Gave a client presentation

Step 1. Personas

Using the client’s information about their target customer base, I created personas to keep in mind who the audience is throughout the entire design process.

Image of Persona for LiquidLab

Step 2. Competitors Research

To understand the design styling competitors in the same industry were using, I conducted a competitors research analysis. This helped me generated ideas for how content might be displayed on the website as well as ensure that the LiquidLab branding is distinct from the competitors.

Image of Competitors Analysis for LiquidLab

Step 3. Mood Boards

I explored 3 different look and feel styles through mood boards. These mood boards later gave me ideas for possible typography and color scheme choices later in the design process.

Earthy and Green

Image of Earthy and Green Moodboard for LiquidLab

Friendly and Approachable

Image of Friendly and Approachable Moodboard for LiquidLab

Smart Design

Image of Smart Design Moodboard for LiquidLab

Step 4. Low-Fidelity Designs Without Color

With an understanding of the content the client needed on the website, I created low-fidelity designs to explore possible layouts and interface elements. These designs were created with the visual Gestalt principles to help the user better understand the information on the page.

Step 5. Color Schemes

These are the 6 various color palettes I explored as potential options for LiquidLab.

Image of Various Color Scheme Sets

Step 6. Low-Fidelity Designs With Color

Combining the grey-scale low-fidelity designs with the different color palette options, I created design layouts that incorporated color. During this process, I explored potential options for the main background color, section background colors, text colors, and layouts.

Step 7. Final Color Scheme

I chose the monochromatic green color palette to signify LiquidLab’s healthy and natural branding while giving LiquidLab a clean and distinct look from its competitors. Red shades as the secondary colors are used as strong accents to draw the reader’s attention to key elements on the website.

Image of Selected Color Scheme for LiquidLabStep 8. Typography and Button Styles

After considering various typography combinations, I chose Alegreya for the headline and Open sans for the subline and body copy. This typography combination ensures high readability while giving LiquidLab an intelligent and sophisticated look that would appeal to the target audience.

Image of Typography and Button Styles for LiquidLab

Step 9. Final Visual Designs for Desktop and Mobile

Putting together the color scheme, typography, button styles, and copy content for the homepage, I created the final designs for both the desktop website view and mobile website view.

 

Image of Laptop Mockup for LiquidLab Website

View Full Desktop Visual Design

 

Image of Mobile Website Phone Mockup for LiquidLab

View Full Mobile Visual Design

Step 10. Client Presentation

I gave a 10 minute presentation to explain my overall visual design process that led to the resulting final designs above. Here are my presentation slides for download.

View LiquidLab Presentation