ConvergeSE 2011                                                                                    Columbia, SC           ...
BOB GALMARINI  Art Director   @bgalmar     © 2011 {e} house studio, LLC All rights reserved.
BOB GALMARINI © 2011 {e} house studio, LLC All rights reserved.
AARON QUINNCreative Director   @aaronquinn        © 2011 {e} house studio, LLC All rights reserved.
AARON QUINN© 2011 {e} house studio, LLC All rights reserved.
@ehousestudio         © 2011 {e} house studio, LLC All rights reserved.
WHY WE ARE HERE   Grey  Boxig           © 2011 {e} house studio, LLC All rights reserved.
GREY BOXES ARE MORETHAN A DESIGN TOOL 1   2                       3                               4   5         © 2011 {e}...
WORKSHOP VS PRESENTATION        © 2011 {e} house studio, LLC All rights reserved.
© 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.
Lie oter pojts  RESEARCH                    USABILITY TESTING          Coent StragyUI DESIGN                              ...
THE CHALLENGE:MARKETING DEPARTMENT    Coent Stragist                                           IT                         ...
THE CHALLENGE:  All wokig ogeter  betwen 2 opanes        BI-LO                                 {e} house    Internal Team ...
THE CHALLENGE:Customer Data         BI-LO                                                                    New CMS Wareh...
Wat we ard fro b-o.o GREY BOXES BUILD ALIGNMENT FOREVERYONE ON THE TEAM GIVING EACH  TEAM MEMBER WHAT THEY NEEDWHILE BUILD...
Our RoesAARON QUINN                                               BOB GALMARINIInformation Architecture                   ...
CONTENT STRATEGY   Coent oes first       © 2011 {e} house studio, LLC All rights reserved.
FAST FORWARD THROUGH IA       © 2011 {e} house studio, LLC All rights reserved.
GREY BOXING1   2                       3                               4   5        © 2011 {e} house studio, LLC All right...
SUBJECTIVE o OBJECTIVE                                                            Browse our store       GREYBOXING       ...
Grey boxig elp:BREAK DOWN THE DESIGN PROCESS INTO DIGESTIBLE CHUNKS. BY USING GREY BOXING WE COULD BRING ALIGNMENT  AND CL...
THE INSPIRATION    © 2011 {e} house studio, LLC All rights reserved.
“ ... I can remove myself from worrying aboutcolor and imagery choices and allow myself to  focus on the site’s structure ...
Grey boxig, o us,‣   Minimizes the factors designers and clients    focus on so they can concentrate on the    usability, ...
© 2011 {e} house studio, LLC All rights reserved.
1Define a type hierarchy and solve space        relationships with real content           © 2011 {e} house studio, LLC All ...
1                    Identify the logo space without                    using the actual brand                            ...
Arent Wirefraes Manto Algn  Carify Too?‣ DIFFERENCE IS IN THE DETAILS:     •   Wireframes: Typically don’t use real world ...
Tip fo Grey Boxig‣   Use vector    -   Omnigraffle - there are great stencils available    -   Fireworks‣   Shared layers ...
Results‣ Two designers‣ 50 templates‣ 137 views‣ CONFIDENT TEAM‣ CONFIDENT CLIENT            © 2011 {e} house studio, LLC ...
USABILITY1   2                       3                               4   5        © 2011 {e} house studio, LLC All rights ...
Many Ias Sem Good at te Tie          USABILITY          © 2011 {e} house studio, LLC All rights reserved.
THE PROCESS OF BUILDING A PROTOTYPE CAN BE EYE OPENINGWHEN YOU NEED TO PRESENT WHATHAPPENS WHEN THINGS GO WRONG.     You h...
© 2011 {e} house studio, LLC All rights reserved. TESTING A PROTOTYPE IS KEY INMAKING SURE YOUR ASSUMPTIONS  ALIGN WITH TH...
© 2011 {e} house studio, LLC All rights reserved.‣ 5 users can find 85% of the usability  problems one would want to impro...
USABILITY TESTING CAN BEAS SIMPLE AS SEEING YOUR DESIGNS BEING USED BY      ACTUAL USERS      ad o elpg tem...          © ...
BI-LO Key Tasks‣ Find a store‣ Register for a bi-lo.com account‣ Build shopping lists using the weekly ad‣ Locate a fuelpe...
Tip fo Testig‣   Logo  necessary imagery can make it easier to understand‣   Silverback App‣   Prototype using tools that ...
Results‣ Proved the information architecture was  solid and would scale‣ Adjusted usability problems early in the  process...
Qestos at this pont?        © 2011 {e} house studio, LLC All rights reserved.
DEVELOPMENT1   2                       3                               4   5        © 2011 {e} house studio, LLC All right...
1. Research2. Content Strategy3. Grey Boxing4. Designing the UI5. Development6. QA7. Launch            DEVELOPMENT        ...
DOESN’T HAVE TOBE A RELAY RACE    © 2011 {e} house studio, LLC All rights reserved.
USER TESTING      DESIGNING UI                                  DEVELOPMENT© 2011 {e} house studio, LLC All rights reserved.
Bause of Grey boxig:WE HAVE ALIGNMENT  CLARITY     TO START FRONT-ENDDEVELOPMENT  CMS STRUCTURE  WITHOUT FEAR OF REWORK.  ...
USER TESTING     DESIGNING UI                                   DEVELOPMENT© 2011 {e} house studio, LLC All rights reserved.
© 2011 {e} house studio, LLC All rights reserved.
© 2011 {e} house studio, LLC All rights reserved.                                                    JUMP START           ...
Ways to Save      Ways to Save                 Store Aisles                                   Store Aisles         Wellnes...
Need Help? Click here.                                                   Year-To-Date              My Dashboard           ...
© 2011 {e} house studio, LLC All rights reserved.
Tip fo Deveoent‣ Put notes to the developers in a hidden  layer‣ Establish a way to let developers know  of any updates qu...
Results‣   Learn of any technical restraints sooner‣   Able to give developers more time while the UI    is designed‣   Po...
DESIGN1   2                        3                              4   5        © 2011 {e} house studio, LLC All rights res...
© 2011 {e} house studio, LLC All rights reserved.              DESIGNOBJECTIVE o SUBJECTIVE
Grey boxig elp:DESIGN THE UI EFFICIENTLY BY SELECTINGONLY THE NECESSARY LAYOUTS NEEDED  TO PRESENT THE EXECUTED BRAND   RE...
© 2011 {e} house studio, LLC All rights reserved.
© 2011 {e} house studio, LLC All rights reserved.
$8,024.34     YTD BONUSCARD savings      $0.70      fuelperks! savings                    Welcome John Moore      My BI-LO...
$8,024.34     YTD BONUSCARD savings      $0.70      fuelperks! savings                    Welcome John Moore      My BI-LO...
Weekly Ad                                                    fuelperks!                                                Whe...
Weekly Ad                                                    fuelperks!                                                Whe...
© 2011 {e} house studio, LLC All rights reserved.
© 2011 {e} house studio, LLC All rights reserved.
© 2011 {e} house studio, LLC All rights reserved.
© 2011 {e} house studio, LLC All rights reserved.
@font-face {    font-family: AvenirLTStd65Medium;    font-style: normal;    font-weight: normal;             © 2011 {e} ho...
© 2011 {e} house studio, LLC All rights reserved.
Tip fo Desgnig te UI‣ Only photoshop views the client will  need to see in order for them to give  overall approval‣ Selec...
Results‣ Able to give the board the time needed  to review without delaying development‣ Second usability test‣ Visual sta...
© 2011 {e} house studio, LLC All rights reserved.
LAUNCH  OPTIMIZATION1   2                        3                              4   5        © 2011 {e} house studio, LLC ...
© 2011 {e} house studio, LLC All rights reserved.Grey boes are:   BLUEPRINTS TO PASS TO THECLIENT AND A TOOL TO MAKE AND P...
“   In our process, we plan and design forchange and evolution and, luckily for us, we  work for really smart clients who ...
Tip fo auh otimizato‣ Think about versioning for grey boxes‣ Unhide notes for everyone to see‣ Note any changes‣ Educate e...
Results‣ Clients relate back to us in grey boxes‣ New grey boxes to reduce work  client  costs             © 2011 {e} hous...
HOW DID IT WORK OUT?      © 2011 {e} house studio, LLC All rights reserved.
MORE THAN DOUBLED THE     NUMBER OF SHOPPING LISTS2x   TYPICALLY MADE IN A FULL     WEEK IN THE FIRST DAY OF     THE SITE ...
NUMBER OF ITEMS ADDED3.5x   TO EACH NEW SHOPPING       LIST INCREASED BY 3.5       TIMES         © 2011 {e} house studio, ...
2x   AVERAGE TIME SPENT ON     THE SITE HAS DOUBLED       © 2011 {e} house studio, LLC All rights reserved.
1/2   BOUNCE RATE HAS BEEN      CUT IN HALF        © 2011 {e} house studio, LLC All rights reserved.
NO 2 PROJECTS ARE    THE SAME     © 2011 {e} house studio, LLC All rights reserved.
THANKS!qestos? © 2011 {e} house studio, LLC All rights reserved.
Resores   ‣   Grey Box Method - Jason Santa Maria       -     http://bit.ly/3fgaIH   ‣   Jakob Nielsen       -     http://...
Upcoming SlideShare
Loading in …5
×

Converge SE 2011 Building a Strong Foundation

1,409 views

Published on

A look at building strong foundations for website user interfaces with information architecture and grey boxing. We'll look at ideas on information architecture, content up-front, early usability testing and focusing on usability before diving into branding. Ideas on helping you focus on building usable websites that deliver the results clients are looking for.

Published in: Design, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,409
On SlideShare
0
From Embeds
0
Number of Embeds
309
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Converge SE 2011 Building a Strong Foundation

  1. 1. ConvergeSE 2011 Columbia, SC June 24th, 2011 Buidig a strog Broght o yo by AARON QUINN BOB GALMARINI @aaronquinn @bgalmar© 2011 {e} house studio, LLC All rights reserved.
  2. 2. BOB GALMARINI Art Director @bgalmar © 2011 {e} house studio, LLC All rights reserved.
  3. 3. BOB GALMARINI © 2011 {e} house studio, LLC All rights reserved.
  4. 4. AARON QUINNCreative Director @aaronquinn © 2011 {e} house studio, LLC All rights reserved.
  5. 5. AARON QUINN© 2011 {e} house studio, LLC All rights reserved.
  6. 6. @ehousestudio © 2011 {e} house studio, LLC All rights reserved.
  7. 7. WHY WE ARE HERE Grey Boxig © 2011 {e} house studio, LLC All rights reserved.
  8. 8. GREY BOXES ARE MORETHAN A DESIGN TOOL 1 2 3 4 5 © 2011 {e} house studio, LLC All rights reserved.
  9. 9. WORKSHOP VS PRESENTATION © 2011 {e} house studio, LLC All rights reserved.
  10. 10. © 2010 BI-LO, LLC. All Rights Reserved
  11. 11. THE SITUATION © 2011 {e} house studio, LLC All rights reserved.
  12. 12. THE SITUATION © 2011 {e} house studio, LLC All rights reserved.
  13. 13. Lie oter pojts RESEARCH USABILITY TESTING Coent StragyUI DESIGN Writing new content Cusoizig a frot-ed NEW CMS DEVELOPMENT © 2011 {e} house studio, LLC All rights reserved.
  14. 14. THE CHALLENGE:MARKETING DEPARTMENT Coent Stragist IT DEPARTMENTDESIGNERS Copywriter Server DEVELOPERS ADMINS © 2011 {e} house studio, LLC All rights reserved.
  15. 15. THE CHALLENGE: All wokig ogeter betwen 2 opanes BI-LO {e} house Internal Team © 2011 {e} house studio, LLC All rights reserved.
  16. 16. THE CHALLENGE:Customer Data BI-LO New CMS Warehouse Internal API © 2011 {e} house studio, LLC All rights reserved.
  17. 17. Wat we ard fro b-o.o GREY BOXES BUILD ALIGNMENT FOREVERYONE ON THE TEAM GIVING EACH TEAM MEMBER WHAT THEY NEEDWHILE BUILDING EFFICIENCY FOR THE PROJECT AS A WHOLE © 2011 {e} house studio, LLC All rights reserved.
  18. 18. Our RoesAARON QUINN BOB GALMARINIInformation Architecture Brand Style GuideGreyboxing Designing the UI © 2011 {e} house studio, LLC All rights reserved.
  19. 19. CONTENT STRATEGY Coent oes first © 2011 {e} house studio, LLC All rights reserved.
  20. 20. FAST FORWARD THROUGH IA © 2011 {e} house studio, LLC All rights reserved.
  21. 21. GREY BOXING1 2 3 4 5 © 2011 {e} house studio, LLC All rights reserved.
  22. 22. SUBJECTIVE o OBJECTIVE Browse our store GREYBOXING © 2011 {e} house studio, LLC All rights reserved.
  23. 23. Grey boxig elp:BREAK DOWN THE DESIGN PROCESS INTO DIGESTIBLE CHUNKS. BY USING GREY BOXING WE COULD BRING ALIGNMENT AND CLARITY TO THE WHOLE TEAM. © 2011 {e} house studio, LLC All rights reserved.
  24. 24. THE INSPIRATION © 2011 {e} house studio, LLC All rights reserved.
  25. 25. “ ... I can remove myself from worrying aboutcolor 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 Sana Mara http://bit.ly/3fgaIH © 2011 {e} house studio, LLC All rights reserved.
  26. 26. Grey boxig, 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.
  27. 27. © 2011 {e} house studio, LLC All rights reserved.
  28. 28. 1Define a type hierarchy and solve space relationships with real content © 2011 {e} house studio, LLC All rights reserved.
  29. 29. 1 Identify the logo space without using the actual brand 2 Use accurate scale placeholders for imagery and photos3 4 Use accurate scale placeholders Use real content for the custom icons © 2011 {e} house studio, LLC All rights reserved.
  30. 30. Arent Wirefraes Manto Algn Carify 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.
  31. 31. Tip fo Grey Boxig‣ 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.
  32. 32. Results‣ Two designers‣ 50 templates‣ 137 views‣ CONFIDENT TEAM‣ CONFIDENT CLIENT © 2011 {e} house studio, LLC All rights reserved.
  33. 33. USABILITY1 2 3 4 5 © 2011 {e} house studio, LLC All rights reserved.
  34. 34. Many Ias Sem Good at te Tie USABILITY © 2011 {e} house studio, LLC All rights reserved.
  35. 35. THE PROCESS OF BUILDING A PROTOTYPE CAN BE EYE OPENINGWHEN YOU NEED TO PRESENT WHATHAPPENS WHEN THINGS GO WRONG. You have not associated a BONUSCARD with your account. Add your BONUSCARD © 2011 {e} house studio, LLC All rights reserved.
  36. 36. © 2011 {e} house studio, LLC All rights reserved. TESTING A PROTOTYPE IS KEY INMAKING SURE YOUR ASSUMPTIONS ALIGN WITH THE END USER’S NEEDS UNDERSTANDING Success! My BI-LO Account successfully created. An email has been sent to you
  37. 37. © 2011 {e} house studio, LLC All rights reserved.‣ 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 Jaob Nelsen http://bit.ly/14L4LB
  38. 38. USABILITY TESTING CAN BEAS SIMPLE AS SEEING YOUR DESIGNS BEING USED BY ACTUAL USERS ad o elpg tem... © 2011 {e} house studio, LLC All rights reserved.
  39. 39. 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.
  40. 40. Tip fo Testig‣ 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.
  41. 41. 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.
  42. 42. Qestos at this pont? © 2011 {e} house studio, LLC All rights reserved.
  43. 43. DEVELOPMENT1 2 3 4 5 © 2011 {e} house studio, LLC All rights reserved.
  44. 44. 1. Research2. Content Strategy3. Grey Boxing4. Designing the UI5. Development6. QA7. Launch DEVELOPMENT © 2011 {e} house studio, LLC All rights reserved.
  45. 45. DOESN’T HAVE TOBE A RELAY RACE © 2011 {e} house studio, LLC All rights reserved.
  46. 46. USER TESTING DESIGNING UI DEVELOPMENT© 2011 {e} house studio, LLC All rights reserved.
  47. 47. Bause of Grey boxig:WE HAVE ALIGNMENT CLARITY TO START FRONT-ENDDEVELOPMENT CMS STRUCTURE WITHOUT FEAR OF REWORK. © 2011 {e} house studio, LLC All rights reserved.
  48. 48. USER TESTING DESIGNING UI DEVELOPMENT© 2011 {e} house studio, LLC All rights reserved.
  49. 49. © 2011 {e} house studio, LLC All rights reserved.
  50. 50. © 2011 {e} house studio, LLC All rights reserved. JUMP START Strture Futo Stye Can be completed using Need PSD’s to complete grey boxes development
  51. 51. Ways to Save Ways to Save Store Aisles Store Aisles Wellness Pharmacy Wellness Pharmacy Store Services Store Services Delicious Ideas Delicious Ideas Your Community Your CommunityHome Delicious Ideas Recipes Recipes Recipes Expert Cooking Featured Recipes Videos Pork Loin with Sage, Leeks and Articles Juniper CTA 6 servings 1.5 hours Meal Planning These cookies are inspired by a recipe from Guide one of our health partners, Dr. Joel Fuhrman, author of Eat for Health. Easy to make ... Amet, consectetur adipiscing elit. Nulla et justo Party Planning Read the full article euismod orci mattis aliquam. Guide Follow BI-LO Browse Recipes by Preparation TIme f Search For Recipes Quick Easy 30 min. under Search by keywords Search Make it Special 60 min. Take Your Time over 1 hr. Browse Recipes By Course By Category Low Slow over 2 hrs. Appetizers Recipes from Local Farmers Beverages Classic Favorites Browse Recipes by Serving Size Breads Muffins thrive! Healthy Recipes Breakfast Brunch © 2011 {e} house studio, LLC All rights reserved. Meal for 1
  52. 52. Need Help? Click here. Year-To-Date My Dashboard My Shopping Lists My Recipes fuelperks! Our Guarantee Account Info BONUSCARD® Savings $1,364.07 My Dashboard fuelperks! Savings Coupons Expires: 08/07/10 $0.05 / gal View Report FREE Tartar Sauce FREE Cocktail Sauce My Store FREE Rally 2 Liter Rotating Feature Store #161 1365 W. Wade Hampton Blvd. $5.00 OFF BI-LO Party PackTitle: 15.0 My BI-LO - My Dashboard Page: 97 Greer, SC 29650 (864) 968-8830 View All Current Coupons Get Directions Hours: Mon-Fri: 7:00AM - 12:00AM fuelperks! My Shopping List Expires: 08/07/10 Saturday: 7:00AM - 12:00AM Balance towards next 5¢ discount - $9.23 Sunday: 7:00AM - 10:00PM Print List Change My Store 12 items View Full List $40.77 of $50 Email List Savings Expiring This Month $13.27 Callout about going to the weekly ad to add more items to the list You will save Current Savings $14.00 $0.70 if you fill up with 20 gallons per gallon on your next redemption Learn more about fuelperks! © 2011 {e} house studio, LLC All rights reserved.
  53. 53. © 2011 {e} house studio, LLC All rights reserved.
  54. 54. Tip fo Deveoent‣ 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.
  55. 55. 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.
  56. 56. DESIGN1 2 3 4 5 © 2011 {e} house studio, LLC All rights reserved.
  57. 57. © 2011 {e} house studio, LLC All rights reserved. DESIGNOBJECTIVE o SUBJECTIVE
  58. 58. Grey boxig elp:DESIGN THE UI EFFICIENTLY BY SELECTINGONLY THE NECESSARY LAYOUTS NEEDED TO PRESENT THE EXECUTED BRAND REDUCE REWORK BY MINIMIZING THE AMOUNT OF DECISION FACTORS © 2011 {e} house studio, LLC All rights reserved.
  59. 59. © 2011 {e} house studio, LLC All rights reserved.
  60. 60. © 2011 {e} house studio, LLC All rights reserved.
  61. 61. $8,024.34 YTD BONUSCARD savings $0.70 fuelperks! savings Welcome John Moore My BI-LO | Shopping Lists | Recipes | Account Info | Logout Search Ways to save GO Logo Find Your BI-LO Weekly Ads Rx Refills fuelperks! locator Ways to Save Store Aisles Wellness Pharmacy Store Services Delicious Ideas Your Community Need Help? Click here. Year-To-Date My Dashboard My Shopping Lists My Recipes fuelperks! Our Guarantee Account Info BONUSCARD® Savings $1,364.07 My Dashboard fuelperks! Savings Coupons Expires: 08/07/10 $0.05 / gal View Report FREE Tartar Sauce FREE Cocktail Sauce My Store FREE Rally 2 Liter Rotating Feature Store #161 $5.00 OFF BI-LO Party PackTitle: 15.0 My BI-LO - My Dashboard - Alerts Page: 100 1365 W. Wade Hampton Blvd. Greer, SC 29650 (864) 968-8830 View All Current Coupons Get Directions Hours: Mon-Fri: 7:00AM - 12:00AM fuelperks! My Shopping List Expires: 08/07/10 Saturday: 7:00AM - 12:00AM Balance towards next 5¢ discount - $9.23 Sunday: 7:00AM - 10:00PM Print List Change My Store 12 items View Full List $40.77 of $50 © 2011 {e} house studio, LLC All rights reserved. Email List Savings Expiring This Month $13.27
  62. 62. $8,024.34 YTD BONUSCARD savings $0.70 fuelperks! savings Welcome John Moore My BI-LO | Shopping Lists | Recipes | Account Info | Logout Search Ways to save GO Logo Find Your BI-LO Weekly Ads Rx Refills fuelperks! locator Ways to Save Store Aisles Wellness Pharmacy Store Services Delicious Ideas Your Community Need Help? Click here. Year-To-Date My Dashboard My Shopping Lists My Recipes fuelperks! Our Guarantee Account Info BONUSCARD® Savings $1,364.07 My Dashboard fuelperks! Savings Coupons Expires: 08/07/10 $0.05 / gal View Report FREE Tartar Sauce FREE Cocktail Sauce My Store FREE Rally 2 Liter Rotating Feature Store #161 $5.00 OFF BI-LO Party PackTitle: 15.0 My BI-LO - My Dashboard - Alerts Page: 100 1365 W. Wade Hampton Blvd. Greer, SC 29650 (864) 968-8830 View All Current Coupons Get Directions Hours: Mon-Fri: 7:00AM - 12:00AM fuelperks! My Shopping List Expires: 08/07/10 Saturday: 7:00AM - 12:00AM Balance towards next 5¢ discount - $9.23 Sunday: 7:00AM - 10:00PM Print List Change My Store 12 items View Full List $40.77 of $50 © 2011 {e} house studio, LLC All rights reserved. Email List Savings Expiring This Month $13.27
  63. 63. Weekly Ad fuelperks! Where to Redeem How You Save Frequently Asked Questions Program Details We know you don’t like spending money on gas – but you can’t liveTitle: 1.1 Ways to Save - fuelperks! Page: 25 Price Lock without it, either. BI-LO makes the pump less painful by letting you earn incredible gas savings every time you shop with your Meal Deal My BI-LO BONUSCARD. Buy 1, Get 1 Free BI-LO puts you in the driver’s seat Signup 10% Wine 1. Shop 2. Pump 3. Save 50¢ off per gallon for If you earn 50¢ in Double Manufacture Coupons fuelperks! ... every $50 you spend on groceries! $3.00/gallon gas $4 TopCare will cost $2.50/ Look for the fuelperks! logo at gallon participating gas stations to redeem your points. Reduce your price per gallon Coupons and save big! Enter your city state or ZIP code Use your BI-LO BONUSCARD BI-LO Brands and rack up fuelperks! points every time you shop. Check the bottom of your receipt for your Search $4 Generics balance. © 2011 {e} house studio, LLC All rights reserved. Senior Bonus
  64. 64. Weekly Ad fuelperks! Where to Redeem How You Save Frequently Asked Questions Program Details We know you don’t like spending money on gas – but you can’t liveTitle: 1.1 Ways to Save - fuelperks! Page: 25 Price Lock without it, either. BI-LO makes the pump less painful by letting you earn incredible gas savings every time you shop with your Meal Deal My BI-LO BONUSCARD. Buy 1, Get 1 Free BI-LO puts you in the driver’s seat Signup 10% Wine 1. Shop 2. Pump 3. Save 50¢ off per gallon for If you earn 50¢ in Double Manufacture Coupons fuelperks! ... every $50 you spend on groceries! $3.00/gallon gas $4 TopCare will cost $2.50/ Look for the fuelperks! logo at gallon participating gas stations to redeem your points. Reduce your price per gallon Coupons and save big! Enter your city state or ZIP code Use your BI-LO BONUSCARD BI-LO Brands and rack up fuelperks! points every time you shop. Check the bottom of your receipt for your Search $4 Generics balance. © 2011 {e} house studio, LLC All rights reserved. Senior Bonus
  65. 65. © 2011 {e} house studio, LLC All rights reserved.
  66. 66. © 2011 {e} house studio, LLC All rights reserved.
  67. 67. © 2011 {e} house studio, LLC All rights reserved.
  68. 68. © 2011 {e} house studio, LLC All rights reserved.
  69. 69. @font-face {    font-family: AvenirLTStd65Medium;    font-style: normal;    font-weight: normal; © 2011 {e} house studio, LLC All rights reserved.
  70. 70. © 2011 {e} house studio, LLC All rights reserved.
  71. 71. Tip fo Desgnig te 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.
  72. 72. 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.
  73. 73. © 2011 {e} house studio, LLC All rights reserved.
  74. 74. LAUNCH OPTIMIZATION1 2 3 4 5 © 2011 {e} house studio, LLC All rights reserved.
  75. 75. © 2011 {e} house studio, LLC All rights reserved.Grey boes are: BLUEPRINTS TO PASS TO THECLIENT AND A TOOL TO MAKE AND PRESENT RAPID OPTIMIZATIONS.
  76. 76. “ In our process, we plan and design forchange and evolution and, luckily for us, we work for really smart clients who want to absorb this sustainable approach into their process. - Kevin Saro - Hapy Cog http://cognition.happycog.com/article/ sustainable-not-pixel-perfect © 2011 {e} house studio, LLC All rights reserved.
  77. 77. Tip fo auh otimizato‣ 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.
  78. 78. 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.
  79. 79. HOW DID IT WORK OUT? © 2011 {e} house studio, LLC All rights reserved.
  80. 80. MORE THAN DOUBLED THE NUMBER OF SHOPPING LISTS2x TYPICALLY MADE IN A FULL WEEK IN THE FIRST DAY OF THE SITE GOING LIVE © 2011 {e} house studio, LLC All rights reserved.
  81. 81. NUMBER OF ITEMS ADDED3.5x TO EACH NEW SHOPPING LIST INCREASED BY 3.5 TIMES © 2011 {e} house studio, LLC All rights reserved.
  82. 82. 2x AVERAGE TIME SPENT ON THE SITE HAS DOUBLED © 2011 {e} house studio, LLC All rights reserved.
  83. 83. 1/2 BOUNCE RATE HAS BEEN CUT IN HALF © 2011 {e} house studio, LLC All rights reserved.
  84. 84. NO 2 PROJECTS ARE THE SAME © 2011 {e} house studio, LLC All rights reserved.
  85. 85. THANKS!qestos? © 2011 {e} house studio, LLC All rights reserved.
  86. 86. Resores ‣ 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 AARON QUINN BOB GALMARINIAaron@ehousestudio.com Bob@ehousestudio.com @aaronquinn @bgalmar © 2011 {e} house studio, LLC All rights reserved.

×