The Art and Science of Web Design for ROI

Taming the HIPPO, Improving Outcomes

Bjorn Thomson, ImageX Media

IMAGEX AND HIGHER EDUCATION

IMAGEX has delivered web services to colleges and universities throughout Canada and the US

Maintains an extensive presence in the higher-education marketplace

Higher ed team includes over 40 years of university experience

Developed OpenEDU, a Drupal Accelerator supporting the EDU marketplace

“There are no expert marketers. Only experienced marketers and

expert testers.”

– Flint McGlaughlin

CHALLENGE

Visual design is a space where people generally feel confident giving opinions

Those opinions do not always match what is in the best interests of the project

Projects are a significant use of time, money and knowledge and a HIPPO-based model dilutes this effort

6 STEPS FOR IMPROVING OUTCOMES

1. Back decisions with data

2. Incorporate user feedback early and often

3. Balance usability and conversion

4. Develop meaningful KPIs

5. Focus on outcomes, not preferences

6. Separate visual and interaction design

1. Back decisions with data

• Data-backed decisions are not only better in quality but tend to circumvent stakeholder objections:

• Reframes the conversation from preference to outcome

• If, for example, increasing enrolment is the goal, that’s how we should evaluate design effectiveness

From: http://www.slideshare.net/ahempell/van-ue-researchtoolboxv04share

1. Back decisions with data

• Step One: competitive analysis

• Identify patterns, conventions

• Provides a baseline and a sense of direction

• Establishes hypothesis, but must be validated

1. Back decisions with data

• Step Two: user testing

• Three relevant dimensions:

1. usability

2. conversion

3. satisfaction

1. Back decisions with data

2. Incorporate user feedback

• Do this early and often

• Make this feedback easy to consume (visuals help)

• Include both stakeholders and end users in ideation

• Whenever possible, encourage stakeholders to be present during end-user ideation

3. Balance usability and conversion• Usability:

• Establish clear pathways for users

• Define visual hierarchy

• Reduce cognitive load

• Key activities:

• Competitive analysis

• User testing (Optimal Workshop)

3. Balance usability and conversion• Conversion:

• Strategic use of page elements

• Establish page flow

• Key activities:

• Heuristic analysis

• A/B testing

http://unbounce.com/docs/conversion-centered-design-guide.pdf

http://unbounce.com/docs/conversion-centered-design-guide.pdf

http://unbounce.com/docs/conversion-centered-design-guide.pdf

http://unbounce.com/docs/conversion-centered-design-guide.pdf

http://unbounce.com/docs/conversion-centered-design-guide.pdf

4. Define meaningful KPIs

• Create meaningful KPIs that:

• Will resonate with stakeholders

• Are demonstrably aligned with project goals

• Are small in overall number

• Are easy to measure and understand

5. Focus on outcomes, not preferences• We can measure conversion and usability with testing – however, there is

also an emotional component to design

• This emotional response can also be measured and quantified

• Design goals can include brand attributes, user’s desired attributes

• Ex: exciting, sophisticated, inclusive, bold etc.

• Microsoft Product Reaction Cards are good for this

6. Separate visual and interaction design• Use style tiles

• Put interaction design on a separate track

• The visual design should then be much easier to approve

PUTTING IT ALL TOGETHER

Resources

• The Ultimate Guide to Conversion Centered Design: http://unbounce.com/conversion-centered-design-guide/

• Treejack: https://www.optimalworkshop.com/treejack

• Microsoft Product Reaction Cards: http://www.uxmatters.com/mt/archives/2010/02/rapid-desirability-testing-a-case-study.php

• MarketingExperiments YouTube channel: https://www.youtube.com/user/mktgexperiments

THE BIG FINISH