Converge SE 2011 Building a Strong Foundation
-
Upload
aaron-quinn -
Category
Design
-
view
1.141 -
download
0
description
Transcript of Converge SE 2011 Building a Strong Foundation
![Page 1: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/1.jpg)
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.
![Page 2: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/2.jpg)
BOB GALMARINI
Art Director@bgalmar
© 2011 {e} house studio, LLC All rights reserved.
![Page 3: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/3.jpg)
BOB GALMARINI
© 2011 {e} house studio, LLC All rights reserved.
![Page 4: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/4.jpg)
AARON QUINN
Creative Director@aaronquinn
© 2011 {e} house studio, LLC All rights reserved.
![Page 5: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/5.jpg)
AARON QUINN
© 2011 {e} house studio, LLC All rights reserved.
![Page 6: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/6.jpg)
@ehousestudio
© 2011 {e} house studio, LLC All rights reserved.
![Page 7: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/7.jpg)
WHY WE ARE HERE
GreyBoxi!g
© 2011 {e} house studio, LLC All rights reserved.
![Page 8: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/8.jpg)
1 2 3 4 5
GREY BOXES ARE MORE THAN A DESIGN TOOL
© 2011 {e} house studio, LLC All rights reserved.
![Page 9: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/9.jpg)
WORKSHOP VS PRESENTATION
© 2011 {e} house studio, LLC All rights reserved.
![Page 10: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/10.jpg)
© 2010 BI-LO, LLC. All Rights Reserved
![Page 11: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/11.jpg)
THE SITUATION© 2011 {e} house studio, LLC All rights reserved.
![Page 12: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/12.jpg)
THE SITUATION© 2011 {e} house studio, LLC All rights reserved.
![Page 13: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/13.jpg)
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
© 2011 {e} house studio, LLC All rights reserved.
![Page 14: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/14.jpg)
MARKETING DEPARTMENTCo"#ent Stra#$gist
CopywriterDESIGNERSDEVELOPERSServer
ADMINS
IT DEPARTMENT
THE CHALLENGE:
© 2011 {e} house studio, LLC All rights reserved.
![Page 15: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/15.jpg)
All wo(ki"g %oget'er betw)en 2 +o,pan-es
BI-LO Internal Team
{e} house
THE CHALLENGE:
© 2011 {e} house studio, LLC All rights reserved.
![Page 16: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/16.jpg)
New CMSCustomer Data
WarehouseBI-LO
Internal API
THE CHALLENGE:
© 2011 {e} house studio, LLC All rights reserved.
![Page 17: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/17.jpg)
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&
© 2011 {e} house studio, LLC All rights reserved.
![Page 18: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/18.jpg)
Our Ro!es
AARON QUINNInformation ArchitectureGreyboxing
BOB GALMARINIBrand Style GuideDesigning the UI
© 2011 {e} house studio, LLC All rights reserved.
![Page 19: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/19.jpg)
CONTENT STRATEGYCo!)ent (o&es first
© 2011 {e} house studio, LLC All rights reserved.
![Page 20: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/20.jpg)
FAST FORWARD THROUGH IA
© 2011 {e} house studio, LLC All rights reserved.
![Page 21: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/21.jpg)
1 2 3 4 5
GREY BOXING
© 2011 {e} house studio, LLC All rights reserved.
![Page 22: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/22.jpg)
SUBJECTIVE %o OBJECTIVE
Browse our store
GREYBOXING© 2011 {e} house studio, LLC All rights reserved.
![Page 23: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/23.jpg)
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':
© 2011 {e} house studio, LLC All rights reserved.
![Page 24: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/24.jpg)
THE INSPIRATION© 2011 {e} house studio, LLC All rights reserved.
![Page 25: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/25.jpg)
... 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
“
© 2011 {e} house studio, LLC All rights reserved.
![Page 26: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/26.jpg)
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
© 2011 {e} house studio, LLC All rights reserved.
![Page 27: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/27.jpg)
© 2011 {e} house studio, LLC All rights reserved.
![Page 28: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/28.jpg)
Define a type hierarchy and solve space relationships with real content
1
© 2011 {e} house studio, LLC All rights reserved.
![Page 29: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/29.jpg)
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
© 2011 {e} house studio, LLC All rights reserved.
![Page 30: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/30.jpg)
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
© 2011 {e} house studio, LLC All rights reserved.
![Page 31: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/31.jpg)
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
© 2011 {e} house studio, LLC All rights reserved.
![Page 32: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/32.jpg)
Results
‣ Two designers
‣ 50 templates
‣ 137 views
‣CONFIDENT TEAM
‣CONFIDENT CLIENT
© 2011 {e} house studio, LLC All rights reserved.
![Page 33: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/33.jpg)
1 2 3 4 5
USABILITY
© 2011 {e} house studio, LLC All rights reserved.
![Page 34: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/34.jpg)
Many I-%as S%em Good at t#e Ti+e
USABILITY © 2011 {e} house studio, LLC All rights reserved.
![Page 35: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/35.jpg)
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.
© 2011 {e} house studio, LLC All rights reserved.
![Page 36: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/36.jpg)
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
© 2011 {e} house studio, LLC All rights reserved.
![Page 37: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/37.jpg)
‣ 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
© 2011 {e} house studio, LLC All rights reserved.
![Page 38: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/38.jpg)
USABILITY TESTING CAN BE AS SIMPLE AS SEEING YOUR
DESIGNS BEING USED BY ACTUAL USERS
a!d !o &elp(!g t&em...
© 2011 {e} house studio, LLC All rights reserved.
![Page 39: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/39.jpg)
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
© 2011 {e} house studio, LLC All rights reserved.
![Page 40: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/40.jpg)
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
© 2011 {e} house studio, LLC All rights reserved.
![Page 41: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/41.jpg)
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
© 2011 {e} house studio, LLC All rights reserved.
![Page 42: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/42.jpg)
Q,est*o!s at this po'nt?
© 2011 {e} house studio, LLC All rights reserved.
![Page 43: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/43.jpg)
1 2 3 4 5
DEVELOPMENT
© 2011 {e} house studio, LLC All rights reserved.
![Page 44: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/44.jpg)
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.
![Page 45: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/45.jpg)
DOESN’T HAVE TO BE A RELAY RACE
© 2011 {e} house studio, LLC All rights reserved.
![Page 46: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/46.jpg)
DESIGNING UI DEVELOPMENT
USER TESTING
© 2011 {e} house studio, LLC All rights reserved.
![Page 47: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/47.jpg)
WE HAVE ALIGNMENT & CLARITY
TO START FRONT-END
DEVELOPMENT & CMS STRUCTURE
WITHOUT FEAR OF REWORK.
B$)ause of Grey boxi!g:
© 2011 {e} house studio, LLC All rights reserved.
![Page 48: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/48.jpg)
DESIGNING UI DEVELOPMENT
USER TESTING
© 2011 {e} house studio, LLC All rights reserved.
![Page 49: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/49.jpg)
© 2011 {e} house studio, LLC All rights reserved.
![Page 50: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/50.jpg)
Str,/ture
Sty$eFu"/t*o!
JUMP START
Can be completed using grey boxes
Need PSD’s to complete development
© 2011 {e} house studio, LLC All rights reserved.
![Page 51: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/51.jpg)
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
Your CommunityDelicious IdeasStore ServicesWellness & PharmacyStore AislesWays to Save
Title
: 5.1
Rec
ipes
- La
ndin
g Pa
ge: 8
2
© 2011 {e} house studio, LLC All rights reserved.
![Page 52: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/52.jpg)
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
© Copyright 2007 BI-LO, LLC. All Rights Reserved | Privacy Policy | Sitemap
Get Food & Shopping Tips in Your Inbox
Search SubscribeAbout BI-LO | Careers | Vendors | Contact Us
Follow us f
Product Recalls Customer Service
BI-LO Charities Logo
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
© 2011 {e} house studio, LLC All rights reserved.
![Page 53: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/53.jpg)
© 2011 {e} house studio, LLC All rights reserved.
![Page 54: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/54.jpg)
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
© 2011 {e} house studio, LLC All rights reserved.
![Page 55: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/55.jpg)
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
© 2011 {e} house studio, LLC All rights reserved.
![Page 56: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/56.jpg)
1 2 3 4 5
DESIGN
© 2011 {e} house studio, LLC All rights reserved.
![Page 57: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/57.jpg)
OBJECTIVE %o SUBJECTIVE
DESIGN© 2011 {e} house studio, LLC All rights reserved.
![Page 58: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/58.jpg)
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':
© 2011 {e} house studio, LLC All rights reserved.
![Page 59: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/59.jpg)
© 2011 {e} house studio, LLC All rights reserved.
![Page 60: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/60.jpg)
© 2011 {e} house studio, LLC All rights reserved.
![Page 61: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/61.jpg)
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
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!
© Copyright 2007 BI-LO, LLC. All Rights Reserved | Privacy Policy | Sitemap
Get Food & Shopping Tips in Your Inbox
Search SubscribeAbout BI-LO | Careers | Vendors | Contact Us
Follow us f
Product Recalls Customer Service
BI-LO Charities Logo
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
- Ale
rts P
age:
100
© 2011 {e} house studio, LLC All rights reserved.
![Page 62: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/62.jpg)
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
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!
© Copyright 2007 BI-LO, LLC. All Rights Reserved | Privacy Policy | Sitemap
Get Food & Shopping Tips in Your Inbox
Search SubscribeAbout BI-LO | Careers | Vendors | Contact Us
Follow us f
Product Recalls Customer Service
BI-LO Charities Logo
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
- Ale
rts P
age:
100
© 2011 {e} house studio, LLC All rights reserved.
![Page 63: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/63.jpg)
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
© Copyright 2007 BI-LO, LLC. All Rights Reserved | Privacy Policy | Sitemap
Get Food & Shopping Tips in Your Inbox
Search SubscribeAbout BI-LO | Careers | Vendors | Contact Us
Follow us f
Product Recalls Customer Service
BI-LO Charities Logo
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
Your CommunityDelicious IdeasStore ServicesWellness & PharmacyStore AislesWays to Save
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
© 2011 {e} house studio, LLC All rights reserved.
![Page 64: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/64.jpg)
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
© Copyright 2007 BI-LO, LLC. All Rights Reserved | Privacy Policy | Sitemap
Get Food & Shopping Tips in Your Inbox
Search SubscribeAbout BI-LO | Careers | Vendors | Contact Us
Follow us f
Product Recalls Customer Service
BI-LO Charities Logo
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
Your CommunityDelicious IdeasStore ServicesWellness & PharmacyStore AislesWays to Save
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
© 2011 {e} house studio, LLC All rights reserved.
![Page 65: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/65.jpg)
© 2011 {e} house studio, LLC All rights reserved.
![Page 66: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/66.jpg)
© 2011 {e} house studio, LLC All rights reserved.
![Page 67: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/67.jpg)
© 2011 {e} house studio, LLC All rights reserved.
![Page 68: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/68.jpg)
© 2011 {e} house studio, LLC All rights reserved.
![Page 69: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/69.jpg)
@font-face { font-family: "AvenirLTStd65Medium";
font-style: normal;
font-weight: normal;
© 2011 {e} house studio, LLC All rights reserved.
![Page 70: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/70.jpg)
© 2011 {e} house studio, LLC All rights reserved.
![Page 71: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/71.jpg)
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
© 2011 {e} house studio, LLC All rights reserved.
![Page 72: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/72.jpg)
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
© 2011 {e} house studio, LLC All rights reserved.
![Page 73: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/73.jpg)
© 2011 {e} house studio, LLC All rights reserved.
![Page 74: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/74.jpg)
1 2 3 4 5
LAUNCH & OPTIMIZATION
© 2011 {e} house studio, LLC All rights reserved.
![Page 75: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/75.jpg)
Grey bo0es are:
BLUEPRINTS TO PASS TO THE
CLIENT AND A TOOL TO MAKE AND
PRESENT RAPID OPTIMIZATIONS.
© 2011 {e} house studio, LLC All rights reserved.
![Page 76: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/76.jpg)
“ 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
© 2011 {e} house studio, LLC All rights reserved.
![Page 77: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/77.jpg)
Tip. fo( !au"*h & o/timizat-o#
‣ Think about versioning for grey boxes
‣ Unhide notes for everyone to see
‣ Note any changes
‣ Educate everyone
© 2011 {e} house studio, LLC All rights reserved.
![Page 78: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/78.jpg)
Results
‣ Clients relate back to us in grey boxes
‣ New grey boxes to reduce work & client costs
© 2011 {e} house studio, LLC All rights reserved.
![Page 79: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/79.jpg)
HOW DID IT WORK OUT?
© 2011 {e} house studio, LLC All rights reserved.
![Page 80: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/80.jpg)
MORE THAN DOUBLED THE
NUMBER OF SHOPPING LISTS
TYPICALLY MADE IN A FULL
WEEK IN THE FIRST DAY OF
THE SITE GOING LIVE
2x
© 2011 {e} house studio, LLC All rights reserved.
![Page 81: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/81.jpg)
NUMBER OF ITEMS ADDED
TO EACH NEW SHOPPING
LIST INCREASED BY 3.5
TIMES
3.5x
© 2011 {e} house studio, LLC All rights reserved.
![Page 82: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/82.jpg)
AVERAGE TIME SPENT ON
THE SITE HAS DOUBLED2x
© 2011 {e} house studio, LLC All rights reserved.
![Page 83: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/83.jpg)
BOUNCE RATE HAS BEEN
CUT IN HALF1/2
© 2011 {e} house studio, LLC All rights reserved.
![Page 84: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/84.jpg)
NO PROJECTS ARE
THE SAME
2
© 2011 {e} house studio, LLC All rights reserved.
![Page 85: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/85.jpg)
THANKS!
q0est-o#s?
© 2011 {e} house studio, LLC All rights reserved.
![Page 86: Converge SE 2011 Building a Strong Foundation](https://reader036.fdocuments.net/reader036/viewer/2022062511/54bbc6ac4a7959bb7c8b456d/html5/thumbnails/86.jpg)
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
@bgalmar
AARON [email protected]
@aaronquinn
© 2011 {e} house studio, LLC All rights reserved.