Creating A Remarkable User Experience

50
Toronto HUG May 28 th , 2014 Dee Dee de Kenessey Inbound Professor HubSpot @deedeedkc Hayley Mullen HUG Leader Uberflip @hayley_mullen WELCOME!
  • date post

    13-Sep-2014
  • Category

    Marketing

  • view

    800
  • download

    2

description

HubSpot Inbound Marketing Professor Dee Dee de Kenessey joined us at the Spring 2014 Toronto HUG meetup at Uberflip HQ to talk about creating a great experience for users. http://uberflip.com

Transcript of Creating A Remarkable User Experience

Page 1: Creating A Remarkable User Experience

Toronto HUGMay 28th, 2014

Dee Dee de KenesseyInbound ProfessorHubSpot@deedeedkc

Hayley MullenHUG LeaderUberflip@hayley_mullen

WELCOME!

Page 2: Creating A Remarkable User Experience

@hayley_mullen

Your HUG leader

Hayley Mullen

A few facts:

• Peruses the SPCA dog listings

• Loves Seinfeld and cheese

• Worked in startups for two

years before joining Uberflip

• Is the Uberflip Community

Manager

Page 3: Creating A Remarkable User Experience

Dee Dee de Kenessey

@deedeedkc

A few facts:

• First time in Toronto.

• Loves porters.

• Dislikes pudding.

• Created and runs the Contextual

Marketer Certification, and is a website

personalization expert.

From HubSpot HQ

Page 4: Creating A Remarkable User Experience
Page 5: Creating A Remarkable User Experience

Lindsay Thibeault

(baker extrordinaire)

Kyle Geiste

(head-balancing ninja)

Rachel Goodman Moore

(inbound neuroscientist)

Mark Kilens

(our fearless leader)

Sarah Bedrick

(the headless)

Nick Salvatoriello

(aka DJ Nick Sal)

Dee Dee de Kenessey

(that’s me!)

Chris LoDolce

(Iron Chef of waffles)

Jillian Day

(the faceless)

Isaac Moche

(rhymes with Yoshi)

Brittany Matern

(swag-meister)

Johnny Garces

(social media

guru)

Page 6: Creating A Remarkable User Experience

Enough about me.What about you?Find someone in the room that you don’t already know,

and learn their name, what they do for work, and their

favorite place to eat in Toronto.

Page 7: Creating A Remarkable User Experience

LET’S TALK ABOUTCREATING A REMARKABLE

USER EXPERIENCE

Page 8: Creating A Remarkable User Experience

1 Why does user experience matter?

2 What makes a user experience remarkable?

3 Evaluating your website

4 Two examples

5 In-class exercise

AGENDA

Page 9: Creating A Remarkable User Experience

TODAY’S GOAL:You will be able to create targeted, remarkable content to fuel your inbound efforts.

Page 10: Creating A Remarkable User Experience

WHY DOES USER EXPERIENCE MATTER?1

Page 11: Creating A Remarkable User Experience

FLICKR USER MICHAEL POLLACK

It’s not about you, it’s about your users.Thoughtful user experience helps our users accomplish their goals, first and foremost. We must understand our users’ needs and figure out how to solve them on our website.

Page 12: Creating A Remarkable User Experience

FLICKR USER ANT1_G

Most importantly, it’s about alignment.A good user experience aligns the goals of both the user and your business. When your users reach their goals, your business does, too.

Page 13: Creating A Remarkable User Experience

WHAT MAKES A USER EXPERIENCE REMARKABLE?

1

Page 14: Creating A Remarkable User Experience

Your website must be useful.

Your website must be consistent.

Your website must be appealing.

BEST PRACTICES FOR USER EXPERIENCE

Your website must be intuitive.

Your website must be accessible.

Page 15: Creating A Remarkable User Experience

Your website must be useful.

Your website must be consistent.

Your website must be appealing.

BEST PRACTICES FOR USER EXPERIENCE

Your website must be intuitive.

Your website must be accessible.

Page 16: Creating A Remarkable User Experience

FLICKR USER THANKER212

In order to be useful, your organization’s website must feature content that aligns with the Buyer’s Journey.

Your website must be useful.

Page 17: Creating A Remarkable User Experience

Who is familiar withthe Buyer’s Journey?

Page 18: Creating A Remarkable User Experience

The Buyer’s Journey

Page 19: Creating A Remarkable User Experience

Your website must be useful.

Your website must be consistent.

Your website must be appealing.

BEST PRACTICES FOR USER EXPERIENCE

Your website must be intuitive.

Your website must be accessible.

Page 20: Creating A Remarkable User Experience

To create intuitive experiences, there’s a simple rule: one goal at a time! When you start trying to accomplish more than one thing at a time on a site page, things become cluttered and confusing for the visitor.

Your website must be intuitive.

FLICKR USER SEANTOYER

Page 21: Creating A Remarkable User Experience

Answer one question at a time.Think about the top questions a visitor will be trying to answer

when they land on your page.

Page 22: Creating A Remarkable User Experience

Request one action at a time.Your users will need to engage with your content.

What options will you give them?

Page 23: Creating A Remarkable User Experience

Focus on thenext stage of their journey.Don’t try to close the deal if they’re just getting to know you. Meet your users where they are, not where you want them to be.

Page 24: Creating A Remarkable User Experience

Your website must be useful.

Your website must be consistent.

Your website must be appealing.

BEST PRACTICES FOR USER EXPERIENCE

Your website must be intuitive.

Your website must be accessible.

Page 25: Creating A Remarkable User Experience

According to the late social psychologist Robert Zajonc, the ‘mere-exposure effect’ dictates that the more familiar we are with something, the more we like it.

Your website must be consistent.

FLICKR USER BEN GREY

Page 26: Creating A Remarkable User Experience

Emphasize site-wide consistency.Not just in design — consistency is important in your written content, too!

Page 27: Creating A Remarkable User Experience

Your website must be useful.

Your website must be consistent.

Your website must be appealing.

BEST PRACTICES FOR USER EXPERIENCE

Your website must be intuitive.

Your website must be accessible.

Page 28: Creating A Remarkable User Experience

Your website must be accessible.Ensure accessibility by creating navigation that makes

sense to your users and makes it easy to find information.

FLICKR USER BINARY_KOALA

Page 29: Creating A Remarkable User Experience

Include navigation inyour header and footer.This will help simplify navigation for your users, and will help them stay engaged, even when they’ve finished reading a page.

Top of site:

Bottom of site:

Page 30: Creating A Remarkable User Experience

Flat navigation:

Deep navigation:

Choose a navigation style:

flat or deep?

(But either way you go, keep it simple!)

Page 31: Creating A Remarkable User Experience

Your website must be useful.

Your website must be consistent.

Your website must be appealing.

BEST PRACTICES FOR USER EXPERIENCE

Your website must be intuitive.

Your website must be accessible.

Page 32: Creating A Remarkable User Experience

Your website needs to be appealing.The easiest way to ensure this is to emphasize simplicity.

Use space to frame information and shape your users’ focus.

Page 33: Creating A Remarkable User Experience

Deliverable

Methods

Tools

List of What Works and What Doesn't

on Site

Stakeholder Interviews

Content Audit

Usability Testing

Spreadsheet

GoToMeeting

WebEx

Sketches or Wireframes of

Three Top Redesign Ideas

Usability Testing

Card Sorting

Balsamiq

Paper

Trello

Clickable Mockup of Best Idea

Style Guide

Usability Testing

Invision

Photoshop

Axure

CURRENT SITE

LO-FI PROTOTYPE

HI-FI PROTOTYPE

NEW SITE

USER EXPERIENCE REDESIGN METHODOLOGY

Page 34: Creating A Remarkable User Experience

Deliverable

Methods

Tools

List of What Works and What Doesn't

on Site

Stakeholder Interviews

Content Audit

Usability Testing

Spreadsheet

GoToMeeting

WebEx

Sketches or Wireframes of

Three Top Redesign Ideas

Usability Testing

Card Sorting

Balsamiq

Paper

Trello

Clickable Mockup of Best Idea

Style Guide

Usability Testing

Invision

Photoshop

Axure

CURRENT SITE

LO-FI PROTOTYPE

HI-FI PROTOTYPE

NEW SITE

USER EXPERIENCE REDESIGN METHODOLOGY

Page 35: Creating A Remarkable User Experience

Deliverable

Methods

Tools

List of What Works and What Doesn't

on Site

Stakeholder Interviews

Content Audit

Usability Testing

Spreadsheet

GoToMeeting

WebEx

Sketches or Wireframes of

Three Top Redesign Ideas

Usability Testing

Card Sorting

Balsamiq

Paper

Trello

Clickable Mockup of Best Idea

Style Guide

Usability Testing

Invision

Photoshop

Axure

CURRENT SITE

LO-FI PROTOTYPE

HI-FI PROTOTYPE

NEW SITE

USER EXPERIENCE REDESIGN METHODOLOGY

1. Interview your stakeholders.

Page 36: Creating A Remarkable User Experience

Deliverable

Methods

Tools

List of What Works and What Doesn't

on Site

Stakeholder Interviews

Content Audit

Usability Testing

Spreadsheet

GoToMeeting

WebEx

Sketches or Wireframes of

Three Top Redesign Ideas

Usability Testing

Card Sorting

Balsamiq

Paper

Trello

Clickable Mockup of Best Idea

Style Guide

Usability Testing

Invision

Photoshop

Axure

CURRENT SITE

LO-FI PROTOTYPE

HI-FI PROTOTYPE

NEW SITE

USER EXPERIENCE REDESIGN METHODOLOGY

2. Conduct a content audit.

Page 37: Creating A Remarkable User Experience

Map your content to the Buyer’s Journey.This will help you learn what you’ve already covered, as well as

where your content holes are.

Page 38: Creating A Remarkable User Experience

Deliverable

Methods

Tools

List of What Works and What Doesn't

on Site

Stakeholder Interviews

Content Audit

Usability Testing

Spreadsheet

GoToMeeting

WebEx

Sketches or Wireframes of

Three Top Redesign Ideas

Usability Testing

Card Sorting

Balsamiq

Paper

Trello

Clickable Mockup of Best Idea

Style Guide

Usability Testing

Invision

Photoshop

Axure

CURRENT SITE

LO-FI PROTOTYPE

HI-FI PROTOTYPE

NEW SITE

USER EXPERIENCE REDESIGN METHODOLOGY

3. Conduct usability testing.

Page 39: Creating A Remarkable User Experience

• Usability Testing: recruit typical users and watch them use your website.

This will reveal the holes in your content are and the questions that users have.

• (example of gotomeeting?)

Conductusability testing.Recruit your typical users and watch them use your website. This will help you see where the holes in your content are, and what questions your users have.

FLICKR USER KNIGHTFOUNDATION

Page 40: Creating A Remarkable User Experience

Screen candidates with forms.To determine eligibility, send interested participants to a form called a

‘screener’, which asks all of the right questions.

Page 41: Creating A Remarkable User Experience

Focus on behavior.

Choose one task for your users to complete, and analyze the results. Pick a common problem, question or need that your users typically have, and ask them to focus on that goal.

Page 42: Creating A Remarkable User Experience

Create a script.

Scripting helps ensure that your data stays consistent. Be sure to ask each

question the exact same way, for every person to speak to.

Page 43: Creating A Remarkable User Experience

Record your results.

Don’t rely on your memory! Take thorough notes or record the session to make sure that you retain what you learn.

Page 44: Creating A Remarkable User Experience

THE BOTTOM LINE:Test until you aren’t surprised anymore.

Page 45: Creating A Remarkable User Experience

Transform your website into a user-focused, personalized tool.

CONTEXTUAL MARKETING CERTIFICATION

Available to users on the HubSpot COS platform and with Professional or Enterprise level accounts.

Speak to Dee Dee or your HubSpot Account Manager to learn more.

Page 46: Creating A Remarkable User Experience

TWO EXAMPLES.3

Page 47: Creating A Remarkable User Experience

GROUP EXERCISE.4

Page 48: Creating A Remarkable User Experience

GROUP EXERCISE

20 minutes:

Pair up with two people in the room and briefly describe what your business does. Open up your website’s homepage.

Next, evaluate each homepage. Make a list of what works and what doesn’t.

• Does it address the correct stage of the Buyer’s Journey?• Does it answer one question at a time?• Does it request one action at a time?• Is it consistent?• Is the navigation clear and accessible?• Is it appealing and simple?

Remember that “X” should be one of your business's main keywords.

Page 49: Creating A Remarkable User Experience

QUESTIONS?

Page 50: Creating A Remarkable User Experience

THANK YOU.Dee Dee de Kenessey@deedeedkc#HubSpotting