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: http://design4mobile.com/sessions/107.html

1. After action report
Mobile website
Redesign
21 April 2009 DesignForMobile

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. 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. 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
7.1.2.1 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
weather.com 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. 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. 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. Performance
Understanding the issues
Just a few of the many:
7:19 PM
Weather Wherever Mobile
• Advertising
http://www.wx.com
• 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. Issues
End results
• It hasn’t launched yet
April 2009
8

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. 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. 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. 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. After action report
Mobile website
Redesign
21 April 2009 DesignForMobile