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