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