Table

of Contents
Introduction 1.1
UX Playbook 1.2
Principles 1.2.1
Psychology 1.2.2
Usability 1.2.3
Research 1.3
Qualitative Research Toolbox 1.3.1
User interview 1.3.1.1
User testing 1.3.1.2
Ninja user testing 1.3.1.2.1
Card sorting 1.3.1.3
Ethnography research 1.3.1.4
Qantitative Research Toolbox 1.3.2
A/B testing 1.3.2.1
Survey 1.3.2.2
Analytics 1.3.2.3
Eye tracking 1.3.2.4
Persona 1.3.2.5
Expert review 1.3.2.6
Journey mapping 1.3.2.7
Design 1.4
Information Architecture 1.4.1
Wireframing 1.4.2
Prototyping 1.4.3
Content 1.4.4
Interaction design 1.4.5
Visual design 1.4.6
Typography 1.4.7
Measure and Iterate 1.5
Lean design 1.5.1

1
Iteration 1.5.2

2
Introduction

Introduction

Please note: this book is under development and contains some unproofed and incomplete
sections.

Welcome to Hanno's User Experience Playbook.

Why a UX Playbook?
The role of a UX designer is to build connections between the users, the business and the
product itself:

You need to satisfy your users and build a product that meets their needs.
You need to onboard developers with your design and make sure it's technically
feasible.
You need to make sure business goals are met.

In order to achieve this, you need to constantly talk to all 3 groups and have a great process
to make that possible.

But the nature of UX is that it's impossible to create a totally linear, step-by-step process.

This Playbook will show you many different skills and tools that can be a part of a great UX
design process. Once you've absorbed them, you'll be able to build your own process for
each project you work on and modify the tools to suit your needs!

Why did we write this?

We had 2 aims in pulling this content together:

1. To provide a practical guide to UX design for those involved in building products. Even if
you're not a UX designer, having a general understanding of how a UX process works
can be very valuable.
2. To educate Hanno shipmates, improve our team understanding of good UX and to
develop a common language and set of resources that we can all share for our project
work. This will result in smoother and better design sprints, and ultimately better
products.

3
Introduction

Enjoy!

4
UX Playbook

UX Playbook

How to consume this information

You're probably familiar on some level with a lot of stuff here. The aim of reading and
learning these is to organise your thoughts and develop a common understanding around
topics which we use every day.

Zsolt recommends that you gradually work your way through the whole playbook to get a
feel for the overall approach, before returning to look at specific techniques and skills when
you need to use those on sprints. The more of the recommended deeper reading you can
handle, the better informed you will be!

To kick-off the reading, let's start with some basic UX principles and different UX processes.

Are you a beginner?

We've put together a comprehensive list of resources for getting into UX, and becoming a
better UX designer, in our UX #levelup wiki. We'd recommend heading over there before you
get started here, as it'll give you some good guidance.

Contributing
All shipmates are encouraged to contribute to areas of this Playbook where they feel the
detail is weak. Just keep in mind a couple of guidelines:

We're not trying to write the most comprehensive guide to UX ever. Where others have
explained things better, link to their resources or reading, and offer a summary.
Try to be as lean and practical as possible in your suggestions. There are lots of big,
heavy UX guides--the UX Playbook should be a lot more practical than these.

5
Principles

Principles
There are 2 key processes to know about when considering UX. These are:

User-centered design
Goal directed design

They have a lot of overlap, and differ mainly in how they suggest approaching the problem at
hand. It's good to know about both of them, as they will allow you to choose a UX design
approach which is best for the task at hand.

TODO: Explain a bit more about when you should choose each process. Even some
basic hints or guidance would help, as right now, they seem so similar that it's almost
pointless creating a distinction between the two.

User-centered design (UCD)

As you might expect, UCD has the user as its core focus.

TODO: Re-create image, find one which we can use. Explain what this image is
communicating.

Principles
Understand your users, and design for their needs
Avoid jargon: use natural language that the user can understand

6
Principles

Provide consistent design

Build a conversation with your users
Advocate iterative design
Conduct regular user testing

Goal-directed design
This is a fairly similar process to UCD, but the main aim is to go deeper in building out
understanding of your users. When carrying it out, you'll need to uncover the user's needs,
and provide a design which helps them to reach their goals.

Highlights
Based on your user research, create a persona which highlights the user's goals
Use this persona extensively
Advocate pair design
Take responsibility over your user's satisfaction

7
Psychology

Psychology
Lots of people coming from pshychology background to UX design. This isn't a surprise tho:
there are plenty of common intersections. There are plenty of psychology research related to
UX design and UX designers like to relate to them.

Cognitive dissonence

Actual vs. Reported Behaviour

http://www.uxbooth.com/articles/design-research/bridging-the-gap-between-actual-and-
reported-behavior/

Coglode
http://coglode.com/

http://www.methodsandtools.com/archive/archive.php?id=126

http://en.wikipedia.org/wiki/Asch_conformity_experiments https://www.youtube.com/watch?
v=NyDDyT1lDhA&feature=youtu.be http://thehipperelement.com/post/74607165637/daily-
ux-crash-course-26-of-31

TODO: add other basic/interesting/related psychology articles/researches

8
Research

Research
User Experience design without research does not exists.

To design for user needs, we'll need to understand their behaviours, goals, motivations and
needs clearly. Through research methods such as interviewing, observation and evaluation,
we can reduce the guess-work involved into the design process.

Of course, user research is not just a single stage in the product development circle that you
can tick off and complete: you have to be talking and observing users constantly, and you'll
need to repeatedly return to this stage.

In this section of the Playbook, we've gathered together lots of different tools and techniques
that you can use to conduct better research. Check out the sidebar to view them all!

Which research technique should I pick?

Different techniques are designed for different purposes. It can be helpful to group them
together according to distinct ways of thinking. The aim is to ensure that our research is
adequately broad, and as 'true' as possible. Thinking about these groupings will help you to
make sure your research is stronger and more likely to be accurate.

Qualitative vs. Quantitative

Qualitative methods: here, we gather data directly. They're focused on quality of
research, and on building understanding through close observation and talking to users
directly.
Quantitative methods: here, we gather large amounts of data. It's focused on quantity,
although quality is not irrelevant. Here, we look for trends and broader understandings.
It is not easy to find the right research method for your problem. It requires a deeper
knowledge to decide what methods should we you and when.

Attitudinal (saying) vs. Behavioural (doing)

The difference between "what users say" and "what users do" can be surprisingly different:

Attitudinal methods ask "what does the user say".

They involve active 2-way communication with the user (such as interviewing).
They help us better understand users' goals and motivations

9
Research

We mainly use these in the earlier stages of the product development cycle
Behavioural methods ask "what does the user do".
They involve observation and gathering pure data, without being distracted by the
user's personal opinion.
They are particularly useful for validating our designs and assumptions and seeing
how people really act.
These are great for ongoing product development, and later in the product
development cycle.

Further reading
When to Use Which User-Experience Research Methods by the Nielsen Norman
Group. This is a great overview and covers this topic in more detail.
User Research Methods from usability.gov. This is a great collections of resources for
running better research. Well worth working through, and it explains a lot of techniques
in more detail.

10
Qualitative Research Toolbox

Qualitative Research Toolbox

11
User interview

User interview
User interviews are focused on understanding a user's motivations and needs. By
understanding their mind better, we can improve the product's UX.

How to run a good interview

The interviewing process needs to be carefully executed to gain unbiased feedback.

Structure
Gather your interview subjects in advance. Check out the tips below for finding users,
and also our Lean Validation Playbook for fast recruitment.
A user interview will probably be about 30 minutes long.
It's best to have an interviewer and an observer for the session. The interviewer
communicates to the user while the observer take notes.

Tips for getting better learning

Encourage storytelling. Once you succeed in encouraging storytelling, you can get far
better insights into the problems your users are facing. Storytelling allows the user to
talk about her feelings—which is great for understanding her deeper motivations. The
more detail she can provide, the more information you will have—and the better the
design decisions you will be able to make.
Avoid a fixed set of questions. It’s a conversation, not an interrogation. Just as the
best type of job interviews should be, anyway. You’re not trying to test the person—
you’re trying to understand as much as possible about them. Learning how to drive a
conversation and build empathy with the user is not easy. There are a lot of good
examples of this in the book by David and Tom Kelley of IDEO: Creative Confidence,
which talks about design thinking.
Don’t ask people what they want. There is a huge amount of literature that explains
why this is a bad idea. Avoid speculative questions: they are not going to tell you much
about the user’s real needs and goals. People can’t tell you what they want and they
are mostly unable to spot their struggles and difficulties too. They can tell you what they
are trying to achieve and what their goals are. And that’s enough for you to design
solutions for their problems.
Don’t make the user a designer. Avoid asking the user to draw screens for you. If he
or she suggests modification to the design, gently ask what the reason for this

12
User interview

modification is, and what problem it would solve. This allows you to understand your
user’s motivation and thought process more deeply and to figure out the best design for
their needs.
Avoid leading questions. All of us have hypotheses and assumptions. These should
be left far behind. You need to make sure you are not suggestive with your questions.
This would result in false results, which are really harmful. Try to ask open-ended
questions so you can avoid accidentally suggesting an answer. Instead of asking “How
difficult do you find it to use feature X?”, ask “What’s your impression of using feature
X?”
Don’t go too much into details. User interviews should be about the user and
their goals. Going into details might sound like a good idea at first, but it will typically
just lead to endless conversation. It is also the perfect way to turn the user into a
designer and get them to avoid storytelling–which is exactly the opposite of what you
want! Just make sure you take one step back, whenever you find yourself getting too
deep into the details.
Pay attention to body language. Some people might find it hard to express
themselves, so paying attention to their body language is a great idea to get more
insight into how they feel. If you can recognise discomfort or tension on your user’s
face, or in their body language, you can ask better questions. If you are unfamiliar with
body language, I’d recommend reading The Definitive Book for Body Language, which
is a great start.

How to find users to interview

Recruiting people from our own network
This is the most casual way to find people: simply reach out friends, contacts and family on
Facebook or any IM application and ask if they could join for a 20-30 mins call. But note:

Make sure you're getting unbiased, uninfluenced feedback. There is a risk when using
personal connections, that they won't be totally reliable subjects, because they know
you personally.
Try not to ask the same subjects repeatedly, even just because you'll annoy them if you
do so.
Remember: fellow UX professionals are not necessarily the typical user you need to be
interviewing. They think differently!

Recruiting through PingPong

13
User interview

We built PingPong because we were frustrated at how complex it was to arrange user
interviews. PingPong is a SaaS product which lets you search by user demographic and
criteria and then send out invitations to people to participate in online testing of your product.

Of course, we'd recommend it!

Further Reading
Steve Portigal's Interviewing Users: How to Uncover Compelling Insights is a great read
and has a lot of information. Contact a Shipmate if you need a copy!
Jakob Nielsen has a good overview and some tips in his article on Interviewing Users.

14
User testing

User testing
Our goal is to gather any relevant feedback and information. We can carry out user testing
throughout the product development cycle. Paper prototypes, higher fidelity prototypes,
MVPs or a well-developed product can all be used for user testing:

In an existing product, it can allow us to uncover usability issues.

We can also use it earlier in the product development cycle to gather feedback about
our concept or prototype.

How to run a good user test

The most common way to do user testing is to assign certain tasks to users and observe
how they attempt to complete these.

Basic rules
We are testing the application, not the user. Make sure the user is made aware of this.
Communicate the state of mind and the context required, in order to adequately prepare
the user for the test.
Tell the user to 'think aloud' while working through the test tasks. This will help you to
understand their thought process as they do things.
It's worth pre-testing your tasks with a teammate or friend (test subject #0) to make sure
your instructions are clear.
You need to test with 5 users to uncover most of the usability issues.
Don't be afraid to use your main competitor's website as the subject for the test. This
can often give you valuable learning.
It's a good idea to have 3 people on the call: 1 moderator, 1 tester, and 1 observer. The
moderator talks to the user and guides him if needed, while the observer takes notes.

How to find users to test with

As the Hanno team is remote, we often conduct remote user testing.

Moderated testing with Skype

15
User testing

Simply schedule a call, then ask the user to share their screen while you run through the
test. To recruit users:

Either mine our own network. Try not to hassle the same users every time!
Or use TestingTime. Current pricing is €200 for 5 testers. See [[User interviews]] for
more info.

'Automated' remote testing via a 3rd party

There are several services which allows us to conduct remote, asynchronous user testing.
You set up the test, upload it to their service, and the results get delivered to you. You can
quickly conduct user tests with amazingly fast response times this way: usually it takes a few
hours to get back the results.

UserTesting: our usual pick. View pricing. The typical cost of 1 testing session is around
$49 on UserTesting. If you're going to run lots of tests, you might want to consider using
their subscription plan (upon application only).
Netizen: Malaysian company--useful if you are testing in South-East Asia

16
User testing

Ninja user testing

Ninja user testing (also known as guerilla user testing) is a casual yet very effective way to
test your product. The key to success is to be open-minded and nice to the people you are
approaching, and kindly ask them to test your product.

But don't forget that while ninja testing can be a great way to do lean UX, it's not a substitute
for conducting deeper tests. Be careful not to depend on ninja testing and end up with
misleading feedback!

Ninja test variations

Hallway testing: Simply approach people in your office hallway (with a laptop or tablet,
if possible) and kindly ask them if they have 10 minutes to help you out.
Coworking space testing: There are plenty of people hanging out in coworking spaces
and you can easily see who is approachable. Common areas are great to initiate a
conversation and ask for a few minutes of time and their feedback.
Drunk user testing: The most favoured way of testing, but don't be fooled: it's not you
who needs to be drunk! As the old Chinese UX saying goes: "鸟儿唱歌不是因为它们有
了答案，而是因为它们有歌要唱". In other words "if a drunk person can use it, then it's
usable!". I'd recommend doing this with final products: the higher fidelity will most likely
help drunk people to understand things better, and save you plenty of explanation time.
Don't underestimate it! This is a very powerful way to test the pure usability of your
product.
Smoke break testing: The common smoking area is a great place to get into a
conversation about that new prototype you are designing. People spending time
hanging out smoking cigarettes tend to share their thoughts: take advantage of this!

Other useful tips

Since people tend to be busy around midday, you need to figure out the best timing for
your approach: this might be during the morning, lunch break or later on the afternoon.
Explain purpose and give some context beforehand, and people will be more likely to
help you.
If you are feeling uncomfortable approaching people, start small: ask people for very
little. Build up your confidence
It's surprising how many people are willing to share their opinion on things. Just ask,

17
User testing

and be surprised!
It can help to offer rewards (candy, chocolate, drinks, etc), it will delight people and
mean they'll be happy to help you out next time, too.
Try sitting in a public area and putting up a sign: "Want a free coffee? Come give me
your opinion and 10 minutes of your time, and I'll get you one!”

Further reading
A great UX Booth article on guerilla testing, with some solid tips

18
Card sorting

Card sorting
Card sorting is a way to research your users' mental model: how they group different items
based on their perception of them. It's a common technique when we're trying to figure out
information architecture, navigation and taxonomies on a more complex product or website.

How to run a card sorting exercise

Who to test with

Testing with 15 users should be enough to get pretty accurate perspective. It will give
you a correlation of 0.9 between the results. 30 will give you 0.95.
You must select users from your target audience, who match your persona.

General structure
A basic test:

1. Create index cards with terms and descriptions

2. Shuffle the cards
3. Ask the user to group/pile the cards based on which ones they feel belong together
4. Ask the user to give a 'name' or a heading to each of the different groups they have
stacked up
5. Repeat with other testers until you have 15 sets of results.
6. Look for patterns while analysing the groupings made by different users
7. Take the results of your card sorting tests into consideration during the IA design
process

Going deeper:

This exercise can also be performed with pre-defined category names (buckets): we just
ask the user to put the cards into the right bucket.
Optionally you can also ask users to set a priority between different cards or categories.

A typical example

19
Card sorting

For an e-commerce site, write down each navigation item onto a card, and ask the user to
group them. Card sorting will show you how the users want to see the different product
categories grouped.

How will this effect the website performance? You'll hopefully end up with a more logical IA,
which will help people to find items easier and result in better conversion rates.

Tools to use
Remotely: Optimal Sort is our recommended remote card sorting tool.
Fully manual: Card sorting can be done without any technical tools. Simply write the
terms on index cards and ask the user to organise them. You can also use OptimalSort
to print out and organise a moderated card sorting session, which may save you some
time.

Further reading
Card sorting by NNG

20
Ethnography research

Ethnography research
This is about observing people in their natural working or living environment. Some people
describe ethnography research as "discovering the unknown".

Ethnography: "The scientific discovery of peoples and cultures with their customs,
habits, and mutual differences." (Oxford Dictionary of English)

The key here is to spot and capture the "aha!" moments while discovering user motivations.
These "aha!" moments are usually surprising and they can be the source of great innovation.

Ethnography research is valuable because it gives lots of insight in context, which can be
hard to get from other, more formal testing techniques. Learning more about this context
helps us to understand how it affects the UX, outside of lab conditions.

What is it good for

Testing market demand for products which don't even exist
Unveiling context for your product, to help you to tailor the UX
Unveiling unique use cases and come up with new product ideas
Unveiling anomalies and unexpected behaviours and activities
Delivering deep and strategic insights

How to carry out ethnography research

Observation modes
1. You can either passively observe your users from a distance.
2. Or you can actively participate, to immerse deeper into their environment. Here, you
can actively ask questions to the participants.

Tips
Pair up with a designer for the research who can take notes and spot issues from a
further perspective
Ask your participant to 'think aloud' while working through the exercise
Ask questions, but don't interrupt
Take as many research notes as possible

21
Ethnography research

Pay attention to asking the right questions and in the right time. Make sure you don't
interrupt conversations and activities, and turn the situation into a more formal user
interview process, which might affect the user's behaviour.
Debrief the user right after you have finished and capture important observations,
especially the "aha!" moments.

An example of an ethnography research

Hanno Uber research included a quite deep user research from Matt and Jon.

So, after downloading the app onto our phones, Jon and Matt said “so long” to the
London public transport system, and started riding with Uber, to and from their co-
working space and meetings. Uber's offerings in London at that time were divided into
two camps—UberX (a direct competitor with London's taxi drivers) and Uber LUX (the
luxury option, rivalling private car hire services).

So we split our time equally between the two, asking questions to home in on the
benefits of the app. We decided to keep a log of each journey and record the answers
we got.

Further reading
http://uxmag.com/articles/making-the-most-of-ethnographic-research
http://www.uxmatters.com/mt/archives/2010/06/ethnography-in-ux.php
http://www.cxpartners.co.uk/cxblog/using_ethnography_to_improve_user_experience/
http://blog.usabilla.com/top-ethnographic-research-videos/

22
Qantitative Research Toolbox

Qantitative Research Toolbox

23
A/B testing

A/B testing
If you want to answer either of the following questions, you'll need some A/B testing:

1. "Which version of our design is going to produce better results?"

2. "Is the change I'm planning to make to the product going to be effective? Will it improve
the conversion rate, and should I go ahead and implement it?"

It's a popular quantitative and behavioural research tool which can help us decide between
two competing alternatives. Conducting A/B test is cheap, protective and quick way to
decide if a design is an improvement or not.

What, and why?

What can you A/B test
Any website with a measurable goal: an e-commerce website, SaaS product signup,
media website for ad clicks or subscriptions
Basically any website with a goal to convert visitor to something else
Text: headlines, sub-headlines, paragraphs
Call to action (CTA) buttons
Amount of content: short/long versions
Different layouts
Different checkout/signup/etc flows
Different styles
Pricing structures
Promotions

Why should you A/B test

To get factual evidence for the success of your changes, rather than relying on intuition
To increase conversion
It's fairly quick and cost effective
It's relatively risk-free: only affecting a portion of your traffic
To minimise the risk of new design changes having a negative impact on conversion
To uncover potential

How to run a good A/B test

24
A/B testing

The structure
1. Construct your starting point: a question that you want to answer. For example, "Why is
my conversion rate so low?"
2. Do your research: use an analytics software to uncover user behaviour, interview users,
send out surveys
3. Make sure you have enough traffic that your test will have statistical significance (see
below)
4. Design different variants
5. Start the experiment using Google Analytics or Optimizely
6. Evaluate the results
7. Implement the winning version and look for improvement

Statistical significance
To get accurate and statistically significant results you need to test your designs with
hundreds or even thousands of participants. You also need to be careful about running
more than one test at once: you need to be sure that the results you are recording can be
attributed to the change you're testing.

Since A/B testing is usually automatised with some software such as Google Analytics or
Optimizely, you should follow their suggestions and leave the test running till it says it has
enough results. This will give you the confidence in the better performing version.

If you don't have the traffic, or the situation which would allow you to gain definite statistical
significance, then you should take a step back and look at qualitative user research
techniques instead.

You can read more about statistical significance on the following pages:

Statistical significance & other A/B pitfalls

Statistical Analysis and A/B Testing

Tips and best practices

Always test the original design so that you have a baseline.
Always wait until the end of the experiment. Be wary of declaring a 'winner' after positive
early results.
Don't surprise your users: if you're testing a significant modification, consider sending
only a portion of the traffic (5-25%) to the test.
Intuition and gut feeling doesn't work in A/B testing. The metrics are king.
Major modifications tend to deliver better, more dependable results than small fixes.

25
A/B testing

Testing is a never-ending job: there is always room for improvement.

Tools for testing

Optimizely
Google Analytics Experiments
fivesecondtest.com
Five Second Test: A Five Second Test shows your design to the tester for just five
seconds. After the five seconds are up, the tester is asked a series of questions
that you can specify, such as "What product do you think this company sells?", or
"What was the company name?".
Click Test: A Click Test records where users click on your design. The tester is
asked to follow the instructions you specify, such as "Where would you click to view
your shopping cart?", or "Where would you click to choose a template for your
blog?".
Preference Test: Preference Tests ask the tester to choose between two design
alternatives. You can ask testers to choose based on a particular attribute (eg.
"Which design looks more trustworthy?"), or simply ask them which they prefer
overall.

Interesting A/B testing case studies

Writing Decisions: Headline tests on the Highrise signup page
How two magical words increased conversion rate by 28%
A/B Test Case Study: Single Page vs. Multi-Step Checkout

26
Survey

Survey
Surveys are a good tool to quickly reach out and get feedback from your target audience.

When to use surveys

You have other research tools at hand and you want to extract more attitudinal data
from your users
You can get at least 20 people to fill your survey
Collect customer feedback before redesigning a website
Collect customer feedback about your product

Be careful! Survey are one of the most comfortable, yet dangerous research tools.
Since this is a quantitative research tool, make sure your questions reflect that, asking
qualitative questions in surveys can result in a lot of misinterpretation.

For example asking people to tell more about something in a survey is considered to be
a bad approach: you should interview users and have a conversation. Collect their e-
mail address at the end of the survey instead and line up an interview.

How to run a good survey

Structure
1. Identify your purpose
2. Try to create as simple questions as possible
3. Test your survey with a few friends
4. Pay attention to question ordering. They might have an influence on each other
5. Do pairing during the survey creation process to ensure the questions are proper

Tips for better surveys: classic mistakes to avoid

Be careful, it's easy to slip. Probably the biggest concern with surveys is that it's easy to
miss issues. By this you won't even notice you've made a mistake. So be careful with
surveys and especially with these issues:

Survey doesn't map the information you need. TODO: Add explanation for this one.
Mandatory questions. It might be tempting to make the most important questions

27
Survey

required, but at the end people might just leave the survey. You should leave all your
field optional. If they will skip answering a few questions you will know that there were
some problem.
Two-in-one questions. You should avoid this type of questions because the user may
have 2 different answers. To resolve this, simply turn it into 2 separate questions.
"Was the message clear and compelling?"
"Is your manager honest and trustworthy?"
"Did you know that Mozilla is a mission-driven organisation to make the Internet a
better place?".
Complex questions. Complex questions might scare users off, not to mention it's easy
to misunderstood.
Leading questions. "How would you rate the career of legendary outfielder Joe
Dimaggio?" To get unbiased information, don't include your personal opinion within
them.
Direct questions. Asking directly can be harmful. There is a big difference between
what people say and what people do. For example asking about if they would buy your
product, more people tend to give positive response than people willing to put down
money for your product.

How to find users to survey

Based on the survey and types of users we want to reach there can be 3 different scenarios:

Existing users: collect and reach out active users; send them a friendly mass-email
directing them to a Google Form which they can fill. You can increase the engagement
with gifts or coupon.
Target demographic: using a 3rd party survey tools, like Google Consumer Survey
allows you to set demographic settings based on your needs.
General public: using a Google Consumer Survey or distributing your survey through
Facebook/Twitter. This might happen early phases in the product development process.
Be careful, it's very rare that you want feedback from general public, you should be able
to define your target audience quite early.

Tools to use
Google Form
Google Drive allows you to create Google Form documents which you can use to send out
for your friends. You can easily set up the survey and share the link with your users.

28
Survey

Google Consumer Surveys

Google Consumer Surveys is a tool which allows you to set up and distribute surveys. The
price is 10¢ to $3.50 per complete (up to 10 questions, various kinds) and it depends on
the length of the survey.

Different Use cases give you an idea about how to get out the maximum of Google
Consumer Surveys.

Countries:

United States
Canada
United Kingdom
Germany
Italy (Android only)
Japan (Android only)
Netherlands (Android only)

You can set various screening and demography options which makes this a great and
affordable tool to use.

29
Analytics

Analytics
Using an analytics tool is probably the most popular quantitative method for gathering
information about behaviour. We can collect, measure and analyse several metrics in order
to understand user behaviour and optimise the product performance and usability.

The most common metrics we measure it the conversion rate, which allows us to see how
our visitors converts in a commercial context.

Why use analytics?

To discover issues worth investigating
To measure how visitors convert
To measure different metrics and KPIs
To run experiments: [[A/B testing]]

How to use analytic research and

measurement
To get good analytics, we need to set clear Key Performance Indicators (KPIs). KPIs allow
us to objectively measure the performance of the business.

To set KPIs, We'd recommend setting goals first. Goals are broader targets that you want to
hit. You will set our KPIs to align with these goals. Here’s an example:

Goal 1: Increase sales by 10%. Possible KPIs:

grow site traffic

reduce cart abandonment rate by X%
reduce bounce rate by X%
improve reordering rate by X%

Goal 2: Decrease churn rate by 10%. Possible KPIs:

boost net promoter score

increase customer satisfaction by 5%
quicken support response time by 10%
decrease subscription cancellation

30
Analytics

Make sure you have both engagement (time on site, session duration) and commercial
(conversion rate, return rate) KPIs--both help you push towards your goal.

Keep in mind that the most important thing with KPIs is to easily benchmark the performance
of your product. You should design and work around the goals to hit them.

Tools
Google Analytics
Google Analytics is the most wide-spread solution for web analytics. It is easy to implement
and use and you can track the most important metrics easily:

Pages/visit
Bounce rate
Average time on page
Average visit duration

Mixpanel & KISSmetrics

Mixpanel and KISSmetrics are slightly different than Google Analytics. They allow you to
track only what we want to track and build custom metrics. It also have some marketing
automation built in.

31
Eye tracking

Eye tracking
Eye tracking is a more expensive quantitative method than other research method. You
cannot do it with remote users, as you need to have a physical space and environment set
up. You also need special software and hardware to be able to record the eye movement
and map it to your product or website.

Here's a great overview video:

Why use eye tracking?

it's is an effective tool to figure out the following:

What are your users looking at?

How long they are looking at it for?
How does their focus change as they move through the website?
Which elements are most prominent?
Do they read content in full, or just scan it?
How to different types of user group scan the website?

But there are several downsides to the technique

Even if people looked at an element, you cannot be sure they have really noticed and
understood it.
Since it is an unmoderated, task driven technique, you don't know why the user looked
at an element.
Eye tracking cannot track peripheral vision, which is often important.

Interesting eye tracking findings

How users read on the web

32
Eye tracking

People scan the website content instead of reading it. There are fixation points on the
website as they are trying to find the relevant information. They are looking for keywords and
highlighted elements on a website and trying to process the information to make decisions.
You can read more in this Norman Nielsen Group post.

F-shaped pattern
Eye tracking studies revealed that users tend to parse the website in a F shaped pattern.
The main learnings are that:

1. Users won't read all the information

2. You should aim to write clear and engaging titles.

Read more

Banner blindness
Eye tracking studies have showed that people tend to abandon banners and focus on the
content reading or scanning. Read more.

33
Eye tracking

Images
Information-carrying images gets users attention and it is considered good, while purely
decorative images tend to get ignored.

34
Persona

Persona
You need to conduct user research and in particular user interviews to gather information
about your users. Once you have enough data from your research you can proceed to
persona creation process.

Benefits of a persona
Using personas is a powerful tool to get settlement around your user archetype. It is about
staying focused and satisfying real user needs. Personas are used during the product
development process to make sure you understand their motivation and you are satisfying
your user's needs. It helps you to communicate your design with stakeholders and justify
your design decisions. Once your persona is developed it's a cheap and powerful tool for
designers.

How does it come together?

There might be several user types using your application. They have different needs,
backgrounds and goals. During the user research process you hopefully have interviewed
enough users and you can spot overlaps and differences. These differences allows you to
group them and find their motivations and goals.

Questions to ask during the persona development

What is the motivation of this person?
What is your daily goal? What do you want to achieve?
What is he looking for in his job/life?
What's his age/gender/educational background?
What's his expertise level of software/tech?
What kind of work does he do?
What kind of person is he?
What activities does he like? What's his interests?

Persona best practises

Define the motivations and goals of your persona. This allows you to understand your
users mind when you are using the persona.
Create a story for your persona instead of bullet-pointing. It increases credibility so you

35
Persona

can use him better.

Make it realistic and don't use funny names. Personas are designed to back up serious
decisions, so it needs to reflect that.
Brainstorm and pair with your stakeholders to ensure the accuracy of your persona. At
the end you need a common understanding and agreement about your persona.
It is okay to have more than 1 persona: primary, secondary, etc. You can even group
them. Although be careful with it, too many personas means it will be hard to satisfy
everyone's needs!
Too many personas mean you want to achieve too much with your product.
Your persona must be a real-life example of your users: it has to be specific enough to
be able to answer specific questions.
It might be a good idea to group his attributes into 3 categories: Facts &
Demographics, Needs & Goals and Behaviours.
Don't overdo and don't be afraid of failing: you might be wrong with something related to
your persona and you need to change attributes later. That's completely fine until the
team has an agreement.
Keep your persona at hand and don't be afraid to ask what's the best for him.

User Persona Creator

You can use UPC which is a great tool to use for persona creation process. It gives you
blank template which you can fill and your persona is ready to go.

Persona example

36
Persona

37
Persona

Further reading
http://www.usability.gov/how-to-and-tools/methods/personas.html

38
Expert review

Expert review
Expert reviews evaluate products from a distinct perspective, and offer a view of an UX
expert. This approach judges the product in terms of trustworthiness, credibility,
competency, reliability, design and style.

This is a heuristic and self-exploring approach to understanding the product and provide
an analysis about its strengts and weaknesses. It is indeed opinionated. Since heuristic
review cannot be quantified, it has to be applied carefully.

How to conduct expert review

Once you have a deep understanding of UX design and its processes plus you have a
deeper experience designing applications you might have a good overview of UX design
already. This means you should feel comfortable conducting an expert review and provide a
valuable feedback.

You need to evaluate the product from A to Z, including onboarding, usability issues (by
spotting missing common design pattern which most like produce usability issues).

In order to make the review more accurate, you should pair it with other research,
particularly quantitative research.

Further reading
TODO: Read and implement the following resources

http://www.smashingmagazine.com/2011/12/16/a-guide-to-heuristic-website-reviews/
http://www.uxmatters.com/mt/archives/2014/06/an-overview-of-expert-heuristic-
evaluations.php

39
Journey mapping

Journey mapping
We use this technique to discover different steps in the user's interaction with our product.
The goal of the journey mapping is to put together a visual overview of all the different
decisions our users need to take in order to use the product.

Why use journey maps?

A good journey map allows us to immerse ourselves in the user's mind, and gain a birds-eye
view of their interaction with the application. By mapping a potentially complex series of
interactions, it can help us to see undeveloped sections and unveil new potential for
improvements.

How to create a journey map

In order to properly map the user journey we need to have an understanding how our
product will work. Therefore this exercise is the best to be executed after the user research
and basic wireframing tasks.

40
Journey mapping

Tools
Murally

41
Design

Design

42
Information Architecture

Information Architecture
Information architecture is about to figure out the best way to organise your design. It is
about organising the element into hierarchies of information.

To do great IA work you have to do a research (see User Research section of this wiki). Most
of the time the Information Architecture's role will become a joint role with other design
and/or content related roles.

Understanding the hierarchy between different types of content is essential for creating great
wireframes (and later prototypes and products).

How does a good information architecture looks like in an

application?
User can find the page he is looking for
User can find the information where they think it should be
The website layout straightforward
Filling forms are easy

And

1. What information should we have on the site (content)

2. How these information should be placed across pages (sitemap)
3. How the information should be presented on a page (layout)
4. How the information should be presented on a UI element (form)

Sitemap
Sitemaps are good for websites to overview how the page hierarchy looks like. The more
complex your site is the more harder to provide a straightforward sitemap. Sitemap is mostly
good for designers to see how they laid out the content and to see if it makes sense. In order
to provide a logical and straightforward sitemap you need to understand and overview all the
different content types on your website.

Card sorting
This is a research technique which is great to support Information Architecture decisions,
because it allows us to understand how users group information. Based on this we can
present elements which belongs to each other.

43
Information Architecture

Dividing information to consumable pieces

Don't provide too many options for your users as they can be distracting. This applies to
navigation, pricing or almost anything. Your goal should be to always provide consumable
pieces of information for your users.

READ: http://www.uxmatters.com/mt/archives/2010/02/hierarchical-task-analysis.php

44
Wireframing

Wireframing
This is the process of quickly sketching and playing with different ideas and layouts. The
goal of wireframing is to brainstorm over the different “designs” (even if they are still just
black and white sketches) and try to evaluate different ideas. Since we have great tools for
rapid prototyping, wireframing become less important. We are only trying to experiment with
the loose outline of the design and definitely don’t go into details or high-fidelity wireframes.

Sometimes on more complex projects it might be still worthwhile to go into high fidelity
wireframing. This really depends on the complexity of the interface. You can also go back to
wireframing at any stage of the projects and you should actually do that.

We prefer to keep the prototype low fidelity: make it ugly, and people will overlook the
aesthetic design and they will focus on the concept. That's our point at this stage of the
project.

Difference between wireframe and prototype

Prototype is the preliminary version of our product derived from our wireframes. It is an
interactive wireframe which you can experiment using and see/understand how the product
will function.

If you have a set of different wireframes of several screens, the prototype will be the
aggregation of these wireframes tied together which you can click through with your
mouse/phone—and understand the connections between different screens (wireframes).

Tools for wireframing

In order of increasing effort and fidelity...

Google Docs

45
Wireframing

This is a surprisingly powerful way to wireframe. We'll add a proper explanation soon. but in
the meantime, you might find this guide on how to do the same with Google Slides, to be
useful.

Balsamiq Mockups

46
Wireframing

Balsamiq is one of the oldest wireframing tool. Its philosophy is to use almost like hand-
drawn elements to allow you to focus only on the layout and elements, instead of the visual
appearance.

Mural.ly

Although Murally is not a dedicated prototyping tool, the selection of its tools allows you to
collaboratively sketch wireframes and quickly iterate over it. We like to use it.

Sketch/Illustrator

47
Wireframing

These tools are more sophisticated and allows you to produce final-like wireframes—we can
even call them mockups. We'd rather use them to produce low-fidelity wireframes. There are
very few projects which justifies creating high-fidelity wireframes, almost like a real product.
Simply because this is not the right place to experiment about visuals.

Which tool to use?

Try to use the best tool for the situation.

If you are working with others, Google Docs or Murally can be extremely effective.
If you are working alone find the one you can move the fastest.
If you need high fidelity wireframes, use Sketch, Illustrator or even Photoshop. Need to
collaborate? No problem, use Screenhero and work collaboratively.

48
Prototyping

Prototyping
Prototypes are interactive wireframes. We build prototypes to put it in front of the users, get
feedback and improve your prototype. This is an iterative process which allows us to build
great products.

Prototyping is about building, experimenting and learning during and iterative process. Good
design process involves the user and it’s shortening the feedback loop. Usually the
prototyping is started with a wireframing so we are mostly aware of the position of the
different elements.

Based on the detail you want to achieve we can talk about low, medium and high fidelity
prototyping. Usually the higher the fidelity is, the more work is required.

Benefits of prototyping
It’s an efficient use of resources
Rapid prototyping enables you to learn quickly what does and doesn’t work in weeks,
instead of months. Instead of wasting time, money and team power making highly functional
polished products to eventually test on your users.

You build something that users actually want

Testing prototypes with the user early on means that you are much more likely to build
something they will use, rather than something you ‘think’ that they want. By getting regular
feedback from your users, you always know whether you’re on track with your idea or
product, or not.

It’s a low risk and high value

This approach allows you to experiment without putting your business at risk. You can take
chances and learn from your users in a safe environment. Moulding the prototype on their
feedback early on to make something that is highly effective in achieving your business
goals.

You avoid over-thinking and planning

49
Prototyping

Less time is spent making long drawn out plans and discussing what it best for your users.
Instead more time is spent validating the assumptions that are made in making the
prototype. Building on fact rather than fiction.

Prototyping helps with ideation

We can often come up with new ideas and solutions as we prototype. Building something or
“thinking with our hands” opens up the doors to more creativity as you get to physically
interact with your ideas.

Low Fidelity Prototyping

Similarly to wire frames low fidelity prototypes are also built with paper. The difference
between wire frame and prototype is the interactivity that you can provide for the user. You
can add popups, dropdown menus and also new pages if the user wants to navigate to
another page.

Paper prototypes
TODO: Credits/replace

50
Prototyping

High Fidelity Prototyping

Usually the visual elements details and the level of interactivity makes a prototype more rich.
You can create a mix of paper-like, but feels like an app prototype with Pop.app for
example. Or you can design entire screens like they are final and put them together with
MarvelApp. Another approach is to use Framer.js which allows you to code almost—feels
—like—native applications on mobile.

For web application prototyping you can use Bootstrap or Foundation. To increase the
fidelity and interactivity we use tools like Bootstrap, Middleman, Sass etc.

Framer.js
http://framerjs.com/examples/preview/#medium-app.framer

MarvelApp

Bootstrap/Foundation Web Prototype

51
Content

Content
In User Experience design, content plays a major role. Ultimately it is what the user
consumes, and we can design it in order to improve the way it's consumed.

Microcopy Writing
The goal is to write small piece of text which are straight-forward and easy to understand,
and help further your user experience.

Good Resources:
Voice should be consistent. It's a great idea to define voice and tone guidelines so that
anyone writing content can stick with the same brand tone. Mailchimp do this very well.
Five ways to prevent bad microcopy
Skillshare - Mastering Microcopy: Writing Tiny Words for Huge UX Impact: a 90 minute
class to help you write better microcopy.
Microcopy that Strengthens Your Design’s Experience: this paid course from the COO
of Intercom will also walk you through some of the basics.

52
Interaction design

Interaction design
Interaction design is about how you users interact with your product. Its goal is to make this
interaction smooth and intuitive.

Animations
Animations can make specific interactions easier to understood.

Interaction became a big thing when smart phones came into the picture. There are a huge
variety of interactions you can apply to your design: double tap, pinch, swipe, 3-finger swipe,
3D touch and so on. This opened a new horizon in interaction design.

By now, we have well established interaction design patterns: when you pull down your e-
mail client on your phone to update. This “pull down to refresh” became quite well-spread
and most of the people become familiar with them.

53
Visual design

Visual design
Typically UX designers don't do visual designs, although the visual side of your product
takes a huge part in the user experience. This sounds a bit contraversial so it's always good
to have a good general feel of aesthetics.

There are 4 possible cases in the intersection of visual and ux design:

A product can have really bad UX with amazing visual design: non-intuitive interface
with plenty of usability issues.
A product can have really good UX with poorer visual design: really slick and intuitive
interface.
A really bad product consist of poor UX and visual design as well.
An amazing product has really great UX and visual design.

This doesn't mean that UX designers must have amazing visual design skills as most of the
team design is a team effort: you'd need a great UI (visual) designer who can lead the visual
design.

Gestalt principles

To make your design look aesthetically appealing.

54
Typography

Typography
Typography takes a huge part in great UX design. The fonts you are using in your
application has the power to manipulate the mood of the user and communicate important
things.

Sans serif, serif fonts Headers, paragraphs Optimal paragraph lengths Optimal font sizes
Readability

55
Measure and Iterate

Measure and Iterate

56
Lean design

Lean design

57
Iteration

Iteration

58