Refresh DC: Data-Driven Design Decisions

Post on 16-Apr-2017

971 views 1 download

Transcript of Refresh DC: Data-Driven Design Decisions

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

Introductions

Craig Green Web Strategist Network Solutions.  

Let the Data Take You Away... 

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.

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

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. 

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.  

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.

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.

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!

ClickTale - Clicks

ClickTale – Mouse Movement

ClickTale – Scroll Reach

ClickTale – Attention

ClickTale

Lots of search bar usage

ClickTale

Lots of search bar usageFor links contained on this page

(dining, housing, student organizations)

ClickTale

surprisingly low number of clicks

ClickTale

surprisingly low number of clicks

surprisingly high number of clicks

ClickTale

ClickTale

ClickTale

ClickTale

ClickTale

ClickTale

ClickTale

ClickTale

ClickTale

ClickTale

ClickTale

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: grobleto@fool.com  Twitter: robletoDirector of User Experience Design at The Motley Fool