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
Role
Foundations, Components, Micro-interactions
Year
2018
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
• 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.
Dr Pepper Snapple Group
Bai
Naked Juice
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.
Wireframes
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.
Home Page Wireframe
Product Type Landing Page
Product Category Page
Product Detail Page
Concepts
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.
Concept 1
Concept 2
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:
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
Results
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.
• 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!