UX Toolkit

These tools were created to assist brainstorming, ideation, and collaboration. Their use supports the Lean UX principles, a user centred design process, and improve the overall quality of our products.Many of these documents & templates originate from other sources known and unknown.

Author: Sean Russell

Lean UX principles are tools. They’re good tools. But they shouldn’t be the only tools in your toolbox. Choose the best one for the job at hand.

Dan Winterberg, Cooper

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell3 / 29

UX Process

1 2 3 4 5 6 7 8 9 10

Com

plia

nce

& R

isks

- U

X P

roce

ss

This diagram loosely illustrates the steps

taken in designing user-centred products.

The UX toolkit outlines tools we can use to

support us in achieving these steps.

Diagram

Building and deploying the validated design

Develop

Generating ideas and focusing on solving

the right problem

Ideation

Identifying issues clients may have

Discovery

Creating and validating an idea ensuring and

it address the client’s need

Design

Continued monitoring of the product. It

provides further insight into client needs,

behaviours as well as ideas for future

improvements.

Measure

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell4 / 29

Lean UX Principles

1 2 3 4 5 6 7 8 9 10

Always remember…

Design + Product Management + Development = 1 team

Externalise (thoughts and ideas with team members using The Wall, post-its and sketching)

Goal-driven & outcome-focused

Repeatable & routinised (thoughts and ideas with team members using The Wall, post-its and sketching)

FLOW: think -> make -> check

Focus on solving the right problem

Generate many options

Decide quickly what to pursue & hold decisions lightly

Recognise hypotheses & validate them

Research with users is the best source of information & inspiration

1

2

3

4

5

6

7

8

9

10

Source: Lean UX Manifesto (2014) - Anthony Viviano, Ajay Revels and Ha Phan.

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell5 / 29

1.0 Customer Feedback

1 2 3 4 5 6 7 8 9 10

Identifying areas of the product/service customers are happy or disappointed with

Good for

We need to understand areas of improvement on the website, as indicated by our users.

Good when

• Product manager • UX designer/researcher

Who

• Discovery

When do we use it?

• Listen to customers on social networks and respond quickly

• Implement short online surveys - for regular customers only

• Provide a feedback mechanism on C&R website

Try to

Social Media Tools

Cloud based platform that allows businesses to manage and track customer feedback across multiple social media channels

Conversocialhttp://www.conversocial.com/

Track and manage multiple social media accounts. Also tracks and alerts you to brand mentions

Hootsuitehttps://hootsuite.com/

Set up alerts to find out when your company or company interests have been mentioned anywhere on the web, such as in Blogs or in a youtube comment.

Google Alertshttps://www.google.ie/alerts

Creating a conversation directly on these pages/groups is important in understanding and getting more insight into how the customer’s problem can be resolved

Facebook and LinkedIn pageshttps://www.facebook.com/ and https://www.linkedin.com/

Online Survey Tool

Online survey tool allowing you to easily create and deploy HTML based surveys. Also collates data collected allowing you to easily interpret results.

SurveyMonkeyhttps://www.surveymonkey.com/

Provides online surveys and feedback tools implemented directly on the website

Usabillahttps://usabilla.com/

KISSinsights lets you embed surveys directly on your website. Can be used for quick polls or small surveys of 3-5 questions

KISSInsightshttps://usabilla.com/

Tips

• Always listen to customers!⁃ Social media⁃ Emails/calls⁃ Sales representative feedback⁃ Surveys⁃ User testings sessions/focus groups

• What does the analytics tell us• Socialise this information across the team

1076

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell6 / 29

2.0 Contextual Interviews

1 2 3 4 5 6 7 8 9 10

Identifying user needs

Good for

We want to get a better understanding of the

users goals and behaviours, as well as

suggestions about what they need/like/

dislike. It can also provide an opportunity to

observe how the user uses the website.

Good when

• Product manager • UX designer/researcher

Who

• Discovery

When do we use it?

• Go and visit them where they usually use the website. What is the surrounding like?

• Get them to describe what they do before and after using the website

• Look for similarities across users

Try to

Checklist

Preparation

• Prepare list of questions in good time.

• Don’t be afraid to stray from questions if the

conversation goes that way

• Create a fun, relaxed environment, put the participant

at ease

• Be as conversational and as natural as possible

Structure

• Start with the goal of the interview

• Continue with demographic and ice-breaker questions

- “What kind of apps do you use?”, “What would you

say your favourite website is?”

• Follow this with your prepares questions/tasks

• Finish with - if there’s anything you’d like to add or if

you could make one change what would it be?

Remember

• Actively listen - less talk, more nodding

• Avoid leading questions

• Probe vague answers - “Why is that?” or “Tell me

more about that.”

• Take photos of interesting things and behaviour

Page Templates from Ethnography Field Guide

Template - TK2.0 Ethnography Field Guide

Template - TK2.1 Contextual Interviews -

Sample Questions

Resources

Discovering the Table Stakes and Delighters http://bit.ly/1qvDYSn

Interviewing Humanshttp://bit.ly/1spmGaw

Remember!You can learn a lot from a conversation from colleagues,

friends and family. For example, ask people if they have

ever used x app and what they liked/disliked it about it

10764

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell7 / 29

3.0 User Testing

1 2 3 4 5 6 7 8 9 10

Identifying pain-points with the existing website or validating the design or flow of new features. It may be carried out remotely, but often more insightful when in person

Good for

We want a deeper understanding of how users use our website. Recorded sessions also provide valuable evidence for stakeholders by highlighting existing website issues

Good when

• UX Researcher • Observers• All team members

Who

• Discovery & Measure-Learn

When do we use it?

• Formally or semi-formally user test on a regular basis.

• Create a panel of real customers that you could potentially test with

Try to

Template - TK3.1 - User test script

Template - TK3.2 - Notes template

Template - TK3.3 - User test report

Resources

Tools

Set up, record, observe, and analyze usability studies, focus groups and product testing. Also allows others to watch the session and take notes remotely. Available on PC

Moraehttp://www.techsmith.com/morae.html/

Allows you to record the user’s screen and face while they talk through the session. Only available on Mac

SilverBackhttp://silverbackapp.com/

Online testing tools

Run micro-usability tests to get a better picture of how well your website performs with visitors. You can collect feedback, discover usability issues, measure how various tasks perform, and get visual results.

Usabillahttp://usabilla.com/

Allows you to quickly test the layout or positioning of a screenshot or wireframe. Good for validating a design

FiveSecondTesthttp://fivesecondtest.com/

Use Chalkmark to increase your conversion and task oriented success rates by getting quick feedback on designs before you implement or update them.

Chalkmarkhttp://www.optimalworkshop.com/chalkmark.htm

Tips

Getting ready

• Define the objectives of the user test

• Prepare a stable product/prototype version for testing

• Prepare questions/tasks

• Practice a dry-run using a colleague or team member

• Organise an incentive e.g. cash or free month of use

The Session• Create a relaxed environment, put the participant at ease

offer them a drink and thank them for coming• Explain the purpose of the user testing

• Begin with demographic and behaviour questions

• Follow with the explanation of the tasks required

• Ask them to think aloud as they go

• Jot notes but stay focused on the participant

• Ask why they clicked on something? Or what they are focusing on if they fall silent.

• Finish with - if there’s anything you’d like to add or if you

could make one change what would it be?

• Review observations with colleagues immediately after session to consolidate notes and make actions

• Review videos and prepare top-level findings.

Test the information architecture of the website by understanding how well content is organised, labelled, signposted and navigated. This tool allows you to find where and why people are getting lost on your website. It is also a natural next step in validating the output of a card sorting exercise [REF 14.0]

Treejackhttp://www.optimalworkshop.com/treejack.htm

Allows you to run click, memory, mood, preference, annotate, label, multi-page click, tests remotely. New user tests can be set up in 3 minutes. You can share tests with team members or make them public, and visual reports are included to make decision-making easier

Verifyhttp://verifyapp.com/

1065 9

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell8 / 29

4.0 The Design Studio

1 2 3 4 5 6 7 8 9 10

Collaboratively generating potential solutions

to user/business problems, forming greater

consensus among team members

Good for

We need our team to collaboratively

visualize, develop and agree on potential

solutions to a design problem

Good when

• All team membersWho

• Ideation

When do we use it?

Excerpt - TK4.0 Design Studio Example

Resources

Tools

• 5-8 people

• Pencils

• Pens

• Permanent markers (multiple colours/thicknesses)

• Highlighters (multiple colours)

• Sketching templates [TK 5.1 & TK5.2]

• 25"×30.5" self-stick easel pads

• Drafting dots (or any kind of small stickers)

• Blu-tack

Define problem (30 mins)

• Explain using real data

• Present personas

• Present scenarios/context

Individual sketching (10 mins)

• Rough sketches no detail

• Could use this time to develop

empathy maps [Ref 7.0]

• (Diverge)

Present & critique (3 X 15 mins)

• Present and categorise ideas to the

team.

• Discuss positive and negative of the

ideas.

Individual refine (10 mins)

• Refine sketches (Emerge)

• Present back to the group

• Team Converges (45 mins)

• Decide 2 best ideas

• Use drafting dots to help people

select their favourites

• Work up these ideas and validate as

soon as you can

Studio Structure

Use to

• Understand customers - Proto personas

• Understand customer goals and outcomes -empathy/

customer maps

• Prioritise features - Feature map

• ‘Mobilify’ - Designing for mobile first

Can be carried out remotely if required

64 91 2 5 7 83 10

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell9 / 29

5.0 The Wall

1 2 3 4 5 6 7 8 9 10

Externalising ideas, research and sketches

allowing more frequent and organic feedback

Good for

The team needs to brainstorm and discuss

ideas. Also useful in visualising and

organising the user flow across a website/

funnel

Good when

• All team membersWho

• Ideation

When do we use it?

Tips

• Can be

⁃ Real - actual wall at the office

⁃ Virtual - Pivotal Tracker, Pinterest, Padlet

• Stay organised - use meaningful colour codes for post-its e.g.

⁃ green = good idea

⁃ orange = issue

⁃ yellow = note/suggestion

• Group similar post-its/ideas together

• Loosely title groups

6 91 2 7

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell10 / 29

6.0 Proto Personas

1 2 3 4 5 6 7 8 9 10

Visualising who our users are and what they

want to achieve

Good for

We want to articulate the target audience,

what their needs are, how they behave/think

as well as pain-points they might have.

Personas help focus team members and act

as sense-check for new ideas - e.g. How

would a new email widget benefit/hinder this

person?

Remember

State any assumptions that you make when

creating a persona. You can validate later to

confirm your thinking

Good when

• All team membersWho

• Ideation

When do we use it?

Resources

How To - How to make a protopersona

and get everyone on the same page

Template - TK6.0 Proto Personas Template

Template - TK6.1 Proto Personas Template

62 3

Example Proto Persona

Remember!State any assumptions you might make. They are fine in

the early stages of design, but sense check as soon as

you can

How

• Draw a quick sketch of your persona• Outline the things that makes them them - are they married, what job

do they have?• Think of common problems they have• Jot down some solutions to these problems

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell11 / 29

7.0 Empathy maps

1 2 3 4 5 6 7 8 9 10

Understanding how our users think, feel and

behave on our products

Good for

We want to develop solutions that address

real user problems and improves their daily

work-life

Good when

• All team membersWho

• Ideation

When do we use it?

Resources

Tadpull - Empathy Maps for UXhttp://bit.ly/1spnEU4

Template - TK7.0 - Empathy Map Template

Template - TK7.1 - BM Empathy Map Template

61 2 5 10

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell12 / 29

8.0 R.A.D LIBS

1 2 3 4 5 6 7 8 9 10

Prioritising features by how well they

address real user needs/outcomes

Good for

We want to align user needs with features

we wish to develop. A Mad Libs- style

approach provides a structure to elicit ideas

based on people, problems and tasks. The

structure helps defend against flights of

fancy that serve no strategic purpose.

Essentially this is a litmus test for bad ideas

or ideas that are of no benefit to the user

Good when

• UX Resarcher • Product Designer

Who

• Ideation

When do we use it?

Resources

Template - TK8.0 - RAD LIBS Template

(R.A.D - Rapid Application Development)

64 92 83

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell13 / 29

9.0 Hypothesis Creation

1 2 3 4 5 6 7 8 9 10

Structuring tests to validate assumptions or

measure the impact of a new idea

Good for

We want to structure the validation of

assumptions as part of the Lean UX

methodology. This format allows us to easily

frame the component parts of the test

Assumptions

“People need our product”

Hypothesis

“We believe people like [customer type] have

a need for (or problem doing) [need/action/

behaviour]

Experiment

“The smallest thing we can do to prove that

need is [experiment]”

Outcome

“We will know we have succeeded when

[quantitative/measurable outcome] or

[qualitative/observable outcome]

Good when

• All team membersWho

• Ideation

• Design - Validate Internally

When do we use it?

TK13.0 - Hypothesis Template

64 953

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell14 / 29

10.0 Customer maps

1 2 3 4 5 6 7 8 9 10

Journey Map Example - Rachel Liu [TK 0.0]

Visualising the entire customer journey

Good for

We want to understand the impact of new

features on the overall user journey by

representing different touchpoints

characterizing their interaction with our

service.

Good when

• All team membersWho

• Design

When do we use it?

Resources

7 Steps for Developing CX Journey Mapshttp://bit.ly/1spomRo

Customer Journey: 10 Tips For Beginnershttp://bit.ly/1sposIy

Customer Journey Mapping Gamehttp://bit.ly/1spoy38

CX Journey Mapping Toolkithttp://bit.ly/1spo9NW

Cx Journey Mapping Workshophttp://slidesha.re/1spoMr1

Remember!A customer journey map shouldn’t be too detailed. The

objective is to concentrate on how new features or

products fit (if at all) into the overall customer experience

2 3

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell15 / 29

11.0 Sketching

1 2 3 4 5 6 7 8 9 10

Quickly visualising and communicating

design ideas and concepts

Good for

We want to share solution ideas with team

members. Everyone can roughly sketch

ideas on how something should look or work,

facilitating discussion. Time-boxed (5

minutes) sketching activity during workshops

to prevent focusing on the details.

Good when

• Development• UX• Product Manager

Who

• Ideation

When do we use it?

Tools

• Pencil

• Paper

• Highlighter - to note buttons/interactions

• Blu tack - to attach to wall when

presenting

• Sharpies

• Camera (photos of completed sketches)

Tools

Tips

• Relax! - Anyone can draw

• Use basic lines and shapes - forget the details!

• Add shading/colour for elements such as buttons or links

• Write notes in capital letters - easier to read

Templates

2-UP Sketches

Use - Refine ideas during Design Studio session

6-UP Sketches

Use - Individual idea generation during

Design Studio

iPhone sketches

Use - To sketch ideas for mobile using ‘Mobilify

method’ - What is the most important content

when a user is viewing on their mobile?

Resources

Template - TK11.1 - 2UP Sketch Template

Template - TK11.2 - 6UP Sketch Template

Template - TK11.3 - iPhone Sketch Template

Template - TK11.4 - Scenario template

41 2 5 7

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell16 / 29

12.0 Prioritising ideas

1 2 3 4 5 6 7 8 9 10

Deciding as a group the ideas to be pursued

Good for

We want to reach team consensus as to which idea or feature should be designed

Good when

• All team membersWho

• Ideation

• Design

When do we use it?

How to

• Everyone has three votes each • Individually, choose your top three ideas in your head• All together, place the dots next to the solutions• You can try different colour dots that carry different weighting

⁃ Green - LOVE⁃ Blue - Like⁃ Red - Dislike

• Tally the dots to select best idea/s• Select best idea, discuss or re-vote again

Drafting dots

Use - Prioritising ideas during design studio

M&Ms

Use - Prioritising ideas during design studio - eat after best ideas are selected!

Tools

• Drafting Dots or M&M’s

• Sketches

641 2 8

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell17 / 29

13.0 Paper Prototyping

1 2 3 4 5 6 7 8 9 10

Sense checking a design or flow of a design during the earlier stages of development

Good for

We have lots of initial sketch ideas that need to be tested quickly and with little cost. We can update elements easily using pen and paper. When testing mobile concepts we can use apps like POP to convert the sketches into a clickable prototype

Good when

• UX Researcher • Users• All team members

Who

• Design - Validate Internally

When do we use it?

How

• Brainstorm and sketch at the whiteboard • Transfer sketches to paper • Sketch as neatly as possible - use templates • Use post-its for pop-ups or notifications• Set up the test (as described in user testing REF 3.0)• Ask users to perform a task• You ‘play computer’ changing paper in and out. Say

nothing

Tools

• Lynda.com - Paper Prototyping

See it in action

• Testing with Kids - Paper Prototyping

• Printed Screens - Paper Prototyping

• Pencils• Sharpies (varying colour)• Scissors• Post-its• Blu tack• Card• Cardboard• Masking Tape/Prit-stick• Video camera

This app photos of our sketches to be uploaded and tested as clickable prototypes with users

Available on iPhone and Android

POPhttps://popapp.in/

• Smashing Magazine - Building a POP Prototype

Learn more

• Specky Boy Magazine - 10 Effective Video Examples of Paper Prototyping

Videos

92 5 10

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell19 / 29

14.0 Card Sorting

1 2 3 4 5 6 7 8 9 10

Investigating and evaluating the navigational

structure and labelling of our website

Good for

We are building the structure for the website,

deciding what to put on a page or

labeling categories and navigation

Good when

• All team members• Real customers

Who

• Design

• Validate internally

When do we use it?

Resources

Report - TK14.0 Card Sorting Report

TemplateTools

• Blank post cards

• Printed labels

• Post-its

• Permanent Marker

• Camera (for photos of finished sort)

Tips

• Keep card labels short and meaningful

• Use printed labels on card for added clarity

• Allow up to 30 minutes for a sort

• 30-40 card max

• Can be done in groups of 3

• Ask them to think aloud as they sort the cards e.g. I am putting tomato

in fruits because it is one, isn’t it?

• Watch out for what participants say when sorting cards; provides

insight into their thought process

• Allow users to create a new card (or category) if they feel the need to

• Photograph the finished card sort for review laterOpen & Closed

• Use open card sort to understand how users sort items into categories that make sense to them.

• Use closed card sort to validate existing structures or pre-defined

categories. We provide the categories and observe how users sort items

into these categories

4 92 5 10

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell20 / 29

15.0 Wireframes

1 2 3 4 5 6 7 8 9 10

Understanding the underlying information architecture and visual design/layout of our website

Good for

We want to visualise and communicate the page layout, information and elements, as well as associated interactions

Note:

The Lean UX approach advocates quick sketching or prototyping over extensively documented wireframes.

Good when

• UX Researcher • Product Manager

Who

• Design - Validate Internally

When do we use it?

Focus on

• The content to be displayed• The range of features• The layout of information/features• The rules for displaying information• The different scenarios

Wireframing Tools

Basic templates and features

MS PowerpointTK14.0 - Wireframe Template

Built for wireframing in mind. Available only on the Mac (PAID)

Omnigrafflehttps://www.omnigroup.com/omnigraffle

Online Tools

Wireframe CChttps://wireframe.cc/

Quick and dirty online wireframes (FREE). Useful for quickly sketching something in a meeting

UX Pinhttp://uxpin.com/

Collaborative wireframe design (PAID). Lots of pattern libraries and predefined elements

Balsamiqhttp://balsamiq.com/

Desktop or online (PAID) - Simple and straightforward to use. Can be used by anyone on the team

Tips

• Ensure you have identified user goals/scenarios before wireframing

• Always sketch first!• OR use a ’sketch’ theme for initial wireframe

drafts• Keep wireframes grey scale• Avoid too much detail• Can add visual detail later if stakeholder buy-in

is required• Provide notes to describe page interactions • Provide reference and page numbers• Ensure developers are involved to highlight

technical constraints sooner rather than later

Pencilhttp://pencil.evolus.vn/

Open source wireframes and prototypes (FREE). Useful for quickly sketching something in a meeting. Available as a Chrome extension, PC and Mac.

1 2 5

Template - TK15.0 - PPTX Wireframes

Resources

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell22 / 29

16.0 Prototypes

1 2 3 4 5 6 7 8 9 10

Testing the flow and interactions of our website or design

Good for

We want to see how real users interact and use our product.

There has been a move towards prototyping directly in HTML/CSS3 with JS libraries such as Foundation or Bootstrap. This encourages code reusability and design patterns, and improves time and cost efficiencies in design and development

Good when

• UX Researcher • Users• All team members

Who

• Design - Validate Internally

When do we use it?

Desktop tools

• Build lo-fi and hi-fi prototypes

• Easily publish and share with the team

• Fully supported and long standing community

Axurehttp://www.axure.com/

How

• Brainstorm and sketch at the whiteboard • Transfer sketches to paper • Sketch as neatly as possible - use templates • Use post-its for pop-ups or notifications• Set up the test (as described in user testing)• Ask users to perform a task• You ‘play computer’ changing paper in and out• Observe what they say and do

Online Tools

Online clickable prototype tool for mobiles

Flintowww.flinto.com

Proto.io - Silly-fast mobile prototyping.proto.io

Online clickable prototype tool for mobiles

In Visionwww.invisionapp.com

High end prototyping and version control and team management service

Codropstympanus.net

Code snippets for common web development and web design techniques.

Framer - Innovative Prototypingframerjs.com

JS framework for HTML prototypes

Code tools

JS responsive framework for HTML prototypes

Foundation from ZURBfoundation.zurb.com

• Proto.io - Ted.Event Example Prototype

Prototypes in action

• Proto.io - Animated menu prototype

Examples

• Axure - Sticky navigation

6 92 5 10

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell24 / 29

17.0 Styleguide & Pattern Libraries

1 2 3 4 5 6 7 8 9 10

Standardising the look & feel, as well as the

brand/personality of the products and

features we produce

Good for

• Ensuring consistency across our product

suite

• Reducing time to design and develop

new features

• Facilitating reusability and repeatability

of our workflow

• Improving efficiencies in the design

process, saving time and money

Good when

• Designer• UX Researcher• Development Team

Who

• Design

• Develop

When do we use it?

Template - TK0.0 Funnel Diagram

Resources

Tips

• Document all standard page and feature elements

• A digital style guide, such as a Wiki, is a good option

⁃ Code snippets

⁃ Colours and page elements

⁃ Anyone can update it

• Update frequently - important that it’s a live style guide

⁃ Styleguide updated as part of the late design or early

development stage

What to include

Page Elements

• Headings styles and sizes

• Standard and special font types

• Page layout (desktop, tablet and mobile)

• Button style

• Input fields and elements

• Colours (# and rgba)

Page Content

• Tone of voice

• e.g. grammar and personality

• Image guidelines

• e.g. dimensions and subject matter

• Video guidelines

e.g. dimensions and subject matter

Pattern Libraries

These are collections of standard UI and

development design patterns. They are used

to maintain a consistent look and feel across

mobile and desktop platforms

Desktop pattern libraries

Patternry - http://patternry.com/

UI Patterns - http://ui-patterns.com/

A list apart - http://patterns.alistapart.com/

Mobile pattern libraries

Pttrns - http://www.pttrns.com/

Mobile Patterns - http://bit.ly/1uyKZXF

Inspired UI - http://inspired-ui.com/

UX Archive - http://uxarchive.com/

Android UI - http://bit.ly/1uyKXiq

iPhone UI - http://bit.ly/1uyKWev

41 2

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell25 / 29

18.0 Web Analytics

1 2 3 4 5 6 7 8 9 10

Identifying areas for improvement or

assessing the effectiveness of a new feature/

page/content

Good for

• You need to validate the impact of a

newly implemented feature quickly

• You can monitor conversion funnels on

an on-going basis to measure user

outcomes, e.g. Improving the CTR from

email’s to related content

Good when

• Product manager• Analytics Team

Who

• Discovery

• Measure-Learn

When do we use it?

Why do x% of people drop out of the [Process]?

x% x% x% x% x%

[Page name]

[Page name]

[Page name]

[Page name][Page name]

Why do x% leave from [Page]

Point 1

Point 2

Why do x% leave from [Page]

Point 1

Point 2

Why do x% leave from [Page]

Point 1

Point 2

Why do x% leave from [Page]

Point 1

Point 2

• Google Analytics• Crazy Egg• Web trends

Template - TK18.0 Funnel Diagram

Resources

Tips

• Identify your conversion funnels

• Identify the steps/pages a user must take to convert

• NOTE - Typically, an overall conversation rate of 3% or more is

considered high, if conversion is less than 1% then we have a

problem

• Measure the % of users that fall off at each step of the funnel

• Identify reasons why users are dropping off

• TIP - Use the TK18.0 to help visualise the steps

• Change these and measure the impact

What to measure

Pirate Metrics (AARRR!)

Acquisition

Users come to the site from various

channels

Activation

User enjoys 1st visit: Happy user

experience

Retention

User comes back, visits the website multiple times

Referring

User likes our website so much they refer it to

others

Revenue

Users conduct some monetisation behaviour

64 95 83 10

Start up metrics for Pirates (AAARR)http://slidesha.re/1xCf2gb

UX Tool Kit

Tue Aug 05 2014

Creator

Modified

Sean Russell26 / 29

19.0 - A/B Testing

1 2 3 4 5 6 7 8 9 10

Validating new designs or page changes and measuring how well the improve the conversion rate

Good for

We want to quickly test changes to a page against the current design and determine which ones produce positive results

Good when

• Product Manager• UX Researcher• Analytics Team

Who

• Discovery

• Measure - Learn

When do we use it?

Metrics

• Specific page views

• Sign-up to a newsletter/feed/social network

• Downloads

• Purchase of a new package

What to test

• Call-to-actions such as button wording, size, colour and placement

• Headline or product description

• Form’s length and input fields

• Layout and style of website

• Product pricing and promotional offers

• Images on landing and product pages

• Amount of text on the page (short vs. long).Resources

Do’s & Dont’s

The Ultimate Guide To A/B Testing

A/B Test Tools

• Create different versions of pages using a point-and-click editor

• Implemented using code-snippet

• Also supports multivariate testing, behavioral targeting, heatmaps, usability testing

• Paid for service

Visual Website Optimizerhttps://vwo.com/

• Known as Content Experiments

• Set up 10 versions of a page to test

• Can also be implemented on Apps using Experimental API

• Part of the google analytics package

Google Website Optimizerhttps://support.google.com/analytics/answer/1745147

• Create different versions of pages using a point-and-click editor

• Implemented using code-snippet

• Measure anything - Full flexibility over what can be measured

• Integrates with SiteCatalyst, KISSmetrics, and Google Analytics

• Paid for service

Optimizelyhttps://www.optimizely.com/

Tips

• Run the test for the right amount of time

• Use VWO to calculate the time

⁃ http://bit.ly/UmfT5a

• Prevent blunders - Don’t show repeat visitors a different variation

• Always test both A and B variations at the same time

• A/B test frequently and continuously

• Never let your gut-feeling overrule the test results. A/B test results are often surprising and unintuitive

4 95 7 83 10

References

Tue Aug 05 2014

Creator

Modified

Sean Russell27 / 29

General

DUX Playbook (2014) by Vidget DUX Playbook by Viget is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License

Lean UX Manifesto - (2014) - Anthony Viviano, Ajay Revels and Ha Phan. Available at: http://www.smashingmagazine.com/2014/01/08/lean-ux-manifesto-principle-driven-design/

1.0 Customer Feedback

How to Make the Most of Customer Feedback - INC (2014)http://www.inc.com/guides/2010/07/how-to-make-most-of-customer-feedback.html

5 ways to monitor customer complaints - Client Heartbeat (2013)http://blog.clientheartbeat.com/monitor-customer-complaints/

A Few Good Online Survey Tools - Eric Leland (2011)http://www.idealware.org/articles/fgt_online_surveys.php

Top 10 Free Social Media Monitoring Tools - Ruxandra Mindruta (2013)http://www.brandwatch.com/2013/08/top-10-free-social-media-monitoring-tools/

Comprehensive Review Of Usability And User Experience Testing Tools - Cameron Chapman (2011)http://www.smashingmagazine.com/2011/10/20/comprehensive-review-usability-user-experience-testing-tools/

2.0 Contextual Interview

Ethnography Field Guide - Helsinki Design Lab (2014)http://www.inc.com/guides/2010/07/how-to-make-most-of-customer-feedback.html

Discovering the Table Stakes and Delighters - Jana Sedivy (2014)http://www.uxbooth.com/articles/discovering-table-stakes-delighters/

Interviewing Humans - Erika Hall (2013)http://alistapart.com/article/interviewing-humans

4.0 The Design Studio

Lean UX - Jeff Gothelf (2012)

UX Meets Agile: Design Studio Methodology - Michael Dubakov (2011)http://www.targetprocess.com/blog/2011/05/ux-meets-agile-design-studio-methodology.html

5.0 The Wall

The Skinny on Lean UX - Above The Fold (2013)http://blog.abovethefolddesign.com/2013/11/21/the-skinny-on-lean-ux/

Applying Lean UX - Dan Winterberg (2013)http://www.cooper.com/journal/2013/07/applying-lean-ux

3.0 User Testing

Reporting Usability Test Results - Usability (2014)http://www.usability.gov/how-to-and-tools/methods/reporting-usability-test-results.html

6.0 Proto Personas

Using Proto-Personas for Executive Alignment - Jeff Gothelf (2012)http://uxmag.com/articles/using-proto-personas-for-executive-alignment

References 2

Tue Aug 05 2014

Creator

Modified

Sean Russell28 / 29

14.0 - Card Sorting

How to Card Sort - Usability.gov (2014)http://www.usability.gov/how-to-and-tools/methods/card-sorting.html

Card Sort - GameStorming.com (2010)http://www.gamestorming.com/core-games/card-sort/

15.0 Wireframes

Communicating Design: Developing Web Site Documentation for Design and Planning (2011)

16.0 Prototyping

Communicating Design: Developing Web Site Documentation for Design and Planning (2011)http://www.smashingmagazine.com/2014/03/06/building-clickthrough-prototypes-to-support-participatory-design/

Building Clickthrough Prototypes To Support Participatory Design - Svetlin Denkov (2014)http://www.smashingmagazine.com/2014/03/06/building-clickthrough-prototypes-to-support-participatory-design/

13.0 Paper Prototyping

Prototyping for tiny fingers - Marc Rettig (1994)http://www.carmster.com/hci/uploads/Lectures/PrototypingForTinyFingers.pdf

10 Effective Video Examples of Paper Prototyping - Paul Andrew (2010)http://speckyboy.com/2010/06/24/10-effective-video-examples-of-paper-prototyping/

11.0 Sketching

Undercover UX Design - Cennydd Bowles and James Box (20121)

UX Meets Agile: Design Studio Methodology - Michael Dubakov (2011)http://www.targetprocess.com/blog/2011/05/ux-meets-agile-design-studio-methodology.html

9.0 Hypthesis Creation

Writing kick-ass hypotheses - Kate Rutter, Lean UX Meetup, Las Vegas : July (2013)http://www.slideshare.net/intelleto/lean-ux-meetupvegashypotheses201307

18.0 - Web Analytics

Content Chemistry - Andy Crestodina (2012)

Pirate Metrics - Dave McClure (2007)http://www.slideshare.net/dmc500hats/startup-metrics-for-pirates-long-version

17.0 - Styleguides and Pattern Libraries

A beast of an application - Case Study - Zurb Blog (2014)http://zurb.com/studios/case-studies/borealis

19.0 - A/B Testing

What is A/B Testing? - Optimizely Blog (2014)https://www.optimizely.com/ab-testing

The Ultimate Guide To A/B Testing - Paras Chopra - Smashing Magazine (2010)http://www.smashingmagazine.com/2010/06/24/the-ultimate-guide-to-a-b-testing/

What is A/B Testing? - Visial Website Optimizer (2010)https://vwo.com/what-is-ab-testing/

Images/Templates

Tue Aug 05 2014

Creator

Modified

Sean Russell29 / 29

Images

http://adityabhandari.com/user-research/usability-evaluation-of-olark-com/

Templates

Empathy Map Templatehttps://www.flickr.com/photos/11494647@N00/4669571358/

Business Model - Empathy Map Templatehttp://escuelaformacionupm.files.wordpress.com/2013/02/empathy-map-poster.pdf

CX Journey Mapping Toolkithttp://designingcx.com/cx-journey-mapping-toolkit/

4UP Sketch Templatehttp://designingcx.com/cx-journey-mapping-toolkit/

2UP Sketch Templatehttp://designingcx.com/cx-journey-mapping-toolkit/

iPhone Sketch Templatehttp://interactivelogic.net/wp/2009/09/iphone-wireframe-templates/

Hypothesis Templatehttp://luxr.co

CX Partners Wireframe Templatehttp://www.cxpartners.co.uk/ux-resources/

Rachel Lieu

http://www.drewhajduk.co.uk/index.php/creating-a-new-website-brand-for-paydata-ltd/

http://www.gamestorming.com/core-games/card-sort/

http://www.carmster.com/hci/uploads/Lectures/PrototypingForTinyFingers.pdf

http://www.agencyq.com/blog/design-and-development/times-they-are-rapidly-a-changin/attachment/axure_prototype_on_iphone4-4/

http://www.essaywow.com/marketing/importance-customer-feedback.html

http://uxmag.com/articles/using-proto-personas-for-executive-alignment

http://zurb.com/studios/case-studies/borealis

http://www.simplyusable.se/proto-persona-sketch-sheet/