BREW STATS

Data visualization, UI/UX, and motion graphics

Objective

Data Visualisation Exercise

I chose craft beer. After taking a trip to a brewery to see how beer is made, I starting learning more about the craft beer industry. I was surprised by the amount of information available and came up with this concept to make it easier to learn about craft beer.

Client

New Media Design class project (individual)

Role

UI/UX design, User Flows, Information Architecture, Concepting, Storyboarding, Motion Graphics, and Video Editing

Project duration

12 weeks

Part 01: The APP

01 Overview

Research

Today, more than half of craft beer drinkers are under 35 years old.

This demographic is new to the industry and a majority will use phones for information prior to purchase.

How can a brewery stand out and reach this younger target demographic?

Solution?

Bring the information to the user.

This interactive app can both serve to inform the audience, while also acting as an interactive marketing tool to spread brand awareness and inspire loyalty.

Objectives

Inform

Using interactive timelines and maps, inform the user of the basic ins and outs of the industry.

Connect

Break down the vast information into simpler, more entertaining methods - taking the opportunity to show how your brand compares/exceeds.

Gain

By helping them feel comfortable and confident in this new area, gain their trust and interest to try your product.

02 The User

User Stories

The New Networker

Gain experience and confidence in a new area. Many networking events and opportunities take place in areas where beer/drinks are served. Knowledge of beer will help give you something to break the ice.

Date Night

Young 22-year college student, Sal, is going on a date. They are meeting at a bar and grill. On the ride over, Sal decides to look up potential beers to make sure he doesn't embarrass himself by picking something he doesn't like or from looking too indecisive.

User Journey

Information Architecture

03 Sketches

Layout & features

After brainstorming some ideas out on paper, I refined the layout in a digital sketch in Photoshop. There are three main pages of the app - kinda like Snapchat. The middle would be the home/default state, which is where the primary information on finding/filtering beer is located. To either side is more information on the craft beer industry itself.

04 Mood & Inspiration

Mood Board

Cool

Fun

Warm

Inviting

Refreshing

Inspiration

Before choosing a solid direction, I looked into three different styles for inspiration.

Inspiration 1

Dark

Edgy

Tactical

Realistic

Inspiration 2

Flat

Simple

Clean

Symbolic

Abstract

Inspiration 3

Isometric

Playful

Clear

Crisp

Inspiration 1

Realistic

Inspiration 2

Simple/Abstract

Inspiration 3

Isometric

05 Wireframes

06 Animated Comps

Home

As I was working on my home page, I realized.... rather than scattering my beers all over the place, I could arrange them in a stack. Then it dawned on me - I had myself a flight.

History

The history portion begins with a brief timeline of the biggest events that helped shape the craft beer industry. As you scroll, fact cards and interactive timelines/infographics give you more information.

Facts

When I began researching craft beer, a lot of terminology was being thrown around. I wanted to consolidate and create a way for users to search for search commonly associated with craft beer. This page also includes helpful tidbits and information, such as how to properly pour beer.

A closer look at data visualizations

Filtering your flight

As I was working on my home page, I realized.... rather than scattering my beers all over the place, I could arrange them in a stack - just like a flight of beer.

A glass full of meaning

Rather than your typical bar graph (though a bar does sound quite fitting), I took my visualization one step further by using the filling of a glass as a percentage tracker.

Part 02: The Commercial

01 Storyboard & Sketches

Storyboard

Learn. Find. Enjoy.

I broke my commercial down into 3 main parts when storyboarding. The first section focuses on the educational/learning aspect of the app. The second section shows how you can apply this information to actually find beer. This leads to the last section - enjoy.

Some additional sketches

The next few sketches focus on transitional elements and micro-interaction exploration.

02 Inspiration

Bold. Clean. Colorful.

A majority of the beer/alcohol commercials I watched tended to be bold, colorful and have a strong sans-serif font. I tried to recreate some of the different styles, effects, and camera shots with my commercial as well.

03 My Style Frames

Summary

Find, Learn, Enjoy.

Helping the younger, newer craft beer consumers know and enjoy beer better.

The commercial highlights the strengths and objectives of the app, which is to help the user find, learn, and enjoy beer better. By providing the tools, we can establish a sense of confidence and a knowledge within the user.