To download your free copy of the Lean UX Toolkit, just click here.
Transcript of To download your free copy of the Lean UX Toolkit, just click here.
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/