After action reportMobile websiteRedesign
21 April 2009 DesignForMobile
April 2009
PlanExisting site – Opportunities
• 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
2
April 2009
PlanNew site – Goals
• 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
3
April 2009
PerformanceInformation architecture
• Hub and spoke metaphor
• Customized home page concept, not quite implemented
D
Home
7.1.2.1LocalizationInterceptor
7.1.2Change location
1 Weather
4 Sports & Recreation
2 Severe Weather 3 Travel
5 Health & Home 6 Photos & Fun
7 Settings &Options
1.0Weather landingpage
1.1Now
(current conditions)
1.2Outlook
(forecasts)1.3Map
center
1.2.236 hour forecast
1.2.1Hourly
forecast
1.2.310 day forecast
1.2.4School day
forecast
1.2.5Weekend forecast
1.2.6Current
conditionsvideo
7.2Feedback
7.1Preferences
7.1.1Manage home
modules7.0Settings & Options LandingUser enters
weather.com
Cookiefound
Cookienot found
7.3Registration interceptor
Set cookieReturn to path
User requestfor custom
features firsttime
7.4Send to friend
7.5Message
page
2.0Severe weather landingpage
2.2Hurricane central / Stormwatch
2.3Weather
news2.1
Weather alerts
summary
2.4Severe weather
video
2.1.1Weather
alertsdetails
2.2.1Tropical
video
2.3.2Midwest weather
news
2.3.1Northeast weather
news
2.3.3South
weather news
2.3.4West
weather news
2.3.5Regional
video
3.0Travel landingpage
3.4Travel wise
video
3.2Airport
delay map3.1
Airportdelays
3.3Traffic
3.3.1Traffic
incidents
4.0Sports & recreation
landingpage
4.1Seasonal sport 1
4.2Seasonal sport 2
4.3Seasonal sport 3
4.4Seasonal sport 4
4.5Snow &
ski
4.6Local Golf
4.7Boat &beach
4.8Weekend weather
5.0Health &
home landing
page
5.1School day
forecast
5.2Green tips
5.3Allergies &
Pollen
5.4Petcast
5.5Pet
slideshow
5.2.1Green tips
archive
6.0Photos &
fun landing
page
6.3Almanac
6.5Celebration
weather
6.4Wallpaper
6.1Photos
6.2Trivia
4
C1a Section landing pages – best-case devices
1 Default state
Page Titles Are Bold
Section titles are bold
Conditions Text 12px Plain | Centered
2
40Px Plain
Alert text 14pxPlain, Left Justif.
Lawrence, KS 66044
10 px
10 px
10 px
5 px
12 pxIcon Space: 30x30
Info text for these modules: 14px Plain
11 am 46° Precipitation 90%
Expander text 14px Plain
Label left-alignedCenter height in field
30px
11 am 46° Precipitation 90%
3
4
Most popular maps:• Radar
10 px
10 px
10 px
10 px
10 px
6 px
6 px
30px
Section titles are bold
Expander text 14px Plain
10 px
10 px
Section title 18px Bold
119°
216x36
6:1 Large Ad Unit
H2 Left-aligned
S
L
M
M
S
Special case typeWhen possible, use extra large type for special elements. When not possible, use Large type.
Overland Park, KS (66206)
Bold Page Title
Bold Subtitles Listings 14px Plain, 140% H Listings 14px Plain, 140% H Listings 14px Plain, 140% H 2 more...
Video Hurricane
Caption text 12pPlain, 2 lines
2
3
4 5
C1bSection landing pages – dynamic scriptingShown 240px wide
C1c Section landing pages – non-scriptingShown 176px wide
10 px
10 pxDropdown title 14p plain
10 px
Weather News Latest forecast for severe... 5 more...
6 px
6 pxCaption text 12pPlain, 2 lines
Bold Page Title
Current alertsSevere thunderstorm ...
Severe thunderstorm ...
Flash flood watch
2 more...
Weather newsLatest severe forecast
5 more...
VideoIndustrial buildings collapse in south Florida...
2
3
4
5
2
3
4
Overland Park, KS (66026)
10 px
Listing text 12px Plain
Listing text 150% H
Listing text 12px Plain
Listing text 150% H
6 px
10 px10 px
10 px
10 px
6 px
10 px
VideoIndustrial buildings
5
6 px
10 px
10 px10 px
10 px10 px
168x286:1 Med Ad Unit
120x206:1 S Ad Unit
119° 1 119° 1
Access Keys:When appearing with Title, render right and top alligned to margins
No backgroundsRules and type are the only elements used for organization of content in these layouts, not backgrounds or gradients.
6 pxbetween accesskeyand text label
GraphicsTwo or more graphics may be loaded side-by-side if desiresd.
S
S
M
L
S
L
M
April 2009
PerformanceProgressive enhancement
• Design for all browser classes at once • Write rules around the presentation and function
of the objects
5
Travel
Outdoors
Weather
Seasonal information
Severe weather
Severe weather center
Warnings & watches
Current warnings & watches
Severe Thunderstorm Watch
Flash Flood Watch
Flash Flood Warning
Hurricane center
6
7
8
9
0
Unfolding lists:Gradients, and general design principles, identical to those in C1a.
Icons for sections are placeholder only. They will have to be constructed in coordination with TWC designers to assure they support the existing brand sense.
D1 Home – Best-case browsers
Overland Park, KS (66206)
119°Module titlebar gradientFrom#ccffffTo#99ccff
Pagebackground10% gray
#e6e6e6
Holiday weather
Cold and mostly clear with a chance of ice next week
Christmas eve:Low 38°Clear
5
Pollen 3
Pollen Forecast:Grass MediumTree Low
Forecast 2
Local radar
Map Center 4 Module borders60% gray
#666666
Page backgroundvaries from all otherpages
Background gradientprovided or as describedto right.Back up with solid#99ccff
Data on whitebackgrounds
Corners will be providedas graphics for devices which require it
Use color text and icons whenever it will add value to communicating information.
Avoid excessive rules, and fields of color within modules.
Partly cloudy - Rain
78°
D2 Home – Dynamic scriptingShown 240px wide
Forecast - Wed 61°40° 2
Radar 3
Pollen - Grass: Low 4
Forecast Earth - Spring 5
HelpManage modulesSettingsUse metric unitsVer en español
Travel
Outdoors
Weather
Seasonal information
Severe weather
6
7
8
9
0
©1995-2008 Weather Wherever, LLC
Overland Park, KS (66206)
Overland Park, KS (66206)
119°
Page background is white, as on all other pages on site
Background gradient provided or as described to right. Back up with solid #99ccff
Icons for sections are placeholder only. They will have to be constructed in coordination with TWC designers to assure they support the existing brand sense.
Use color text and icons whenever it will add value to communicating information. Avoid rules and fields of color within modules.
Icon to left will be provided.
All rules are 1px solid black
D3 Home – Non-scriptingShown 128px wide, at 150%
Travel
Outdoors
Weather
Seasonal information
Severe weather
Forecast - Wed 2
Holiday outlook 5
6
7
8
9
0
Pollen - Low 4
Radar 3
HelpManage modulesSettingsUse metric unitsVer en español
Overland Park, KS (66206)
119°
Overland Park, KS (66206)
©1995-2008 Weather Wherever, LLC
Modulegradient
From#ccffffTo#99ccff
Page background is white, as on all other pages on site
Background gradient provided or as described to right. Back up with solid #99ccff
Icons for sections are placeholder only. They will have to be constructed in coordination with TWC designers to assure they support the existing brand sense.
Use color text and icons whenever it will add value to communicating information. Avoid rules and fields of color within modules.
Icon to left will be provided.
All rules are 1px solid black
April 2009
PerformanceHome page focus
• Too much focus on home page• Portal theory used to bring flexible content to
page • Most appropriate design for each browser class
6
Overland Park, KS (66206)
ow-lying areas... A severe-thun
78°
7:19 PM
Weather Wherever Mobile
http://www.wx.com
Travel
Outdoors
Weather
Seasonal information
Today 65° 46°
Wed 73° 49°
Thu 75° 54°
Forecast Radar
Seasonal Info
Pollen ForecastGrass MediumTree Low
New location:Search by name, ZIP or airport code:
Search
Toronto, ON, Canada
Atchison, KS
Columbia, MO
Lawrence, KS
Recent locations:
April 2009
PerformanceUnderstanding the issues
Just a few of the many:• Advertising• Localization • Registration
7
April 2009
IssuesEnd results
• It hasn’t launched yet
8
April 2009
IssuesDevelopment
• 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
9
April 2009
FixImprove our process• 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
10
April 2009
FixChange the world• Train clients – should some be required to get
personalized training before we deliver?• Improve the sector – spread knowledge across
the industry
11
April 2009
FixChange ourselves• 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
12
After action reportMobile websiteRedesign
21 April 2009 DesignForMobile