Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

We all spend too much time talking, especially in public, about success. The best way to learn how to change and improve is by reviewing how things could have gone better. I've been thinking this for a little while at conferences; we need to share our failures as well as our successes if we want to improve as an industry and practice area.

I'll go first: While the design completed for this particular project (which will not be named) itself is fine, the deliverables and client interaction could have been better. I am putting together a brief presentation covering intent, desire, design approach, delivery, satisfaction and a discussion of how it could be improved.

Presented at Design for Mobile 2009, 21 April 2009:

Published in: Technology, News & Politics
  • Be the first to comment

  • Be the first to like this


  1. 1. After action report Mobile website Redesign 21 April 2009 DesignForMobile
  2. 2. Plan – Opportunities Existing site • Wireless site does not reflect desktop • One-size-fits-all, so looks old • Slow, inefficient • Marginal analytics • Does not meet current revenue and content strategies • Difficult to update, incremental improvements awaiting general update April 2009 2
  3. 3. Plan Goals New site – • Develop a new IA that: • Offers more content • Makes deeper and broader content available • Aligns to current sales & marketing strategies • Allows for expandability and changes without a complete redesign in the future • Appeal to high end devices, but work with all • Specifically function well with touch/pen devices • Meet page size and load time targets • Allow for better tracking • Cut over to certain new systems April 2009 3
  4. 4. Performance Information architecture • Hub and spoke metaphor 3 Travel 1 Weather 2 Severe Weather 1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.2.6 2.3.1 2.3.2 2.3.3 2.3.4 2.3.5 3.3.1 Hourly 36 hour 10 day School day Weekend Current Northeast Midwest South West Regional Traffic forecast forecast forecast forecast forecast conditions weather weather weather weather video incidents video news news news news 1.2 2.3 2.4 3.2 3.3 Outlook Weather Severe Airport Traffic 1.3 1.1 2.1.1 2.1 2.2 2.2.1 3.1 3.4 (forecasts) news weather delay map Map Now Weather Weather Hurricane Tropical Airport Travel wise video center (current alerts alerts central / video delays video conditions) details summary Storm watch 1.0 2.0 3.0 Weather Severe Travel landing weather landing page landing page page 7 Settings & Cookie 7.1 7.1.1 found Options Preferences Manage home modules D 7.1.2 7.0 User request Localization Change Settings & 7.3 for custom Set cookie Interceptor Home location Options User enters Registration Landing features first Return to path interceptor Cookie time not found 7.2 7.4 7.5 Feedback Send to Message friend page 4.0 5.0 6.0 Sports & Health & Photos & recreation home fun landing landing landing page page page 4.1 4.8 Seasonal Weekend sport 1 weather 5.1 5.2 5.3 5.4 5.5 6.1 6.2 6.3 6.4 6.5 School day Green tips Allergies & Petcast Pet Photos Trivia Almanac Wallpaper Celebration forecast Pollen slideshow weather 4.2 4.3 4.4 4.5 4.6 4.7 5.2.1 Seasonal Seasonal Seasonal Snow & Local Golf Boat & Green tips sport 2 sport 3 sport 4 ski beach archive 4 Sports & Recreation 5 Health & Home 6 Photos & Fun • Customized home page concept, not quite implemented April 2009 4
  5. 5. Performance Progressive enhancement • Design for all browser classes at once • Write rules around the presentation and function of the objects n landing pages – best-case devices C1b Section landing pages – dynamic scripting C1c Section landing pages – non-scriptin Shown 240px wide Shown 176px wide tate 119° 119° 119° 1 1 e r Overland Park, KS (66026) Overland Park, KS (66206) , 6:1 S Ad Unit 120x20 168x28 Lawrence, KS 66044 6:1 Med Ad Unit 10 px Bold Page Title 10 px Access Keys: L Bold Page Title 6 px 216x36 When appearing L 0 px 6 px Listing text 12px Plain 2 with Title, render 10 px between accesskey 6:1 Large Ad Unit Listing text 150% H right and top 3 Dropdown title 14p plain and text label 0 px alligned to margins Listing text 12px Plain Page Titles Are Bold 4 L 10 px Bold Subtitles 2 0 px Listing text 150% H M 5 10 px 10 px Listings 14px Plain, 140% H Section titles are bold S 5 px 2 10 px M Current alerts Listings 14px Plain, 140% H 6 px 2 M 40Px 10 px Alert text 14px 2 px No backgrounds Severe thunderstorm ... Listings 14px Plain, 140% H S Plain, Left Justif. Rules and type are Plain Severe thunderstorm ... 2 more... 10 px the only elements ed Conditions Text 12px Plain | Centered used for organization 10 px Flash flood watch S ld 10 px of content in these 10 px 2 more... Weather News layouts, not 3 Expander text 14px Plain 10 px M backgrounds or 30px Latest forecast for severe... gradients. 10 px Weather news 3 Section titles are bold 5 more... 3 ned Latest severe forecast 6 px 10 px 11 am 46° Precipitation 90% S 10 px 5 more... 10 px Video Hurricane 4 5 Info text for these modules: 14px Plain 6 px 10 px 10 px Graphics Video 4 11 am 46° Precipitation 90% Two or more 6 px 10 px Industrial graphics may be buildings loaded side-by-side if Expander text 14px Plain 30px desiresd. collapse in south Florida... Section title 18px Bold 6 px 4 10 px Most popular maps: 6 px Video Caption text 12p Caption text 12p 5 April 2009 5 S • Radar Plain, 2 lines Plain, 2 lines Industrial buildings
  6. 6. Performance Home page focus • Too much focus on home page • Portal theory used to bring flexible content to page • Most appropriate design for each browser class D1 Home – Best-case browsers D2 Home – Dynamic scripting D3 Home – Non-scripting Shown 240px wide Shown 128px wide, at 150% Module Module title 119° 119° gradient bar gradient 119° From From #ccffff #ccffff To To Overland Park, KS (66206) #99ccff Overland Park, KS (66206) #99ccff Page background is Page white, as on all background is other pages on Page Overland Park, KS (66206) white, as on all site background other pages on Forecast - Wed 61° 40° 2 10% gray Forecast - Wed Use color text and icons 2 site Page background whenever it will add value #e6e6e6 Use color text and icons varies from all other to communicating Pollen - Low Radar Icon to left will be Icon to left will be whenever it will add value 4 3 pages information. provided. provided. to communicating Avoid rules and fields of information. Radar Pollen - Grass: Low Forecast Map Center 3 color within modules. 4 Module 2 4 Avoid rules and fields of borders Background gradient Background gradient color within modules. Holiday outlook 60% gray Forecast Earth - Spring provided or as 5 provided or as 5 78° described to right. described to right. #666666 Travel Back up with solid Back up with solid 6 Travel 6 #99ccff #99ccff Data on white Use color text and icons Outdoors backgrounds 7 whenever it will add value Outdoors Partly cloudy - Rain 7 to communicating Weather information. 8 Weather 8 All rules are 1px solid Pollen All rules are 1px solid 3 Seasonal information 9 Avoid excessive rules, black Background gradient Seasonal information black 9 and fields of color within provided or as described Severe weather modules. 0 to right. Severe weather 0 Back up with solid Pollen Forecast: Icons for sections are #99ccff placeholder only. They Icons for sections are Grass Medium Help will have to be placeholder only. They Local radar Tree Low Manage modules constructed in will have to be coordination with constructed in Settings Help Corners will be provided TWC designers to coordination with Holiday weather Use metric units 5 as graphics for devices assure they support TWC designers to Manage modules which require it the existing brand Ver en español assure they support Settings Cold and mostly Christmas eve: sense. the existing brand Use metric units clear with a sense. Low 38° chance of ice Ver en español Clear next week Overland Park, KS (66206) Icons for sections are Overland Park, KS (66206) placeholder only. They Travel 6 will have to be constructed in Outdoors 7 ©1995-2008 Weather coordination with Wherever, LLC TWC designers to ©1995-2008 Weather Weather 8 assure they support Wherever, LLC the existing brand Seasonal information 9 sense. Severe weather 0 Severe weather center April 2009 6 Warnings & watches Current warnings & watches Unfolding lists: Severe Thunderstorm Watch Gradients, and general design
  7. 7. Performance Understanding the issues Just a few of the many: 7:19 PM Weather Wherever Mobile • Advertising • Localization 78° • Registration ow-lying areas... A severe-thun Overland Park, KS (66206) New location: Search by name, ZIP or airport code: Search Forecast Radar 65° 46°locations: Recent Today Toronto, ON, Canada Wed 73° 49° Atchison, KS Thu 75° 54° Columbia, MO Seasonal Info Lawrence, KS Pollen Forecast Grass Medium Tree Low Travel Outdoors April 2009 7 Weather
  8. 8. Issues End results • It hasn’t launched yet April 2009 8
  9. 9. Issues Development • Design concept internalized, driving towards it • Single document required by implementation and test teams • Mostly just handed off to development • Development did not (apparently) understand deliverables – do not work in object-oriented mode • Development still working in table-based layout • Some data not expressed correctly April 2009 9
  10. 10. Fix our process Improve • Require early access • Try to be more trusted by the client – we won’t bill for just picking up the phone • Be more integrated with marketing and product people • Work on collaboration processes with development • Continue to explore deliverables – there is no one perfect solution for everyone April 2009 10
  11. 11. Fix the world Change • Train clients – should some be required to get personalized training before we deliver? • Improve the sector – spread knowledge across the industry April 2009 11
  12. 12. Fix ourselves Change • Be less involved – embrace the big-vendor model, toss it over the wall and don’t care about how it turns out • Be more involved – stop being a design studio and offer development and strategy directly or through partnerships April 2009 12
  13. 13. After action report Mobile website Redesign 21 April 2009 DesignForMobile