Converge SE 2011 Building a Strong Foundation

Bro$ght %o yo$ by

Bui!di"g a stro#g

AARON QUINN@aaronquinn

BOB GALMARINI@bgalmar

ConvergeSE 2011Columbia, SC

June 24th, 2011

© 2011 {e} house studio, LLC All rights reserved.

BOB GALMARINI

Art Director@bgalmar


BOB GALMARINI


AARON QUINN

Creative Director@aaronquinn


AARON QUINN


@ehousestudio


WHY WE ARE HERE

GreyBoxi!g


1 2 3 4 5

GREY BOXES ARE MORE THAN A DESIGN TOOL


WORKSHOP VS PRESENTATION


© 2010 BI-LO, LLC. All Rights Reserved

THE SITUATION© 2011 {e} house studio, LLC All rights reserved.

THE SITUATION© 2011 {e} house studio, LLC All rights reserved.

Li&e ot'er p(oj)*ts

RESEARCHCo"#ent Stra#$gy

Writing new contentUI DESIGNfro!t-e"d

DEVELOPMENTCus#o%izi!g aNEW CMS

USABILITY TESTING


MARKETING DEPARTMENTCo"#ent Stra#$gist

CopywriterDESIGNERSDEVELOPERSServer

ADMINS

IT DEPARTMENT

THE CHALLENGE:


All wo(ki"g %oget'er betw)en 2 +o,pan-es

BI-LO Internal Team

{e} house

THE CHALLENGE:


New CMSCustomer Data

WarehouseBI-LO

Internal API

THE CHALLENGE:


GREY BOXES BUILD ALIGNMENT FOR

EVERYONE ON THE TEAM GIVING EACH

TEAM MEMBER WHAT THEY NEED

WHILE BUILDING EFFICIENCY FOR THE

PROJECT AS A WHOLE

W#at we $%ar"%d fro& b'-$o.(o&


Our Ro!es

AARON QUINNInformation ArchitectureGreyboxing

BOB GALMARINIBrand Style GuideDesigning the UI


CONTENT STRATEGYCo!)ent (o&es first


FAST FORWARD THROUGH IA


1 2 3 4 5

GREY BOXING


SUBJECTIVE %o OBJECTIVE

Browse our store

GREYBOXING© 2011 {e} house studio, LLC All rights reserved.

BREAK DOWN THE DESIGN PROCESS INTO

DIGESTIBLE CHUNKS. BY USING GREY

BOXING WE COULD BRING ALIGNMENT

AND CLARITY TO THE WHOLE TEAM.

Grey boxi!g &elp':


THE INSPIRATION© 2011 {e} house studio, LLC All rights reserved.

... I can remove myself from worrying about

color and imagery choices and allow myself to

focus on the site’s structure and hierarchy. I

can plot out space relative to importance and

insure that the overall architecture of the site

makes sense with the flow of the project."

- Jaso! San)a Mar*a http://bit.ly/3fgaIH

“


http://bit.ly/3fgaIH


Grey boxi"g, %o us,

‣ Minimizes the factors designers and clients focus on so they can concentrate on the usability, messaging, and goals.

‣ Is the culmination of the

- Research

- Content Strategy

- Information Architecture

- Early Copywriting

‣ Is Hi-Fidelity Wireframing



Define a type hierarchy and solve space relationships with real content

1


Identify the logo space without using the actual brand

1

Use accurate scale placeholders for the custom icons

3

Use accurate scale placeholders for imagery and photos

2

Use real content

4


Aren't Wirefra+es M%ant )o Al*gn & C$arify Too?‣ DIFFERENCE IS IN THE DETAILS:

• Wireframes: Typically don’t use real world proportions

• Wireframes: Typically focus on features not layout & content

• Wireframes: Can be difficult for some clients to understand

• Wireframes: Focus on individual elements with notations, not presented together as the user sees them


Tip. fo( Grey Boxi"g

‣ Use vector

- Omnigraffle - there are great stencils available

- Fireworks

‣ Shared layers are your friend

‣ Able to make change rapidly

‣ Build symbols & library

‣ Not void of creativity

‣ Keep hidden layers for notes

‣ Get everyone involved - across all roles


Results

‣ Two designers

‣ 50 templates

‣ 137 views

‣CONFIDENT TEAM

‣CONFIDENT CLIENT


1 2 3 4 5

USABILITY


Many I-%as S%em Good at t#e Ti+e

USABILITY © 2011 {e} house studio, LLC All rights reserved.

You have not associated a BONUSCARD with your account. Add your BONUSCARD

THE PROCESS OF BUILDING A

PROTOTYPE CAN BE EYE OPENING

WHEN YOU NEED TO PRESENT WHAT

HAPPENS WHEN THINGS GO WRONG.


TESTING A PROTOTYPE IS KEY IN

MAKING SURE YOUR ASSUMPTIONS

ALIGN WITH THE END USER’S

NEEDS & UNDERSTANDING

Success!

Now that you're signed up, what's next?

Login to MY BI-LO

My BI-LO Account successfully created.

An email has been sent to you


‣ 5 users can find 85% of the usability problems one would want to improve in a design

‣ A second test with 5 users will discover most of the remaining 15% of the original usability problems that were not found in the first test

‣ Still 2% of the original problems left after the second test

Ja.ob N*elsenhttp://bit.ly/14L4LB


http://www.useit.com/alertbox/20000319.html

http://www.useit.com/alertbox/20000319.html

USABILITY TESTING CAN BE AS SIMPLE AS SEEING YOUR

DESIGNS BEING USED BY ACTUAL USERS

a!d !o &elp(!g t&em...


BI-LO Key Tasks

‣ Find a store

‣ Register for a bi-lo.com account

‣ Build shopping lists using the weekly ad

‣ Locate a fuelperks! pump

‣ Find their YTD savings & fuelperks! rewards


Tip. fo( Testi"g

‣ Logo & necessary imagery can make it easier to understand

‣ Silverback App

‣ Prototype using tools that make sense to you

- HTML

- Clickable PDF

- Old school image map

- Flash - Adobe Catalyst

‣ For Mobile Projects Consider:

- If you’re testing on multiple OS’s: stick with HTML due to screen sizes


Results

‣ Proved the information architecture was solid and would scale

‣ Adjusted usability problems early in the process

‣ We made rapid changes

‣ Furthered the confidence of the team

‣ Furthered the confidence of our client


Q,est*o!s at this po'nt?


1 2 3 4 5

DEVELOPMENT


1. Research

2. Content Strategy

3. Grey Boxing

4. Designing the UI

5. Development

6. QA

7. Launch

DEVELOPMENT© 2011 {e} house studio, LLC All rights reserved.

DOESN’T HAVE TO BE A RELAY RACE


DESIGNING UI DEVELOPMENT

USER TESTING


WE HAVE ALIGNMENT & CLARITY

TO START FRONT-END

DEVELOPMENT & CMS STRUCTURE

WITHOUT FEAR OF REWORK.

B$)ause of Grey boxi!g:


DESIGNING UI DEVELOPMENT

USER TESTING



Str,/ture

Sty$eFu"/t*o!

JUMP START

Can be completed using grey boxes

Need PSD’s to complete development


LogoGO

My BI-LO | Shopping Lists | Recipes | Account Info | Logout

Weekly Ads

$8,024.34 $0.70 YTD BONUSCARD savings fuelperks! savings

Find Your BI-LO Rx Refills fuelperks! locator

Welcome John Moore

Search Ways to save

Your CommunityDelicious IdeasStore ServicesWellness & PharmacyStore AislesWays to Save

Recipes

Featured Recipes

Search by keywords Search

Search For Recipes

By Course

Appetizers

Beverages

Breads & Muffins

Breakfast & Brunch

Desserts

Dressings & Sauces

Main Dishes

Salads

Sandwiches, Burgers &

Wraps

Side Dishes

Snacks

Soups & Stews

Recipes

Expert Cooking Videos

Articles

Meal Planning Guide

Party Planning Guide

CTA

Amet, consectetur adipiscing elit. Nulla et justo euismod orci mattis aliquam.

Browse RecipesBy Category

Recipes from Local Farmers

Classic Favorites

thrive! Healthy Recipes

Pork Loin with Sage, Leeks and Juniper

These cookies are inspired by a recipe from one of our health partners, Dr. Joel Fuhrman, author of Eat for Health. Easy to make ... Read the full article

6 servings 1.5 hours

© Copyright 2007 BI-LO, LLC. All Rights Reserved | Privacy Policy | Sitemap

Get Food & Shopping Tips in Your Inbox

Search SubscribeAbout BI-LO | Careers | Vendors | Support | Contact Us

Follow us f

Product Recalls Customer Service

BI-LO Charities Logo

Home > Delicious Ideas > Recipes

Quick & Easy

Browse Recipes by Preparation TIme

30 min. & under

Make it Special60 min.

Take Your Timeover 1 hr.

Low & Slowover 2 hrs.

Meal for 1

Browse Recipes by Serving Size

1 servings

You & a Friend2 servings

Feed the Family6 servings

Party TimeOver 6 servings

Follow BI-LO

f


Title

: 5.1

Rec

ipes

- La

ndin

g Pa

ge: 8

2


LogoGO


Weekly Ads



Welcome John Moore

Search Ways to save




Search SubscribeAbout BI-LO | Careers | Vendors | Contact Us

Follow us f



Need Help? Click here.

$1,364.07

Year-To-DateBONUSCARD® Savings

$0.05 / galfuelperks! Savings

View Report

My Store

Change My Store

Store #1611365 W. Wade Hampton Blvd.Greer, SC 29650(864) 968-8830

Hours:Mon-Fri: 7:00AM - 12:00AMSaturday: 7:00AM - 12:00AMSunday: 7:00AM - 10:00PM

Get Directions

My Shopping Lists My Recipes Account InfoMy Dashboard Our Guaranteefuelperks!

My Dashboard

Coupons

FREE Tartar Sauce

FREE Cocktail Sauce

FREE Rally 2 Liter

$5.00 OFF BI-LO Party Pack

View All Current Coupons

Expires: 08/07/10

My Shopping List

Print List

View Full List

Email List

12 items

Callout about going to the weekly ad to add more items to the list

Expires: 08/07/10

Rotating Feature

fuelperks!Balance towards next 5¢ discount - $9.23

$40.77 of $50

Savings Expiring This Month $13.27

You will save

$14.00if you fill up with 20 gallons

on your next redemption

$0.70Current Savings

per gallon

Learn more about fuelperks!

Title

: 15.

0 M

y BI

-LO

- M

y Da

shbo

ard

Page

: 97



Tip. fo( Deve!o/,ent

‣ Put notes to the developers in a hidden layer

‣ Establish a way to let developers know of any updates quickly

‣ Show what happens when things go wrong

‣ Show fall back for accessibility


Results

‣ Learn of any technical restraints sooner

‣ Able to give developers more time while the UI is designed

‣ Populate content sooner to build with actual data to reduce QA time at the end

‣ bi-lo.com has roughly 12K lines of CSS code - imagine if we add thing here and there..

- Unused code is costly to cleanup & costly to support


1 2 3 4 5

DESIGN


OBJECTIVE %o SUBJECTIVE

DESIGN© 2011 {e} house studio, LLC All rights reserved.

DESIGN THE UI EFFICIENTLY BY SELECTING

ONLY THE NECESSARY LAYOUTS NEEDED

TO PRESENT THE EXECUTED BRAND &

REDUCE REWORK BY MINIMIZING THE

AMOUNT OF DECISION FACTORS

Grey boxi!g &elp':




LogoGO


Weekly Ads



Welcome John Moore

Search Ways to save



$1,364.07



View Report

My Store

Change My Store



Get Directions





Follow us f



My Dashboard

Coupons

FREE Tartar Sauce

FREE Cocktail Sauce

FREE Rally 2 Liter



Expires: 08/07/10

My Shopping List

Print List

View Full List

Email List

12 items


Expires: 08/07/10

Rotating Feature


$40.77 of $50


You will save




per gallon


Title

: 15.

0 M

y BI

-LO

- M

y Da

shbo

ard

- Ale

rts P

age:

100


LogoGO


Weekly Ads



Welcome John Moore

Search Ways to save



$1,364.07



View Report

My Store

Change My Store



Get Directions





Follow us f



My Dashboard

Coupons

FREE Tartar Sauce

FREE Cocktail Sauce

FREE Rally 2 Liter



Expires: 08/07/10

My Shopping List

Print List

View Full List

Email List

12 items


Expires: 08/07/10

Rotating Feature


$40.77 of $50


You will save




per gallon


Title

: 15.

0 M

y BI

-LO

- M

y Da

shbo

ard

- Ale

rts P

age:

100


LogoGO


Weekly Ads



Welcome John Moore

Search Ways to save





Follow us f



Home > Ways to Save > fuelperks!

BI-LO puts you in the driver’s seat

1. Shop 2. Pump 3. Save

50¢ off per gallon for every $50 you spend on groceries!

Use your BI-LO BONUSCARD and rack up fuelperks! points every time you shop. Check the bottom of your receipt for your balance.

Look for the fuelperks! logo at participating gas stations to redeem your points.

Search

If you earn 50¢ in fuelperks! ...

$3.00/gallon gas will cost $2.50/gallonReduce your price per gallon and save big!

Signup

Enter your city & state or ZIP code


fuelperks!

We know you don’t like spending money on gas – but you can’t live without it, either.

BI-LO makes the pump less painful by letting you earn incredible gas savings every time you shop with your My BI-LO BONUSCARD.

BONUSCARD

Weekly Ad

fuelperks!

Senior Bonus

Price Lock

Meal Deal

Buy 1, Get 1 Free

10% Wine

Double Manufacture Coupons

$4 TopCare

Coupons

BI-LO Brands

$4 Generics

Where to Redeem

How You Save

Frequently Asked Questions

Program Details

Title

: 1.1

Way

s to

Sav

e - f

uelp

erks

! Pag

e: 2

5


LogoGO


Weekly Ads



Welcome John Moore

Search Ways to save





Follow us f



Home > Ways to Save > fuelperks!

BI-LO puts you in the driver’s seat

1. Shop 2. Pump 3. Save

50¢ off per gallon for every $50 you spend on groceries!

Use your BI-LO BONUSCARD and rack up fuelperks! points every time you shop. Check the bottom of your receipt for your balance.

Look for the fuelperks! logo at participating gas stations to redeem your points.

Search

If you earn 50¢ in fuelperks! ...

$3.00/gallon gas will cost $2.50/gallonReduce your price per gallon and save big!

Signup

Enter your city & state or ZIP code


fuelperks!

We know you don’t like spending money on gas – but you can’t live without it, either.

BI-LO makes the pump less painful by letting you earn incredible gas savings every time you shop with your My BI-LO BONUSCARD.

BONUSCARD

Weekly Ad

fuelperks!

Senior Bonus

Price Lock

Meal Deal

Buy 1, Get 1 Free

10% Wine

Double Manufacture Coupons

$4 TopCare

Coupons

BI-LO Brands

$4 Generics

Where to Redeem

How You Save

Frequently Asked Questions

Program Details

Title

: 1.1

Way

s to

Sav

e - f

uelp

erks

! Pag

e: 2

5






@font-face { font-family: "AvenirLTStd65Medium";

font-style: normal;

font-weight: normal;



Tip. fo( Des-gni"g t'e UI

‣ Only photoshop views the client will need to see in order for them to give overall approval

‣ Select layouts that are key to building a visual style guide

‣ Build a style guide


Results

‣ Able to give the board the time needed to review without delaying development

‣ Second usability test

‣ Visual standards guide

‣ Minor tweaks

‣ 40 PSD’s



1 2 3 4 5

LAUNCH & OPTIMIZATION


Grey bo0es are:

BLUEPRINTS TO PASS TO THE

CLIENT AND A TOOL TO MAKE AND

PRESENT RAPID OPTIMIZATIONS.


“ In our process, we plan and design for

change and evolution and, luckily for us, we

work for really smart clients who want to

absorb this sustainable approach into their

process."

- Kevin S#aro! - Hap1y Cog http://cognition.happycog.com/article/

sustainable-not-pixel-perfect






Tip. fo( !au"*h & o/timizat-o#

‣ Think about versioning for grey boxes

‣ Unhide notes for everyone to see

‣ Note any changes

‣ Educate everyone


Results

‣ Clients relate back to us in grey boxes

‣ New grey boxes to reduce work & client costs


HOW DID IT WORK OUT?


MORE THAN DOUBLED THE

NUMBER OF SHOPPING LISTS

TYPICALLY MADE IN A FULL

WEEK IN THE FIRST DAY OF

THE SITE GOING LIVE

2x


NUMBER OF ITEMS ADDED

TO EACH NEW SHOPPING

LIST INCREASED BY 3.5

TIMES

3.5x


AVERAGE TIME SPENT ON

THE SITE HAS DOUBLED2x


BOUNCE RATE HAS BEEN

CUT IN HALF1/2


NO PROJECTS ARE

THE SAME

2


THANKS!

q0est-o#s?


Reso$r+es‣ Grey Box Method - Jason Santa Maria

- http://bit.ly/3fgaIH

‣ Jakob Nielsen

- http://bit.ly/14L4LB

‣ Failblog.org

‣ Kevin Sharon - Happy Cog

- http://cognition.happycog.com/article/sustainable-not-pixel-perfect

Special thanks to the team at BI-LO

BOB [email protected]

@bgalmar

AARON [email protected]

@aaronquinn




http://bit.ly/14L4LB

http://bit.ly/14L4LB



mailto:[email protected]


