beer mode experience design documentation

7/28/2019 Beer Mode Experience Design Documentation

1/25


2/25

New Belgium Mobile App

APPLICATION LOADING

iPhone 10:15 PM iPhone 10:15 PMiPhone 10:15 PM

LOADING LOADING LOADING PERMISSIONS REQUE

iPhone 10:15 PM

Allow Push Notifica

Hear about New Beer Rele

OCancel

OK

LOADING

iPhone 10:15 PM

After downloading the New Belgium

Beer Mode application from the app

store, a branded icon appears on a

users home screen. Upon tapping the

icon, the application begins the loading

process.

The loading process will incorporate elements of New

Belgium branding as well as visual references that help

users understand that the application is still in the

loading stages.

In order

applicat

commun

asynchr

users, en

notificat

encoura

+


3/25


4/25


LANDING CAROUSEL 2

BEER MODE

iPhone 10:15 PM

REMEMBEER CARD

Each card in the carousel has a primary call to action to

enter the particular section. Upon tapping the button,

users are taken directly to the sectional landing screen.

BEER MODE

iPhone 10:15 PM

BEERS NEARBY CARD




BEER MODE

iPhone 10:15 PM

THE BREWERY CARD




GET TO KNOW IT

THE BREWERY

LOOK AT THE MAP

BEER NEARBY

SEE WHAT I'VE HAD

BEER LOG

+

Swipe Left andRight to Explore.

NEW BELGIUMBREWERY


NEW BELGIUMBREWERY


NEW BELGIUMBREWERY

LANDING SCREEN CAROUSEL

BEER MODE

iPhone 10:15 PM

Upon entering the app, users are shown a carousel with

large cards that represent each section. By swiping

between them, users can access each part of the app.

SEE A SNEAK PEAK

EXCLUSIVE CONTENT


NEW BELGIUMBREWERY


5/25New Belgium Mobile App

MENU 1

BEER MODE MENU REVEAL

NOTES: Saccharification, hop back bung

pub. Shelf life cask conditioned ale.

THE BREWERY

BEER MENU

BEER LOG

BEER NEARBY

iPhone 10:15 PM

FAT TIRESUNSHINE WHEAT

RED HOPTOBERSNOW DAYBROWSEBEERS

BROWSE BEER MENU REVEAL

FAT TIRE

BEER NEARBY

BEER MENU

SUNSHINE

WHEAT

By tapping on the menu icon from

within each section of the application,

a user can access a global menu that

helps them to navigate between

different features.

iPhone 10:15 PM

BEER LOG

+

EXCLUSIVE CONTENT NOTES: Saccharification, hop back bungpub. Shelf life cask conditioned ale.

THE BREWERY

BEER MODE

BEER LOG

BEER NEARBY

EXCLUSIVE CONTENTNOTES: Saccharification, hop back bung


THE BREWERY

BEER MENU

BEER NEARBY

EXCLUSIVE CONTENT

BEER MODE

BEER MENU

9

iPhone 10:15 PM



THE BREWERY

BEER MODE

BEER MENU

BEER LOG

BEERS NEARBY MENU REVEAL

REMEMBEER?BEER NEARBYNOTES: Saccharification, hop back bung


THE BREWERY

BEER NEARBY

EXCLUSIVE CONTENT

BEER NEARBY

BEER MENU

BEER MODE


6/25New Belgium Mobile App

MENU 2

iPhone 10:15 PM

SPECIAL

EVENTS

NEW BELGIUM

CULTURE

THE MOTHERSHIP MENU REVEAL

EXCLUSIVE

CONTENT



THE MOTHERSHIP

BEER MODE

BEER MENU

BEER LOG

BEER NEARBY

THE BREWERY

+



THE BREWERY

BEER MENU

BEER NEARBY

EXCLUSIVE CONTENTEXCLUSIVE CONTENT

iPhone 10:15 PM

SPECIAL

EVENTS

NEW BELGIUM

CULTURE

THE BREWERY MENU REVEAL

EXCLUSIVE

CONTENT



THE MOTHERSHIP

BEER MODE

BEER MENU

BEER LOG

BEER NEARBY

THE BREWERY



THE BREWERY

BEER NEARBY

EXCLUSIVE CONTENT

THE BREWERY

iPhone 10:15 PM



THE BREWERY

BEER MENU

BEER LOG

BEER NEARBY

BEER MODE

ALL NEW RAMPART IPA!

CAMPAIGN CONTENT MENU



THE BREWERY

BEER NEARBY

EXCLUSIVE CONTENT

BEER MODEBEER MODE

BEER MENU

BEER MODE

BEER MENU


7/25


8/25


CONNECT TO NETWORKS

CONNECT SIGN IN

+

iPhone 10:15 PM

BEER MODE LANDING MESSAGE

YOU ARE NOW IN BEER MODE.

ADIOS, TEDIUM!

iPhone 10:15 PM

CONNECT TO FACEBOOK BEER MODE LANDING MESSAGE

iPhone 10:15 PM


9/25


BEER MODE POST PREVIEW

iPhone 10:15 PM iPhone 10:15 PM

MENU HIDES AUTOMATICALLY SWIPE UP OR TAP TO REVEAL MENU

01:28:34

iPhone 10:15 PM

01:26:45

YOUR FIRST POST

Chop your own Wood and itWill Warm You Twice. Words ofwisdom to live by. http://bit.ly/dfi395df

That is a really insightfularticle. I don't reallyknow what Beer Mode...

COMMENT FROM JO MOORECOMChopyour ownWoodtwice.

of wisdomto live by.dfi395df

REPL

BEER MODE POST #2

Chop your own Wood and itWill Warm You Twice. Words ofwisdom to live by. http://bit.ly/dfi395df

BEER MODE POST #2

SWIPE TO VIEW BEER MODE POSTS

By default, the menu in

Beer Mode is hidden in

order to show off more of

the beer. By swiping up

or tapping the screen, the

menu is revealed.

Users can see the content that is being posted to their

social network by swiping through previews of each

post, comment, and reply that has taken place.

+


10/25


EXITING BEER MODE

BEER MODE MENU CANCEL BEER MODE


SLIDE TO EXIT

00:57:45

LANDING SCREEN CAROUSEL

BEER MODE

iPhone 10:15 PM


NEW BELGIUM BREWERY

WELCOME TO

SLIDE TO EXITWhen a user decides to exit their

Beer Mode session, they are forced

to complete an elaborate spoof on

the typical 'slide to unlock' metaphor

found on iPhones by moving the

slider along a convoluted maze.

After exiting Beer Mode, users are

returned to the landing page

carousel shown on the launch of the

application.

+

iPhone 10:15 PM

SLIDE TO EXIT

Are you sure you're ready

to use your phone, pal?

YesCancel

Yes

If a user has remained on the exit

maze screen for 15 seconds without

successfully completing the maze,

they will be prompted with this

dialog window.

CONFIRM CANCEL


11/25


BEER MODE AUTO POST, COMMENT, AND REPLY +

POST + COMMENTS + REPLY WITHIN FACEBOOK

iPhone 10:15 PM

01:28:34

YOUR FIRST POST

I have to agree with RogerScruton, Lord Russell's AHistory of Western Philosophyis elegantsly written and witty...

COM

Chopyour ownWoodtwice.

iPhone 10:15 PM

01:26:45

Since when did youstart readingphilosophy?

COMMENT FROM KEVIN PECKHAM


YOUR

P OS T D IS PL AY ED W IT HI N B EE R M OD E C OM ME NT DI SP LA YE D WI TH IN B EE R M OD E

iPhone 10:15 PM

01:26:45

Sometimes you gottadeeper for the pony, m

YOUR REPLY


REPLY DISPLAYED WITHIN

Somdeep


12/25




iPhone 10:15 PM

01:28:34

YOUR FIRST POST

Head over to the Gin Tanktonight, kids. I'm playing bassfor Synchronized Whisper.Doors at 8.

COM


iPhone 10:15 PM

01:26:45

So... where the hell is the"Gin Tank?"

COMMENT FROM ALBERT BROOKS


YOUR


iPhone 10:15 PM

01:26:45

Nothing ventured, nogained.

YOUR REPLY



Somdeep


13/25




iPhone 10:15 PM

01:28:34

YOUR FIRST POST

Am I the only one opposed tothe utterly facetious rambling ofthe more extreme of theantidisestablishmentarians and...

COM


iPhone 10:15 PM

01:26:45

I think you're the onlyone who knows whatthat even means.

COMMENT FROM SARAH FAYE


YOUR


iPhone 10:15 PM

01:26:45

Keep talkin', sweet ch

YOUR REPLY



Somdeep


14/25


SOCIAL NETWORK DISCLOSURE +

HOW A POST LOOKS ON FACEBOOK HOW A POST LOOKS ON TWITTER

BEER MODE FACEBOOK PAGE


15/25


BEER MODE FACEBOOK PAGE +

APP PAGE ON FACEBOOK

BEER MODE

iPhone 10:15 PM


NEW BELGIUM BREWERY

WELCOME TO

DOWNLOAD

THE NEW

BELGIUM BEER

MODE APP

VIEW IN APP STORE

TIME SPENT IN BEER MODE

FEED OF BEER MODE POSTS

SYSTEM LOGIC +


16/25


SYSTEM LOGIC

Beer Mode can last for up to 2 hours in thirty minute increments.

A reply is added to the original post every 5 minutes.

1

Beer Mode will create a new post every 30 minutes.2

If a Beer Mode post has been commented on, up to 5 replies can be added to the original post.3

4

02:00:00 01:30:00 00:01:00 00:30:00

UP TO 5 REPLIES

01:55 01:50 01:45 01:4001:35

3 4 51 2

POST

01:25 01:20 01:15 01:10 01:05

3 4 51 2

00:55 00:50 01:45 01:4001:35

3 4 51 2

00:25 00:20 00:15 00:1000:05

3 4 51 2#1

POST

#2

POST

#3

POST

#4UP TO 5 REPLIES UP TO 5 REPLIES UP TO 5 REPLIES

+

BEER MENU + FILTERS

+


17/25


BEER MENU + FILTERS

iPhone 10:15 PM

MALT

HOPS

IBU

ABV

AGE

+-

CAL

iPhone 10:15 PM

SINGLE BEER

+-

ADJUST FILTERS CONFIRM FILTER FILTERED BEER BROWSE

FILTER BEER

iPhone 10:15 PM

SUNSHINE

WHEAT

FAT TIRE

BLUE PADDLE

1554FILTERMENU

iPhone 10:15 PM

RANGER IPA

1554

MENU2BEERS MATCH

Users can see the various beers that

New Belgium currently offers by

navigating to the Beer Menu section

of the application. In order to sort

the beers based on ingredients, a

user will tap on the 'filter' button.

FILTER After modifying the sliders that

pertain to each beer ingredient, a

user is shown the number of beers

that match their current selection.

After tapping the confirm icon, they

are returned to the beer menu with a

subset of the total beers displayed.

A user can view the subset of the total New B

based on the ingredient parameters that the

when they return to the menu.

BEER MODE

iPhone 10:15 PM

BER MENU CARD

SEE A LIST OF BEERS

BEER MENU

BEER MENU

+

BEER NEARBY

BEER LOG

BEER MENU

+-

MALT

+-

HOPS

+-

ABV

+-

AGE

+-

CAL

MALT

HOPS

ABV

AGE

CAL

+-

+-

+-

+-

+-



THE BREWERY

BEER NEARBY

EXCLUSIVE CONTENT

BEER MODE

BEER MENU

8

9

?

9

SCORE+-

SCORE+-

SINGLE BEER

+


18/25


SINGLE BEER

INTERNATIONAL BITTERNESS UNITS (IBU's)

14ALCOHOL PERCENTAGE BY VOLUME (ABV)

4.8

12%

01%

ALCOHOL PERCENTAGE BY VOLUME (ABV)

4.8

TOTAL CALORIES

143


TOTAL CALORIES

143

iPhone 10:15 PM

HOPS

MALTS

FRUIT/

SPICE

Target

Pale, Carapils, Wheat

Orange Peel,Coriander

SUNSHINEWHEAT

900

12

0

0

12

0

SUNSHINEWHEAT

600

0

600

0

SUNSHINEWHEAT

Sunshine Wheat isa great beer fortrouncing thirst.Yet, it has a depthof characterthat inspiresa quietmoment'sreflection.

INTERNATIONAL BITTERNESS UNITS (IBU's)

SUNSHINE WHEAT

SUNSHINEWHEAT

Goes Great with These Three Beer M odes:

P HI LO SO PH Y S MA RT C HE ES Y U N CL E

SINGLE BEER LANDING SCREEN IBU INFOGRAPHIC ABV INFOGRAPHIC CALORIES INFOGRAPHIC

After selecting a single

beer from the menu, a

user is taken to a page

that displays the

pertinent information of

each beer in a more

visual manner.

An infographical

approach helps user

visualize how the

ingredients of a

particular beer stacks up

compared to all other

beers.

iPhone 10:15 PM

Beer Page Conte

1 Name

2 Description

3 Birthday

4 Raw Materials

5 ABV

6 IBU

7 Original Grav

8 Terminal Grav

9 Color

+

10 Video / Photo

11 Remembeer?

12 Pour Me Anot

SINGLE BEER CONTINUED

+


19/25


SINGLE BEER, CONTINUED

HOPS

MALTS

FRUIT/SPICE

Target

Pale, Carapils, Wheat

Orange Peel,Coriander

BODY Orange Peel,Coriander

AROMA Fruity, herbal aromawith a sweet and tartcitrus nose and

flavor. Gentle wheatycharacteristic with no

hop aroma/flavor.

SUNSHINEWHEAT

iPhone 10:15 PM

AROMAFruity, herbal aromawith a sweet and tart

citrus nose andflavor. Gentle wheatycharacteristic with no

hop aroma/flavor.

SUNSHINEWHEAT

iPhone 10:15 PM

MOUTHFEEL

Light crispcarbonation with a

clean and fruity finish.

FLAVOR Huge spicy/herbal/fruity coriander flavorbrought out by thebeers carbonation.Subtle orange and

lemon, rounded maltcharacter with little

bitterness- bitterorange zest. Slightlysweet with a hint of

apple and honey andsage Slightly tart and

tangy.

VISUAL

apple and honey andsage Slightly tart and

tangy.

iPhone 10:15 PM

Light and sunnyyellow with a slightsheen (halo-due to

wheat addition),white lacing and

creamy head.

VISUAL

LEARN ABOUT THIS BEER FROM THE BREWER

SUNSHINEWHEAT

INGREDIENTS INFOGRAPHIC INGREDIENTS INFOGRAPHIC BREWER INTERVIEW VIDEO

+

VISUAL

SUNSHINEWHEAT

POUR ME ANOTHER

REMEMBEER

iPhone 10:15 PM

RATE BEER / RELATED BEER

I

101

I'VEHAD THIS BEER!


20/25

REMEMBEER +


21/25


REMEMBEER

VISUALPOUR ME ANOTHER

REMEMBEER

iPhone 10:15 PM

9I

VIEW

NOTES: This is my opinion

about what I think is the most

amazing beer in the whole

world. It just plain rocks.

Sunshine Wheat is the best.

?SUNSHINEWHEAT

IEDIT

iPhone 10:15 PM

HOW DID YOU LIKE THIS BEER?

SunshineWheat 8

101

This is my

opinion about

what I think is

the most

amazing beer...

RATEBEER

EDIT

This is my opinion about

what I think is the most

amazing beer in the whole

world. It just plain rocks.

Sunshine Wheat is the best.

EDIT RATINGREMEMBEER

iPhone 10:15 PM

9

NOTES: This is my opinion about what I

think is the most amazing beer in the

whole world. It just plain rocks. Sunshine

Wheat is the best.

BEER LOG

9SUNSHINE WHEAT

VIEW / SHARE RATING

BEER LOG

VIEW

EDIT

BEER NEARBY

+


22/25


iPhone 10:15 PM

BEER NEARBY

iPhone 10:15 PM

Access Current Location

Provide your location to see the

New Belgium Beer nearest to you.

OKCancel

OK

LOCATION PERMISSIONS EDIT DISTANC

1MILE

075MILES

DISTANCE

After allowing the application to

access the phones location data, a

user can see the places that sell New

Belgium based on the distance in

miles from their current location.

Users can use the distance slider t

locations that are displayed in the

BEER MODE

iPhone 10:15 PM

BEER NEARBY CARD

LOOK AT THE MAP

BEERS NEARBY

BEER NEARBY

BEER NEARBYNOTES: Saccharification, hop back bungpub. Shelf life cask conditioned ale.

THE BREWERY

BEER NEARBY

EXCLUSIVE CONTENT

BEER MODE

BEER MENU


BEER NEARBY

1554

Sunshine Wheat

Blue Paddle

Snow Day

Red Hoptober

EDIT BEERS SHOWN

Fat Tire

DRAFT BEER

PACKAGED BEER

Users can modify the New Belgium

beers that are available at a

particular location, as well as the

form of beer being sold, by tapping

on the options icon from within the

default maps view.

User can also modify the locations

that are displayed based on thedistance from where they are

currently at. This setting requires

that a user authorize the application

to access the phones location data.

ALL ON ALL OFF

BEER NEARBY LOCATION

+


23/25


BEER NEARBYBEER NEARBY

BEER NEARBY LOCATION DETAIL OPEN LOCATION IN MAPS CALL LOCATION

iPhone 10:15 PM

1198 Pearl St. Boul der, CO 80302

THE WEST END TAVERN

Open In Maps Application

Would you like to see this in maps?

OKCancel

iPhone 10:15 PM

1198 Pearl St. Boulder, CO 80302

THE WEST END TAVERN

Call (303) 290-3949

Would you like to call this number?

OKCancel

DETAILS

1198 Pearl St. Boul der, CO 80302

THE WEST END TAVERN

After accessing the Beers Nearby

feature, users can find locations that

sell either packaged or draft New

Belgium Beer. By clicking on a bottle,

a detailed view is displayed.

The detailed view of a location that sells New Belgium

beer includes the ability to open the location in a users

default maps application, or call them directly. It also

shows which beers the location is currently serving.

Tapping on the map icon from within

a location detail screen launches the

location address within a users

default maps application.

Tapping on the phone icon calls the

location from within a users default

phone application.


EXCLUSIVE CONTENT

+


24/25


SINGLE BEER

iPhone 10:15 PM

RAMPANT

IPA LAUNCH

SOMETHING

SPECIAL!

SOMETHING

SPECIALER!

A THIRD

SPECIALBEER MODE

iPhone 10:15 PM

BER MENU CARD

SEE A LIST OF BEERS

BEER MENU

EXCLUSIVE CONTENT

BEER NEARBY

BEER LOG

BEER MENU

Rampan IPA is a great beer fortrouncing thirst. Yet, it has a depthof character that inspires a quietmoment's reflection.

RAMPANT IPA LAUNCH

SINGLE BEER LANDING SCREEN

iPhone 10:15 PM

SUNSHINEWHEAT

4 DAYS,12 HOURS &34 MINUTES



8 DAYS,12 HOURS &

34 MINUTESEXCLUSIVECONTENT

4 DAYS, 12 HOURS & 34 MINUTES



THE BREWERY

BEER NEARBY

EXCLUSIVE CONTENT

BEER MODE

BEER MENU

RAMPANT

IPA LAUNCH


THE BREWERY

+


25/25


iPhone 10:15 PM

HIGHEST RATED

Hoppy +Amber84%

BEERS CONSUMED

LANDING SCREEN

BOOK A

TOUR

iPhone 10:15 PM

EXCLUSIVE CONTENT

iPhone 10:15 PM

7

SPECIAL EVENT 1 2/15/

iPhone 10:15 PM

DETAILED CONTENT STORY

EXCLUSIVECONTENT

Mead lagering pitch he

exchanger draft draugh

Bottle conditioning, ambe

stout trappist mouthfeel s

and acidic rest.

iPhone 10:15 PM

75%

NEW BELGIUM BREWERY

iPhone 10:15 PM

CONTACT INFORMATION

EXCLUSIVECONTENT

500 Linden Street,

Fort Collins, CO

(970) 221-0524

TWITTER FACEBOOK

[email protected]

CONTACTINFORMATION

LEARN MORE

BEER MODE

LEARN MORE

New Beer Release

on February 15th!

SPECIAL EVENT 1

SPECIALEVENTS SPECIALEVENT1

SPECIAL

EVENTS

NEW BELGIUM

CULTURE

THEBREWERY

SPECIAL

EVENTS

After navigating to The Brewery

section, users can access New Belgium

contact information including address,

phone number, email, Twitter, and

Facebook.

Users can also access exclusive content thr

Mothership section of the application. This

things like new beer releases and promotio

content. Each piece of promotional conten

shared to a users Facebook timeline.

BEER MODE

iPhone 10:15 PM

CHECK IT OUT

THE BREWERY

THE BREWERY

CONTACT

CONTACT



THE BREWERY

BEER NEARBY

EXCLUSIVE CONTENT

BEER MODE

BEER MENU

beer mode experience design documentation

Documents