Refresh DC: Data-Driven Design Decisions

41
Data-Driven Design Decisions

Transcript of Refresh DC: Data-Driven Design Decisions

Page 1: Refresh DC: Data-Driven Design Decisions

Data-Driven Design Decisions 

Page 2: Refresh DC: Data-Driven Design Decisions

Panel:Craig Green Web Strategist at Network SolutionsJim LaneDirector of User Experience for AddThis.com at Clearspring Technologies Paul KochMarketing Specialist at Viget LabsModerator: Greg RobletoDirector of User Experience Design at The Motley Fool

Page 3: Refresh DC: Data-Driven Design Decisions

Introductions

Craig Green Web Strategist Network Solutions.  

Let the Data Take You Away... 

Page 4: Refresh DC: Data-Driven Design Decisions

Beauty isn't always BestWe launched this navbar 3 years ago, it borrowed heavily from Apple's website at the time.We all loved it, it was clean, clear and simple.Traffic, though, dropped.

The "Gapped Toothed Monster" beat it by 169% in click volume.

Page 5: Refresh DC: Data-Driven Design Decisions

Beauty is the Beast (Continued).

Ugly did better. Note that "pretty" has actions higher on page, clearer price message, and clear list of features, all driven by UX best practices....

Pretty New Page Ugly Old Page

Page 6: Refresh DC: Data-Driven Design Decisions

Data can take you strange placesWe found that different transaction types respond to different cart designs. New customers preferred the design on the left - better conversion. Renewing customers preferred the design on the right -- better cash. 

Page 7: Refresh DC: Data-Driven Design Decisions

Data Can Tell you When to Act

Adding in the transactional potential of IOS/Android, we decided it was finally worth our while to build out a fully transactional mobile site.  Any other previous time would have been premature or brochure-ware content.

After 6 years of talking about Mobile, the time had come to act.  

For our site,  Mobile Traffic Increased 6x in the last 16 months.  

Page 8: Refresh DC: Data-Driven Design Decisions

Cool, but how do I do this?• You've already got the basic tool set -- your web logs & GA.

o Conversion from page to pageo Conversion to a given goal (Cart, lead-gen page, acct

login, etc)• Use a web log tool, and figure out how your pages are

doing.• Google Webmaster Toolkit has a basic A/B test framework

that works with GA -- you code up your original and test pages, then Google does the rest.

• Higher -end solutions are available from Omniture, VisualWebsiteOptimizer, etc. 

• Ninjabuttons -- Tests buttons, and a great way to start.

Page 9: Refresh DC: Data-Driven Design Decisions

Beakman & Jax ExperimentA.  Two pages -- Button on one leads to the second page.

B. Ask your friend to write some JavaScript, so 1/2 the traffic goes to one page, and 1/2 goes to the next.

C. Look in your web logs, and see which page converted best.

Page 10: Refresh DC: Data-Driven Design Decisions

How do I pick a Winner?

200 conversions is a basic rule of thumb.   There's lot's of math to do it well, but most off-shelf tools do that for you.

If your test has no winner, then  pick the one you like best, and start another test!

Page 11: Refresh DC: Data-Driven Design Decisions
Page 12: Refresh DC: Data-Driven Design Decisions
Page 13: Refresh DC: Data-Driven Design Decisions
Page 14: Refresh DC: Data-Driven Design Decisions
Page 15: Refresh DC: Data-Driven Design Decisions
Page 16: Refresh DC: Data-Driven Design Decisions
Page 17: Refresh DC: Data-Driven Design Decisions
Page 18: Refresh DC: Data-Driven Design Decisions
Page 19: Refresh DC: Data-Driven Design Decisions
Page 20: Refresh DC: Data-Driven Design Decisions

ClickTale - Clicks

Page 21: Refresh DC: Data-Driven Design Decisions

ClickTale – Mouse Movement

Page 22: Refresh DC: Data-Driven Design Decisions

ClickTale – Scroll Reach

Page 23: Refresh DC: Data-Driven Design Decisions

ClickTale – Attention

Page 24: Refresh DC: Data-Driven Design Decisions

ClickTale

Lots of search bar usage

Page 25: Refresh DC: Data-Driven Design Decisions

ClickTale

Lots of search bar usageFor links contained on this page

(dining, housing, student organizations)

Page 26: Refresh DC: Data-Driven Design Decisions

ClickTale

surprisingly low number of clicks

Page 27: Refresh DC: Data-Driven Design Decisions

ClickTale

surprisingly low number of clicks

surprisingly high number of clicks

Page 28: Refresh DC: Data-Driven Design Decisions

ClickTale

Page 29: Refresh DC: Data-Driven Design Decisions

ClickTale

Page 30: Refresh DC: Data-Driven Design Decisions

ClickTale

Page 31: Refresh DC: Data-Driven Design Decisions

ClickTale

Page 32: Refresh DC: Data-Driven Design Decisions

ClickTale

Page 33: Refresh DC: Data-Driven Design Decisions

ClickTale

Page 34: Refresh DC: Data-Driven Design Decisions

ClickTale

Page 35: Refresh DC: Data-Driven Design Decisions

ClickTale

Page 36: Refresh DC: Data-Driven Design Decisions

ClickTale

Page 37: Refresh DC: Data-Driven Design Decisions

ClickTale

Page 38: Refresh DC: Data-Driven Design Decisions

ClickTale

Page 39: Refresh DC: Data-Driven Design Decisions
Page 40: Refresh DC: Data-Driven Design Decisions
Page 41: Refresh DC: Data-Driven Design Decisions

Panel:Craig Green Web Strategist at Network SolutionsJim LaneDirector of User Experience for AddThis.com at Clearspring Technologies Paul KochMarketing Specialist at Viget LabsModerator: Greg RobletoEmail: [email protected]  Twitter: robletoDirector of User Experience Design at The Motley Fool