LiquidLab

A responsive web app for juice lovers

 
 
 
 

Goal

Provide an inclusive, simple and informative shopping experience by building a responsive web application that solves the problems associated with getting personalized juices. The goal is to encourage indecisive consumers who aspire to live a healthy lifestyle to choose LiquidLab instead of its competitors.

 

Strategy

"Liquid Lab" is a brand new app that prioritizes the need of the audience and understands users goals and preferences in taste by allowing them to make their own selective and customized juices and smoothies.

 
 
 

Target Audience

People between 25 to 45 years old who value a healthy lifestyle, natural alternatives to pharmaceutics and prefer quick store pick-ups over long waiting lines.

 

Users' NEEd

Users need a simple labeling that describes the purpose/use of the product. They are also attracted to unique and engaging layouts that is not overwhelming.

 
 

Competitors

 
 

Strenghths

  • Refreshing and welcoming color palettes and images
  • Immediate call-to-action guiding the customer directly to their
  • Easy to recognize icons
 
 

Weaknesses

  • Cluttered UI and heavy content design
  • Poor use of hierarchy and contrast across elements on the page
  • Affordances for guidance is missing 
 

MOOD BOARDS

 
 
 
 

Moodboard 2

 
 

Moodboard 3

 
 

Hand-drawn wireframe sketches

 
 

I made hand-drawn sketches of the "Landing" and "About us" pages. Throughout this process, I could capture my creative spark and save time by reducing the number of revisions.

 
 

Digital Wireframe Sketches

 
 
 
 
 

lo-fi compositions

 
 
 

color Exploration

COLOR SCHEME TEMPLATE

 

Color palette considerations: 

  • Vibrant, high contrast colors
  • Luminous colors support the bold, natural colors of ingredients
  • Bright & stylish but not serious
 

 

Typography

 

Typography considerations:

  • should be usable and accessible
  • must convey the intelligence of the brand
  • should match other elements of the page (style, imagery, content, layout)

 

 

Style

HIGh FiDELity Prototypes

 

The hero section went under so many constructive changes before I came up with the best solution.

 

Responsive Design

 
 

Desktop vs. Mobile                                   

 
 
 
 

Watch the following short demo