Ubiquinol Design System

A fresh perspective on refreshing drinks

Project Summary
I was tasked with creating a design system leverage a technical design system built in Pattern Lab to handle the frontend framework for the new site
Foundations, Components, Micro-interactions

New Age Beverages
The Problem
New Age Beverage’s online presence was disjointed and spread across multiple websites.
Project Goals
•  Understand the variety, similarities and differences of various frontend component types on the current site.
•  Create a working visual catalog of different component types to be implemented in the technical design system in Pattern Lab
•  Assess the need for overall redesign support to modernize components and improve responsiveness and/or accessibility across the site
The Process
Heuristic Evaluation & Competitive Analysis
We conducted a comprehensive heuristic evaluation to identify usability problems and common pain points on the company’s current websites. We also conducted a competitive analysis to take a closer look at the competitive landscape within the beverage industry. We looked at companies with a similar product offering and website structure and honed in on a few key pages.
New Age Beverages — Competitive Analysis — Dr Pepper Snapple Group

Dr Pepper Snapple Group

New Age Beverages — Competitive Analysis — Bai


New Age Beverages — Competitive Analysis — Naked Juice

Naked Juice

New Age Beverages — Competitive Analysis — Lipton


User Flows
We created a high-level user flow to show how site visitors would navigate through the site, find products, add products to their cart, check out, log in and create an account. Site features and functionality were also outlined for each page type.
New Age Beverages — User Flow
Wireframes were created for several of the site’s key pages to show the types of content on each page and how that content could be arranged to optimize the user journey, organic search results and the overall user experience.
New Age Beverages — Home Page Wireframe

Home Page Wireframe

New Age Beverages — Product Type Landing Page Wireframe

Product Type Landing Page

New Age Beverages — Product Category Page Wireframe

Product Category Page

New Age Beverages — Product Detail Page Wireframe

Product Detail Page

We crafted a few high-level concepts before scaling the design to all of the site’s page templates. This saved us some time and allowed the client to get a feel for what the completed website might look like. For these, we focused on how the home page would appear on a desktop device. We utilized the company’s current branding and visual assets to produce three concepts loosely based on the wireframes created earlier. We also used findings from the competitive analysis to inform our design decisions.
New Age Beverages — Home Page Concept

Concept 1

New Age Beverages — Home Page Concept

Concept 2

New Age Beverages — Home Page Concept

Concept 3

I experimented with various ways to showcase the company’s diverse product line, combining product photography, lifestyle photography and stock imagery in a variety of ways. I even added textures to the cans and bottles to simulate condensation. Ultimately, the client decided to have their marketing team re-shoot all of their products from a top-down perspective using real fruit and other ingredients. Here are some of the various hero images I created for each product line:
New Age Beverages — Marley One Drop Hero
New Age Beverages — Búcha Hero
New Age Beverages — Xing Tea Hero
New Age Beverages — Coco Libre Hero
After this phase, the project was passed off to other members of the design team where the final, client-approved concept was scaled to all key page templates for both desktop and mobile devices.
Results & Lessons Learned
We consolidated New Age Beverage’s full product line into one “mothership” e-commerce website that will be able to accommodate an ever-changing lineup of unique beverages. The user journey, visual design and messaging were all optimized to provide a solid user experience on both desktop and mobile devices—essential for any modern e-commerce site.
Lessons Learned
•  Design is subjective. Your vision may not align with the client’s. Have a conversation about project vision before work is started.
•  Conduct a Branding Analysis. Take a closer look at the company’s current branding, social media presence and visual assets.
Interested in hiring me for a project? Get in touch!
Back to Top