Cyber-Duck Ltd | www.cyber-duck.co.

uk | © All Rights Reserved 1

Second edition
DESIGN
OUR HANDBOOK
FOR USER-CENTRED
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

Publisher: Cyber-Duck
Publication date: May 2019
ISBN: 978-1-9160826-0-1
Author: Cyber-Duck
Email: [email protected]
Address: Elstree House, 12 High Street, Elstree,
Hertfordshire, WD6 3EP, United Kingdom
Website: www.cyber-duck.co.uk
Please direct all enquiries to the author.
 1

Introduction

The UX Handbook is a unique publication that Cyber-

Duck has proudly produced to define user-centric
guidelines for organisations of all sizes. It will allow you
to begin designing the digital projects of tomorrow.

Our aim with the UX Handbook is to provide a step-

by-step guide on how to apply a user-centred design
(UCD) approach to any project. In doing so, we want
organisations to know how to create compelling user
experiences. The book covers design for websites and
web applications, but the principles can be applied to
software, native apps and other products too.

The framework and thought process are based on the

refined, accredited design process of Cyber-Duck, an
award-winning digital agency that specialises in user
experience (UX).

This book has been used by professionals from the

following organisations:
 2

Second Edition

During the editing of the second edition in 2019, we

renamed the UX white paper to the ‘UX Handbook’. We felt
this title better reflected its role as an introduction to UCD
and the great feedback we received over the last 4 years.
We had over 1,000 readers, from industry professionals
and veterans, to student designers.

With the content, we aimed to address the changes that

have taken place in our industry since we published the
first edition in 2015. Throughout, we have tracked the
evolution of technology and highlighted the importance
of content strategies and agile methodology. Here’s a
snapshot of what has changed for each key section.

01. Introduction
Minor updates only.

02. Planning
Substantial updates to the Requirements Gathering,
Stakeholder Interviews, Personas, Content and Analytical
Reviews. Added a case study from Mitsubishi Electric.

03. Design
Updates to the User Journeys, Prototyping and Usability
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

Testing sections. New sections for User Stories and Design

Systems. Added a case study from the Bank of England.

04. Development
Substantial updates to the Front-End Coding, Technology
and Test-Driven Development sections.

05. Conclusion
Minor updates only.

06. About us
Substantial updates to offer the reader more resources, the
UX Companion and our Digital Training Masterclasses.
 3

“
I invented the term [user
experience] because I thought
human interface and usability
were too narrow. I wanted to
cover all aspects of the person’s
experience with the system,
including industrial design,
graphics, the interface, the
physical interaction, and the
manual. Since then, the term has
spread widely, so much so that it is
starting to lose its meaning...”
DON NORMAN
Apple
 4

*
by Vitsoe, distributed under a CC BY-SA 3.0 license

“
Good design is thorough
down to the last detail.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

Nothing must be arbitrary

or left to chance. Care and
accuracy in the design
process shows respect
towards the user.”
DIETER RAMS
10 Principles of Good Design

*This image is licensed under the Creative Commons Attribution-Share Alike 3.0 Unported license.
 5

The UX Handbook will guide you through

the user-centric strategy needed to produce
successful projects. We will:

Briefly introduce you to the user experience

(UX) discipline and the key benefits of
implementing a user-centred approach to
project design.

Detail the crucial processes to consider

when planning a project, such as
stakeholder interviews, persona research,
feature audits and functional specifications.

Explain the influence of user-centred design

tactics, which highlight the importance of
continual user verification throughout the
production lifecycle.

Show you how to undertake development

within a UX context and encourage
constant collaboration between developers
and designers.

Summarise the guiding principles of UX

in a conclusion that reveals how to create
user-centric projects that will captivate,
engage and retain users.
 6

01

CONTENTS
INTRODUCTION
1.1 User Experience (UX) 9
1.2 The Development of Strategic UX 11
1.3 User-Centred Design & Test-Driven Development 12
1.4 The Key Benefits of an Effective UX Process 14
1.5 The Key Elements of UX 17
1.6 The Basic UX Process 18

02
PLANNING
2.1 Introduction to Planning 21
2.2 Requirements Gathering 24
2.3 Stakeholder Interviews 27
2.4 Personas 30
2.5 Content 33
2.6 Competitor Research 38
2.7 Analytical Reviews 40
2.8 Feature Audits 43
2.9 Ethnography 45
2.10 Planning Summary 47

03
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

DESIGN
3.1 Introduction to Design 51
3.2 ‘How Might We’ (Brainstorming) Techniques 52
3.3 Site & App Maps 54
3.4 User Journeys 57
3.5 User Stories 59
3.6 Prototyping 60
3.7 Usability Testing 63
3.8 Focus Groups 67
3.9 Art Direction & Visual Design 69
3.10 Design Systems 72
3.11 Psychological Models 76
3.12 Design Summary 82
 7

04
DEVELOPMENT
4.1 Introduction to Development 85
4.2 Front-End Coding 87
4.3 Technology 89
4.4 Test-Driven Development (TDD) 93
4.5 Post-Launch Analysis 98
4.6 Development Summary 102

05
CONCLUSION
5.1 Conclusion 105

06
ABOUT US
6.1 About Us 109
6.2 About the Author 111
6.3 Acknowledgements 112
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved 8

INTRODUCTION
01
 9

1.1
User Experience (UX)

Our relationship with technology is constantly

changing, and our digital and physical lives are
merging at an ever-increasing rate. As such, the need
for the development of technology that enhances the
human experience has become even more crucial.
Web design in particular has, does, and will play a
vital role in this. In its first 20 years, the World Wide
Web has successfully evolved from a fairly static,
linear platform into the collaborative, vibrant medium
we use today.

Despite this, in one sense very little has changed. The

success of a website or application still depends on
user perception. Designing with this simple fact in
mind is, on a very basic level, what user experience
(often abbreviated to UX) is all about. From the
outset, design decisions must be underpinned with
the consideration of who is using the digital product,
their aims and the experience they are used to.
This is balanced with the objectives of the brand or
organisation.

In this sense, UX is a holistic discipline, rather than

a standalone end-point. It encompasses process,
methodology and mindset in a way that can help you
to achieve the very best user engagement across
both platforms and devices. It’s about much more
than ‘pretty design’ or mere usability. It’s about
strategy and interaction. This is what Don Norman,
former Vice President of the Advanced Technology
Group at Apple, had in mind when he first coined the
term back in the 90s.
 10

Useful

Usable Desirable

Valuable

Findable Accessible

Credible
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

Morville’s ‘Facets of User

Experience’ neatly summarises the
qualities that users want the most.
 11

1.2
The Development of Strategic UX

At its inception, UX was focused on design for the web.

Now, the best UX design is more strategic, examining
multiple touchpoints and how they should work in
harmony for the user.

Rapid technological progression means digital interfaces

are ubiquitous and devices converge. Users expect
a consistent and meaningful experience everywhere,
whether on an iPhone, a PlayStation or a Kindle. They
tend to jump from one device to another, expecting to
see the same data and settings they experienced on a
completely different screen or platform. What’s more,
in recent years the number of these devices has grown
exponentially and they are no longer restricted to pixels
on a screen. The emergence of products such as voice
assistants and haptic console controllers (technologies
that recreate a sense of touch) have forced UX
professionals to think differently.

The role of UX professionals has grown. They must not

only design for the screen experience, but consider
user interactions across all touchpoints. Their job now
is to facilitate simple user journeys and interactions
by understanding how users move between multiple
touchpoints and finding ways to encourage optimal
moves.

Extra device features, limitations and device portability

all present further challenges. The Internet of Things
(IoT) is just one example of this. The release of
low-powered devices that can connect to the Internet
and smartphones (such as fridges, dishwashers,
and more) will present further opportunities for UX
professionals, providing them with the encouragement
they need to take their roles even further.
 12

1.3
User-Centred Design
& Test-Driven Development
User-centred design (UCD) is a design methodology
and research process that falls under the overarching UX
discipline. An effective UCD framework is the best way
to examine and meet our users’ desires, as it places their
experience at the core of the project. The stakeholders
and target users are consulted at each key stage of
the design process; they are presented with versions
of the interface and/or tests of early prototypes. This
iterative methodology challenges and checks the
project with real users; teams aim to constantly improve
the experience and product in response to this user
feedback.

UCD creates an end product that is efficient, pleasurable

to use, and fits both the requirements of the user and
the objectives of the brand or organisation. It also
ensures cost and time efficiency, especially if combined
with an effective project management philosophy like
agile or lean.

Technological implementation is the other side of the

UX design coin. In the software engineering world, test-
driven development (TDD) complements UCD. It ensures
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

technical research, system architecture and the technical

development of the final product is produced with on-
going technical testing and code reviews throughout.

The best results are achieved by combining the UCD and

TDD processes to create a single cohesive methodology.
By working alongside each other and reaching
comparable milestones, the design and development
teams can closely consult with each other throughout
the production lifecycle.
 13

Final product Final product

Stress test UAT

Platform development

Technical prototype Design

System architecture UX prototype

Technical research UX research

Test driven development User centred design

Key test-driven development and user-centred design

stages can run alongside each other to produce an
effective final product, as shown in the diagram above.
 14

1.4
The Key Benefits of an Effective
UX Process
To deliver true value to users across all platforms,
establishing an effective user experience must become
an objective of the organisation. It must not be a
post-development (or even marketing) bolt-on. A
comprehensive UCD methodology will ensure the UX
process is effective by helping to:

1. Make the product pleasurable to use

An effective process will ensure the original vision for the

project is delivered successfully. It will prioritise the needs
of key audiences and incorporate innovative design and
technology to create the most pleasurable experience.

2. Bulletproof requirements

Project briefs often misinterpret both the organisation’s

objectives and the user’s goals. Understandably,
most companies believe they recognise their own
objectives and customers better than they actually do. A
comprehensive UX process will probe the requirements
and data extensively. Iterative testing and ongoing user
engagement increase the likelihood of success.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

3. Mitigate risk early and reduce waste

Involving users and stakeholders throughout the design

process encourages more meaningful interactions and
avoids disappointment. Engagement from the outset is
effective, as it is more expensive to fix errors post-launch
than during the design process. It also avoids ‘feature
waste’ by obtaining user input into the functionality that
matters, as opposed to unfocused design by committee.
 15

4. Make your content work on relevant devices

You may only need to design for one medium, be it

desktop or mobile. However, the sheer range of different
gadgets on the market – including smart watches, games
consoles and eReaders – increases the likelihood you will
need to extend development to a variety of mediums. A
solid UX process will help identify and optimise for these
user requirements from the start.

5. Ensure that human psychology is at the centre of design

People have a set of ‘mental models’, or their fundamental

expectation of how a product will work before first
engagement. UX practitioners ensure designs fit these
aspects of human psychology by using proven, research-
based usability heuristics.

6. Eliminate ego design

A UX team can distil and steer projects towards key issues

by studying a combination of quantitative and qualitative
data sets. Quantitative data includes analytics, customer
relationship management (CRM) and big data, while
qualitative data refers to methods like user interviews
and usability reviews. If research is conducted and results
applied iteratively throughout development, the product
gradually becomes more user-centric.

7. Bring out the best in your team

Production can become more empathetic to the end-

user’s needs if you embed a UX culture led by qualified
professionals. The collaborative nature of UX combines and
maximises the strength of the entire team, from developers
and designers to analysts and marketers.
 16

8. Consider accessibility

Good UX design considers all users, including those

with accessibility needs. A good UX process should
embed accessibility into it from the start, ensuring
products adhere to the latest WCAG criteria (2.1 at
time of publishing). Having a good understanding of
your users (through user research) will allow you to
know how far you need to go with the accessibility
of your products (e.g. A vs AAA).

9. Promote ethical design

Considering users’ privacy and trust is central

to good UX design practice. Gain a thorough
understanding of your users’ needs so you can
deliver a product that acts on the issues that
are most important to them. For instance, your
design might promote privacy (e.g. achieve GDPR
compliance) and discourage dark UX practices.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved
 17

1.5
The Key Elements of UX

Recognising the intricacies of each project is a vital

principle of the UX discipline. UX professionals must
understand how to adapt their process to suit each
project’s unique circumstances. For instance, they will
require different types of research and data to make
validated UX decisions.

To illustrate this, here’s a ‘Pick & Mix’ of UX methods

chosen for a sample of projects produced by Cyber-Duck:

Ethnography

Feature Wireframe usability Competitor

audit testing research

Use case Algorithm & Strategic content

mapping UI design writing

HTML Expert critique Wireframe

prototype by tax experts prototype

Retirement planning Corporate website

website application development
 18

1.6
The Basic UX Process

Designers should be creative about which UX tactics they

use, bearing in mind the unique needs of each project.
For instance, technically challenging projects (that are
more functional) will require more in-depth prototyping
than a standard corporate website. However, every
project must follow the basic stages of the UX process.

Strategy

The UX team should start the project by establishing the

production goals and objectives, considering the purpose
and requirements of the final product. Here, the team will
identify the types of research and resources required to
best understand the needs of the user. Before production
starts, teams often discuss project management: begin by
defining your management hierarchy and by specifying
the kind of interdependent organisational support you
will need.

Research

At this stage, the UX team examines and evolves the

brief into a full design project. You should consider user
needs, content requirements and functional feature
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

specifications, while setting KPIs to fulfil organisational

goals. This will involve qualitative and quantitative
research, including probing data sets, creating user
personas and exploring how users want to interact with
the end product.
 19

Prototype

The research results are used to develop a prototype

that normally acts as a full design specification: it will
detail the information architecture and interaction
design deliverable. Prototypes can vary in fidelity and
interactivity but at their core they demonstrate the
user interfaces (UI), functionality and content of an
application. Some prototypes can even include full code
development and act as an MVP on which to build further.

Visual design

The final product must be aesthetically pleasing and

showcase the ideal image of the brand. All visual details
must be considered, including the logo, tone of voice,
terminology, colour palette, typography and graphics.

Without exception, you must deliver regular

KEY IDEAS

presentations to stakeholders. In addition, you should

consult real users to gain valuable feedback during each
stage of every project. User interviews, focus groups, and
usability testing verify design decisions. It is vital that
your UX team works with the development, branding and
marketing teams to ensure that messaging, marketability
and technology are consistent.

Later, we’ll expand upon each of these stages to show

you how they work within Cyber-Duck’s agile UCD
process. We’ll show you how a compelling UX can be
executed alongside technology implementation and
marketing. But first, we’ll look at the planning phase of
UX projects.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved 20

PLANNING
02
 21

2.1
Introduction to Planning

There is no single way to undertake the planning, design

and development stages of a UX project. User-centred
design is a strategic methodology that can deliver any
type of digital project, adapting to unique requirements
and objectives. But to plan any UX project you will need
to consider the following:

Audience

To design for a specific audience, you need to adopt

a research method that suits that audience. Different
audiences require different research techniques. After all,
users of different ages, cultures, and even socio-economic
status can interact differently with digital products. For
instance, a Nielsen study revealed gender differences in
smartphone capability preferences.

Research

Design is subjective. There are multiple ways to approach

content and interfaces. Extensive user interviews help
establish the most relevant direction.

During testing, the team may discover users interact with

the interface in ways you didn’t anticipate. Intelligence
like this can present you with the opportunity to target
your design further.
 22

Technology

• You need to consider technological restrictions

when creating your UX design. For instance, old
devices and discontinued internet browsers may
limit the user experience of the product because
it can’t support your design. Provide the best
experience possible across all touchpoints and in
all contexts by providing fall-backs, or by using a
feature enhancement approach.

• Consider more than just the browser. Today’s

experiences are omni-channel and incorporate
apps, speakers, TVs, tablets and more, so choose
the right technology to deliver seamless, consistent
experiences across all devices.

• If a product relies on new, unfamiliar technology

or design, consider incorporating affordance. This
means the interface design is either intuitive or will
teach a user how interact with the product.

• Besides TDD, consider what technology frameworks

you need for back-end and front-end development.
If you are planning to create a single page
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

application (SPA) you could use a JavaScript

framework like Vue.js or React.
 23

Relationships

• Relationships affect production, so you need to plan

for any impact they may have. For instance, projects
can encounter resistance from stakeholders and end
users who are reluctant to change and comfortable
with the familiar.

• To calm stakeholder ‘resisters’, plan regular

meetings to disclose research findings that
underpin each design decision. You could even offer
stakeholders and end users alternative interfaces
that are like previous systems.

This chapter explores the most effective techniques

available for meeting planning requirements and
conducting effective research. You can undertake the
planning in a matter of weeks, or even over five or six
days.

But you must also consider timeframes and budgets,

which can be affected by many factors, including
project scope and complexity. You’ll also need to think
about the team: from size and experience, to project
management, resources and potential third party
involvement, what kind of team will your project need to
be successful?
 24

2.2
Requirements Gathering

Most projects begin with a written brief. It varies in detail

and length, ranging from a comprehensive document to
a one-page brief. Normally, the project commissioner,
owner or manager is responsible for gathering the
requirements.

Here, the underlying goal is to provide an effective

document to a production team, with UX at the core.
This means they can respond with their own proposal
(or quotation) acknowledging these requirements and
specifying the timeline, resource and budget needed
for production. A digestible and actionable document
typically contains no more than 3-4 pages. It shouldn’t
specify every single feature and function, but it will cover
the following:

• High-level interaction design (IxD) objectives, including

the initial key performance indicators (KPIs) chosen
for the project, key deliverables and use cases for
archetypal users.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

• Proposed information architecture (IA), so the content

(and overall content strategy), structure and media
are well thought-out.

• Ideas for the technology that can deliver the vision, by

engaging with internal development and marketing
teams.
 25

• System integration or data import/export required, if

applicable to the project.

• A data migration plan for the transfer of new content

and data into the new system. This can be a complex
process, so it’s important to provide at least initial
ideas on data integrity, formatting, testing, and the
deployment plan in the brief.

But remember, these ideas should be high-level only and

treated as hypothetical. The details of the user experience
will adapt through further discussion with internal and
external stakeholders, and the outcomes of research
conducted with working prototypes. Ultimately, the
team producing the project will counter and explore the
document further – they will interpret it in their own way
and offer their own proposals. Any changes to the original
requirements should be carefully checked so they match
(or improve upon) the original brief.
 26

• Scope of work – ideally, your proposal will

FURTHER TIPS
estimate the time needed to research and
implement the scope. Communicate with your
production team or company to accurately
quantify resource time.

• Return on investment (ROI) – an effective

brief will work to maximise the stakeholders’
budget. Within the schedule outlined, you
must define the KPIs you will use to measure
the ROI.

• SMART objectives – it’s best to define project

objectives and requirements from the outset.
Consult with stakeholders, project owners
and other interested parties to fully define the
project before full production commences.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved
 27

2.3
Stakeholder Interviews

Once the requirements are agreed, interviewing

key project stakeholders should be the first port of
call. This helps to articulate the overall vision for the
project. How key stakeholders are selected will depend
on the size of both the project and the organisation,
but it’s best to interview key stakeholders from
different departments and of several seniorities within
the organisation. The questions will differ from project
to project, and these must be prepared individually
before the interview and have goals attached to them.

The interview session is vital for a number of

reasons. The UX team can meet key stakeholders,
understand their objectives and manage expectations
by discussing any unrealistic ideas. Given the
stakeholders’ expertise, it can help the team to learn
more about who they are designing for, which is vital
for drawing together key user personas. Lastly, it’s
a good opportunity for the team to agree on key
performance indicators (KPIs) for the project.

Input may be needed from key stakeholders who are

outside of the organisation and difficult to access in
person. These often include key suppliers or partners.
If there are many external or internal stakeholders, UX
professionals can use surveys to capture quantitative
and qualitative data (via free text input boxes). This
helps define the general vision by encouraging original
feedback from a wide range of voices.
 28

• Two heads are often better than one – multiple UX

FURTHER TIPS
professionals often lead interviews. After all, one
person alone may not understand (or miss) a key
piece of information; it is more likely that two
people can capture the essence of each point.
If this isn’t possible, recording audio or video
of the session is another option, provided the
participant gives consent.

• Project management – interview sessions are a

great opportunity to discuss project management
(including timelines, budgets and scope) so
the foundations are clear from the outset. Aim
to build rapport with stakeholders, as this will
facilitate work throughout the project.

• Individual interviews – ideally, sessions should

be held with one stakeholder at a time. If held in
groups, a colleague could interrupt, override or
influence the interviewee’s responses, skewing
your results.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

• Challenge the interviewee – probe the

stakeholder’s ideas with challenging questions
that get them thinking deeply about the project.
Uncovering the ‘why’ is especially important for
evasive or basic responses, such as “we’ve always
done it like this”. Insightful answers could result in
more follow-ups, interviews or a system audit.
 29

• Culture – stakeholder interviews can give you

an insight into the culture of an organisation
and reveal potential blockers that may affect
the project, such as resistors to change or
other cultural beliefs.

• Digital transformation – are there other

projects happening at the organisation
alongside your UX project? Find out if this is
the case, because these projects may overlap
with this one so the team need to account for
this. This is also a good opportunity to uncover
any internal business process limitations or
failures which may impact the user experience
and thus the project.
 30

2.4
Personas

After the stakeholder interviews, use the insights gained to

create archetypal personas. These personas will be based
on the stakeholders’ knowledge of their business and
customers. Their insights can stimulate design thinking,
helping UX professionals to create and explore use-cases
and user journeys.

You must choose personas carefully. Typically, we create

personas by looking at multiple factors, including:

• Behaviours and traits

• Context, i.e. how users interact with the

product or service

• Demographics and professions

• Product/system engagement data

Designers should first aim to define high-level, archetypal

users only. Most users will share common need-states,
motivations and concerns, so they will perform similar
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

tasks across systems or websites – therefore, high-level

personas are optimal early on. At a later stage in the
project, you can create more granular personas based on
data and create a broader range of segments tying into
your CRM and automated marketing systems.
 31

UX designers must cover the persona motivations and

objectives for using the product or service, and any
concerns they may have. They explore this by creating
individual ‘persona sheets’, with three to four other
attributes that would influence a user’s mindset: such
as their tech aptitude, social, economic and cultural
background. You’ll also need to consider accessibility
needs, and how user behaviour may vary between
different nationalities and cultures.

Once personas have been created, designers must

conduct research to validate them. Research plays
an important role in persona creation. They should
be based on tangible empirical evidence, such as
login information, past financial or CRM data. Verify
any assumptions by talking to real users, who match
the persona attributes. This can be done quickly and
cheaply either by phone, short face-to-face interviews
or through more in-depth ethnographic and diary
studies. Update your personas based on these new
insights.

Devoting enough time and resources to persona

creation will pay dividends throughout the project. In
later stages, personas are used to verify and challenge
flows of control and prototypes, and can even define
usability testing recruitment.
 32

• Approve personas – review and sign off your

FURTHER TIPS
persona sheets with key stakeholders.

• Mental model – aim to understand the user’s

mental model when creating personas by noting
expectations and previous experiences.

• Believability – encourage designers and

stakeholders to form a greater emotional
connection with their audiences by making
personas as believable as possible. Hanging
persona sheets on the wall as a key, visible
reference is one simple way of doing this.

• Affinity levels – examine and establish the level of

affinity a persona has with the brand or product,
and track this across each group post-launch,
if possible. Determining loyalty levels will help
shape interactions and content, and ultimately
improve engagement.

• Research – validate all personas through research.

Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

Get out into the field whenever possible to talk

to real users and gain a greater understanding of
their drives and motivations. You’ll need these to
answer your what, where and why questions.
 33

2.5
Content

You may have heard the maxim “content is king” before. It

exists for a reason: content is absolutely central to shaping
designs, interactions and the user experience. It’s for this
reason that it is extremely valuable to conduct a content
audit at the start of a project. The audit will help you to
map existing and future content into the project you are
working on. The audit should inform a content strategy
that ties into the information architecture (IA).

When you create a content strategy and content, it’s best

to involve a copywriter with expertise in the subject matter.
You should also think about involving your marketing
team to help craft new and engaging content, but this
will depend on your line of business and marketing
requirements.

Ideally, create the content strategy (and even the content

itself) as early on as possible to identify what content is
best and where your content gaps are. You will also need
to consider content and data migration to ensure that if
you have legacy content in another system you can import
it easily to the new one, all whilst embracing the new
information design.

If you do migrate content, you should consider any prior

meta data and links to other content as it may be affected
by your new project. You should also consider the content
governance (i.e. who is responsible for editing and
managing content areas) and content frequency. This will
 34

help you avoid stale or unmanaged content, both of which

can be detrimental to your brand.

When a vast amount of content is required, it’s best to use

a content matrix to score the content. You also need to
factor in SEO requirements and track the content creation
or formatting in progress.

Finally, always create content in context. Many teams will

create content in word documents and then realise that the
content doesn’t fit into the templates. Gather Content is a
useful tool you can use to create content in the browser. It
helps teams to visualise the final product by mocking-up
functional prototypes using HTML and CSS with semantic
structure and real content.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved
 35

• User personas – write the content in a language and

FURTHER TIPS
tone of voice that key audiences can relate to and
understand. Personas can also help you decide
whether you require a piece of content, ensuring it
doesn’t become too unwieldy.

• Use call outs – visually highlight and illustrate key

points with designed ‘call-outs’.

• Avoid Latin! – throughout the content creation

process do not use lorem ipsum and image
placeholders, as they can create false impressions
and detract from the information design.

• Infographics – use infographics or illustrations to

communicate messages visually where text alone
would be difficult to consume.

• An animated approach – make content more

entertaining by using videos, sound, animations and
visuals. Using simple captions alongside these can
back up or even replace some content.
 36

Case Study:
Mitsubishi Electric UK
When we began working with Mitsubishi Electric
UK, we quickly identified a major issue we would
have to confront: how to present complicated
technical information in a user-friendly way.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

The team first began with detailed user research,

which soon led them to realise that Mitsubishi
Electric had four very different audiences,
including installers, consultants, corporate end-
users, and homeowners. Some users therefore
wanted to know very detailed information, while
others only wanted to know the main benefits.
 37

In our final design, we constructed an intuitive

approach to content that prioritised high-level
information while giving the option for users to
delve deeper. We also audited all content across
Mitsubishi Electric’s multiple websites.

Our content strategy brought all Mitsubishi

Electric’s content together in a holistic
experience. Combining simple content structures
with striking visuals, we presented information
and support in ways that met and exceeded user
needs. The results spoke for themselves: a 37%
drop in the bounce rate in just six months.
 38

2.6
Competitor Research

Competitor research can spark ideas, discussion and

debate about the desired user experience. Determine who
the competitors are at the outset of a project, as they
could be used as an inspirational ‘benchmark’.

Note that competitors are not necessarily ‘direct

competition’. Instead, they could be drawn in parallel with
other market verticals. By looking outside the immediate
competitive space, it’s possible to gather inspiration that
might have been overlooked.

Analysing competitor strengths and weaknesses can

provoke creativity and inspiration. It is often summarised
in a visual presentation, and should clearly offer ideation,
inspiration and examples of successful interfaces and
content types. This means it can even help teams explore
the viability of ‘new’ interfaces that break convention.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved
 39

• Financial performance – the financial worth of a

FURTHER TIPS
company can determine whether their digital
products are considered as a ‘competitor’. But it’s
difficult to predict success. Reviewing incremental
invoice numbers and using tools like Duedil can
help gauge an idea of ecommerce competitor
sales, as a correlation of website success. But,
don’t assume this is linked to their design; many
factors can come into play.

• Mood boards – if the UX team is also responsible

for the creative direction, create mood boards
alongside the competitor analysis. This can
influence the visual design.

• Marketing insights – competitor research can be an

opportunity to understand competitor marketing
strategy. If applicable for the project, analyse how
they use various promotion channels: from social
media and video, through to organic search and
paid advertising.

• Get out there – one of the best ways to gain direct

competitor insight is to go to industry tradeshows,
or even visit a competitor’s physical location and
enquire about products or services in person.

• Monitoring – continuously reviewing competitors

throughout the production process will help give
projects an edge.
 40

2.7
Analytical Reviews

Analysing existing data can make a great contribution to

UX research. Examples include sales figures, registration
logs, conversion paths, social campaign success statistics,
downloads and AB (split) test results. Of course, as new
projects tend to introduce features (and even services) it
may be difficult to find benchmarks, simply because there
isn’t reliable or relevant data to review.

It’s also important to ensure any data collected is

actionable. Obtaining this is challenging for most
organisations so it can require specialised analysts.
One method available is cohort analysis, a time-tested
segmentation technique. It’s used to understand
commonalities and differences in user behaviour across
different groups that access the website or system at
various points in time. You would use this technique to
analyse differences when design or content changes have
been made, for instance. This type of analysis can be done
within Google Analytics in conjunction with Google Tag
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

Manager (GTM). With GTM you can track specific events

on a website or application such as downloads, form
submissions or scroll tracking. Most excitingly, GTM helps
you to track smaller, more focused events that may have
a substantial effect on user performance but might be
missed otherwise.
 41

GTM also reduces reliance on software developers as

it needs just one master tag inserted into the website
or application to work. In practice, this means that
non-developers can add as many tags as they like –
including ones from various vendors, like ClickTale –
without the need for extra development time to edit the
application code.

Of course, there are many other factors that need to

be considered when undertaking analytical reviews.
For instance, you could analyse top performing pages,
current rankings, social media sentiment, surveys, net
promoter scores (NPS) and big data.

• Baseline your data – before you start your project,

FURTHER TIPS

try to baseline the data. It’s important to do this so

you can conduct a before and after analysis from
a data perspective, which is great for comparing
conversions or sales to see if your work is having
an effect.

• Avoid data-driven design – some organisations

focus entirely on ‘data-driven design’. However,
it’s best to embrace ‘data-informed design’, where
you use analytics and data to enhance what you
already know by speaking to and observing users
in person.
 42

• Balance ‘quant’ with ‘qual’ – try to balance

quantitative data with qualitative user research.
Set clear objectives and a deadline for this stage
to avoid ‘analysis paralysis’, or the over-analysing
of data that garners no definitive conclusion for
project production. All of the above should be
combined to understand the why and the what.

• Search input – with website projects, incorporate

SEO and PPC insights into performance reviews to
ensure multiple sources of data are scrutinised.

• Click paths – various software tools (like ClickTale)

can provide useful insights; use them to track click-
through rates and paths over particular interfaces.

• Data logs – if the project involves a software,

application or website redesign, retrieve server
logs to highlight and visualise errors or points of
improvement.

• Other channels – if applicable, you should consider

Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

useful data from other channels, including mobile

app downloads and usage, social media sentiment
and email marketing campaigns.
 43

2.8
Feature Audits

In many instances, the team will be asked to improve (or

re-design) an existing website or mobile app, instead
of a new ‘greenfield’ project. Here, it makes sense for a
UX professional to undertake a detailed ‘feature audit’,
listing the current functions and features.

This ensures essential features are not missed within the

redesign process. Otherwise, it can be easy to overlook
functions that are taken for granted. Examples include
the admin user’s ability to print a job sheet in a legible
format, or allowing an end customer to search for
products by model number as well as name.

Ideally, features should be audited while compiling the

personas. Speaking to key stakeholders and audiences
is a great place to start. Ask them to list key parts of
the existing user experience that are important to them
before making any design decisions. The final audit
should be concise and legible.

Feature audits helps negotiate the fine balancing act

between designing new features and keeping older ones.
Combining qualitative research and analytics data helps
UX professionals recommend which old features should
be kept. Validate and demonstrate why decisions were
made throughout production, by tracking revisions of
what functions were added or removed alongside the
‘feature audit’.
 44

During feature audits, avoid using the MoSCoW (must

have, could have, should have and won’t have) method. It
can contradict other parts of the UCD process, because
it specifies user and business requirements upfront
before tailored research is complete.

• Technical audits – developers can often generate an

FURTHER TIPS

automated report that highlights how many times

a particular feature or function has been utilised.
It’s a great method to sanity check the new design.

• Consult stakeholders – discuss the back-office

systems with experts, and highlight the features
that are an operational necessity.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved
 45

2.9
Ethnography

Ethnography can be used at any stage of the UX

process. But, it’s best to begin this as early as possible.
Ongoing ethnography is a particularly welcome step
because it ensures that the project will continue to keep
users in mind. This technique involves observing the
daily routine of the archetypal user within their natural
habitat. It removes the clinical aspect of the research
and testing environment.

It follows that users can interact in a less pressured, more

natural way, which tends to encourage honest results.
This is the main benefit of ethnography in a UX context.
It highlights the difference between how project owners
and designers think users interact with the end-product,
and how they actually do in their natural daily routine.

In practice, there are different ways to conduct

ethnography sessions, depending on budget, resources
and project context. The simplest method gives
diaries to users, asking them to record thoughts and
experiences while interacting with the project, either as
they go about their daily lives, or through set tasks. After
a significant amount of time, users would return the
diary to the UX team for analysis.
 46

With prior user consent, setting up discrete recording

equipment within their natural habitat is another option,
using screen capturing software and/or audio-visual
equipment. Here, the user would still be asked to rate
their experience, but the UX team would also benefit from
being able to analyse the user’s behaviour retrospectively.

It is important to highlight that, like other forms of user

analysis, audience segmentation and recruitment is the
key to obtaining reliable and actionable results.

• Be invisible – ethnography undertaken on site

FURTHER TIPS

should be as non-invasive as possible; your aim is

to observe the user throughout their normal daily
routine.

• Reward users – recruitment can be a challenge.

Reward users with small incentives (such as
discounts or payment) and explain the value of
their contribution towards improving the product.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

• Online ethnography – tools like ethnio are a cost-

effective, advanced method of ethnography, as
they allow companies to recruit and gain live
feedback from real customers online.

• Ask questions – understanding the user behaviour is

paramount, so follow-up sessions may be required
after the ethnography is finished.
 47

2.10
Planning Summary

Embarking on a planning phase (or research sprint)

upfront is important for all digital projects, be it
website and app development, or software and product
development.

Increasingly, organisations are using agile project

management models to develop user-centred digital
products rapidly. These models encourage teams to
manage development via a series of flexible sprints,
based on an evolving backlog. High priority features
are planned for each sprint to fulfil a given ‘user story’.
Designers utilise user stories as a way of taking the
user perspective during a certain activity. User stories
are easy to understand, and address a specific user
requirement from their perspective. A user story could
look like: “As a ____ I want to ____ so that I can ____.”

However, writing user stories for each user requirement

and subsequently getting the stages and sequence of
tasks is the hard part. But if you can get it right, you will
determine how user-friendly, scalable and future-proof
the final product will become. It’s because of this that
you must never skip the research phase. Besides user
stories, agile methodologies don’t tend to document
or mandate how teams can gather and research user
requirements. Therefore, balancing ‘data informed
research/design’ in the process is going to be key.
 48

Organisations should be ready to baseline their data and

use data to inform, not dictate, design decisions.

This is where user-centred design comes in. Reviewing

the techniques and stages advised in this chapter will
give companies a far better idea of how to structure the
research phase to gain the best insights. Adapting the
planning and design approach to each project is part of
the creative process. The next chapter delves into how
to move from research to design.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved
 49

“ The process of design starts

with exploration, but ends with
refinement. The best designers
carefully move from one to the other,
making sure they spend enough time
exploring before locking themselves
into a design approach.”
JARED SPOOL
Exploring Options and Making Decisions
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved 50

DESIGN
03
 51

3.1
Introduction to Design

The role of UX should not be constrained to pure

research; similarly, the design element of UX projects
should never be limited to graphic design and art
direction alone. Instead, a true UX design approach will
fuse the user requirements, content strategy, feature
needs and technology architecture into schematics.
These are worked up into usable designs or code by
an interdisciplinary team, which includes developers,
marketers and other types of designers.

From a UX perspective, the most crucial part of the

design process is the continual incorporation of user
verification as designs are iterated. This user input is
best obtained via a variety of techniques, including
interviews, usability testing, ethnography, focus groups
and analysis of actionable data and insights. The design
tactics listed below can be applied to most projects to
achieve success.
 52

3.2
‘How Might We’
(Brainstorming) Techniques

Before the design commences, it’s often a sensible idea

to undertake a ‘how might we’ (HMW) brainstorming
session with key stakeholders, including external
suppliers like creative agencies, PR firms and developers.

The concept of HMW is based on establishing how

we can help improve the user experience by placing
customers at the heart of the design, as opposed to
designing only what is best for the organisation.

In the session, the moderator gives all individuals ten

minutes to select three to five areas of improvement; this
can be anything from the sign-up process, to adding on
a page calculator. Members can sketch out or verbalise
ideas, ready for presentation to the rest of the group.

During HMW sessions, it is important to embrace

all views. Encourage constructive, amicable and
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

professional debate that can be beneficial for the

project, rather than judgment or criticism. A UX
professional should take notes of all the ideas presented.
The data gained from HMW sessions can be used to
direct the sitemap and flows of control.
 53

• Provide context – UX professionals should explain

FURTHER TIPS
the context for the web project, so the group can
understand its goals.

• Brainwriting – this technique encourages different

team members to bounce ideas off each other and
elaborate on ideas without extensive moderator
intervention.

• Get out of the office – the best ideas often come in

a relaxed environment. Put distance between your
team and the workplace.
 54

3.3
Site & App Maps

Site (or app) maps should be created at an early stage,

as they capture the high-level IA and the underlying
taxonomy of the project. Sitemaps can be created for
many types of project, including websites, software, and
both intranet and extranet systems. Similarly, app maps are
created for mobile and software applications, and cover
functional and user journey style projects.

Low-fidelity card sorting is one of the easiest and most

effective methods of creating site and app maps. It
is a quick and inexpensive exercise, which requires
collaboration between UX designers and users or
stakeholders. This means all parties can understand the
thought process behind sorting, prioritising, and defining
the hierarchy of key information for the project. Card
sorting exercises can also accelerate the content definition
process.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved
 55

There are two main card sorting techniques to create

site/app maps. Throughout both exercises, the UX
designer’s role is to facilitate and observe. The main card
sorting techniques include:

• Closed: users or stakeholders are given predetermined

category (section) names, and are asked to assign
index cards within categories.

• Open: users can help to classify sections and verify

naming conventions.

Post-it notes are the classic low-fidelity tool used during

these sessions, as they can help participants to easily
iterate and re-order ideas for categories and sections.
Online, remote card sorting can be supported using virtual
tools like Optimal Sort, WebSort or Xsort for Mac.

While creating a sitemap and conceiving interfaces, it is

vital to consider the limitations of human memory and
cognitive abilities. For instance, research indicates a high-
level menu system should not have more than 7 items1.

1 George Miller, a psychologist, suggested most people could hold seven pieces of
information at once in their short-term memory (with the Magic Number 7+-2). However,
Dr Susan Weinschenk recently argued this number is much lower, at 3-4 items. Either
way, don’t overload the user with navigation systems.
 56

• Prepare for the card sorting meeting – whether

FURTHER TIPS
performing an open or closed sort, UX professionals
should prepare the sorting cards in advance. This
will ensure the session is as productive as possible,
while allowing participants to suggest new ones
during the exercise.

• Explore other options – the result of card sorting

should not completely define the final sitemap. UX
teams must explore other data sources, such as
keyword data, competitor research, customer and
stakeholder surveys, conversion data and marketing
reports (such as PPC and SEO data from Google
Analytics and Adwords).

• Balance business goals against user needs – the final

sitemap must balance and answer both user and
business needs.

• Content strategy – subject matter experts are

essential for designing the content strategy.
Their input is required to help design secondary
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

navigations and even tertiary/quaternary filter

interfaces.

• Getting sign-off – key stakeholders should ‘sign-off’

the final sitemap as a tidy PDF document. This is
because the underlying hierarchy and taxonomy
will influence the rest of the design process. Once
approval is secured, the team can move onto
prototyping and system design, though it is possible
to start these tasks in parallel.
 57

3.4
User Journeys

User journeys are also referred to as ‘activity diagrams’, or

‘use cases’. These are diagrams that highlight the different
journeys (or options) a user can take through a web system
or product, based on the tasks they want to complete.
User journeys help all stakeholders to understand the order
of events, and what happens at each interaction. They can
also highlight user pain points and reveal opportunities
to improve the overall user experience. They can be
expanded on further to add content interactions, channels
engagement and SEO/marketing options.

User journeys should be created after the stakeholder

interviews are completed and personas established. While
there is overlap between the interfaces defined on the
sitemap and the user journey, the stages can inform each
other if iterated together.

User journeys must be easy to follow so use standardised

visual elements and conventions from traditional flow
diagrams, like diamonds for decision trees and squares for
interface screens. Adding diagram colours or icons can
help to indicate whether a screen is relevant to a particular
persona, or indicate importance against other elements.
Always supply a small legend table in the footer to explain
the conventions.
 58

• Add notes – enhance the user journey diagram with

FURTHER TIPS
annotations and footnotes to clearly articulate the
complete user experience. Even pen scribbles and
drawings can help.

• Logic – designers should work closely with

developers to verify that the user experience is
logical from their perspective. After all, developers
will be adapting the business logic from the user
journey into their own database design and/or
UML, the modelling language used to visualise the
design of a system. API dependencies should also
be mapped in.

• Consistency – increase stakeholder understanding

by using consistent language and elements in the
FOC. For instance, the ‘visual language’ could be
especially clear if the same colour conventions as
the site (or app) map are used.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved
 59

3.5
User Stories

We touched on this subject briefly in section 2.10, but

we’ll look into user stories in more detail now.

On certain projects, such as those that use an agile

working environment or within sprints, you will need
to deliver complex features quickly and stakeholder
requirements will keep changing. Teams can employ user
stories to deliver developer-friendly requirements that
can be easily implemented.

Informed by personas, sitemaps and user journeys, user

stories describe the actions and motions of what users
need. The advantage of stories is that they act as a
‘requirement’ blueprint describing a narrative of what the
user needs to do on an interface at any given moment.
Before you create user stories, consider creating epics
first. Epics contain multiple smaller stories. An epic could
be a dashboard or registration process, for example.

User stories can be fed into an automated software and

tested against particular system functions and flows
(like a registration process). User stories don’t only help
designers and developers; they can also aid the QA
team test against requirements. As a result, user stories
can minimise the likelihood of errors emerging further
down the line. It will also help to create a culture of
documentation within your working environment. During
a project lifecycle, user stories are generally put into a
product backlog, scored, prioritised and validated
by stakeholders.
 60

• Know your user – don’t write the user stories until

FURTHER TIPS
you are confident you have validated the user
requirement with a stakeholder or even better, with
a real persona.

• Be collaborative – two heads are better than one in

this instance; challenge your assumptions about
the story with a colleague and you’ll be faster at
creating them!

• Keep them simple – it’s best to avoid confusing words

and start the story with: “As a <user>, I want to
<what the user does> so that <I can complete this>
every <frequency>”.

3.6
Prototyping

Prototyping is an essential stage in the design process. It

involves creating interactive and functional interfaces that
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

can be tested and evaluated in a browser. Real content

(and even styling) should be used to gain the best idea
of what the final product will look like; as before, refrain
from using template content, lorem ipsum or image
placeholders.
 61

Begin with low fidelity prototypes, as you can create

these very quickly. Further ideas should be generated
using regular ‘live’ input from the stakeholders, and ideally
even incorporating feedback from real users. Before
prototyping, it’s important to have a vision for the sitemap,
the features required (via previously mentioned research
techniques) and the flow of control. But, these concepts do
not have to be final.

There are many prototyping tools out there, and which one
you use will depend on what you’re trying to achieve. For
grey scale wireframes, you can use AxureRP. It can handle
simple one page websites or multiple page applications
with complex interactions. For high-fidelity prototypes,
Sketch can be used in tandem with Invision Studio to
create interactive prototypes in the browser.

Prototyping with real functionality (via HTML and CSS) can

even be beneficial for some projects. Although creating
these is more time-consuming, they best communicate
the more complex behaviour and responsiveness of some
interfaces. This can then help to speed up development.

CSS frameworks can be used to create these prototypes

more rapidly. Examples include: Tailwind CSS; Bulma;
Bootstrap; Foundation; or Hoisin, Cyber-Duck’s very own
SasS framework.
 62

• Black and white – initially, use low-fidelity tools

FURTHER TIPS
(such as thick felt-tip pens and paper templates)
with a monotone colour palette instead of a
computer. These methods will encourage the
wireframes to focus on basic functionality instead
of design and visual aesthetics.

• Review as a group – the wider group should

critique each prototype and creative sketch. All
can consider the reasoning and logic behind an
idea, using the established personas and flows of
control to identify how each interface will affect
the overall experience.

• Mobile first – UX designers should develop

prototypes for smaller screens from the outset,
alongside the traditional larger formats. This will
help to establish the key interfaces and elements
for the user, based on ‘core’ experience priorities
across devices.

• Other modalities – when designing for voice or

Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

other technologies like augmented reality (AR),

a mobile-first approach may not be relevant.
Ultimately, UX designers should create the
prototype for the relevant medium.

• Generate functional specifications – tools like

AxureRP allow designers to generate functional
and technical specifications. These can act as
a record of intent and advise developers on
complex functionality, permutations of interfaces
and other special circumstances.
 63

3.7
Usability Testing

Usability testing (often called user testing) is the next

imperative part of the design process. During the early
‘dot com’ era, organisations often bolted this stage on at
the end of the project. However, a strong UX process will
champion ongoing user input and usability testing in the
very early prototyping stage, as well as including end-user
acceptance testing (UAT).

There are many usability testing techniques, each with

their own benefits. Regardless, preparation is essential
to determine what tasks are to be given to the user, and
what sort of actionable items the UX professionals want to
obtain. You should create a detailed testing plan initially,
and then you should collate the findings in a concise
report. You may also make a set of changes to the design.

In its most simple form, usability testing involves a

moderator observing the user (taking traditional pen/
paper notes) while they conduct given tasks. This kind of
contextual inquiry has some parallels with ethnography.
However, the disadvantage with this method is that the
moderator will not be able to empirically record the exact
input and output of the user behaviour, and determine how
it affects the system.
 64

There are two different technologies that help record user

input more precisely, enabling the moderator to review the
‘test’ once more in retrospect. These technologies include:

• Validately, a tool which captures mouse movements,

video and audio feeds of the user performing the
tasks. Moderators view the activity in another room or
even in a remote location.

• Eye tracking, a tool used in a similar way to Validately. It

has the additional benefit of recording where people’s
eyes fixate in relation to mouse or finger movement.

The nature of both testing methods means it is best to

undertake them in a quiet environment. There are two
primary environments where usability testing usually
happens: formal and informal environments.

Formal testing is conducted in a lab or office setting, and

users are often recruited (and most likely paid) to attend.
Here, a usability lab often achieves the best results. It is
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

a controlled environment with dedicated waiting rooms,

reception staff and two-way mirror testing rooms with
audio/visual equipment, where the client can observe the
moderator. Users are individually invited into the testing
room to perform pre-determined tasks on the website or
mobile app. Once finished, the user can talk freely about
their experience in retrospect.
 65

Informal testing is more spontaneous, and therefore

compatible with corridor testing. It generally involves
incentivising users in situ. Although slightly more difficult,
it is even possible to use eye tracking equipment in
environments like cafes. When using this method, the
moderator spends a short amount of time in the busy
environment, observing users while they again try to
complete specific key tasks.

A different number of users should be involved in each

testing session, depending on the project. However,
usability tests do not need to be an elaborate, time-
consuming task. Studies have shown that employing large
numbers is potentially a waste of resources, as typically
five users will uncover 80% of issues. According to this
theory, the test results will depreciate in value as the
number of users tested increases2.

2 Running smaller tests with fewer users is more effective, minimising repetition
in results. As few as five users can find 80% of issues during testing; all issues can
be found by 15 participants.

• Recruiting – testing with the ‘wrong’ users is a

FURTHER TIPS

common reason for obtaining unreliable feedback.

Generally, real samples or segments of customers
should be recruited using a customer database,
CRM, or recruiters.
 66

• Retrospective Think-Aloud – ‘Retrospective

Think-Aloud’ (RTA) techniques help moderators
understand how users connect emotionally to
the product once tasks are finished. It involves
discussing the user’s experience of the testing
session. Moderators should encourage users to
verbalise comments as they watch back footage
of themselves completing the tasks.

• Avoid Think-Aloud Techniques Within Tests –

here, users are asked to verbalise their thought
processes while undertaking tasks in tests. But,
unlike RTA techniques, a concurrent Think-
Aloud technique can influence a user’s cognitive
behaviour and thereby skew test results. Avoid
using Think Aloud techniques during a study.
Nevertheless, although you shouldn’t encourage
users to voice their every move, it is important to
capture any verbal comments that a user might
make during testing anyway, as these comments
could provide useful insights.

• Remote Testing – this is another method, where

tools like UserTesting and Validately could prove
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

useful if you can’t conduct face-to-face tests.

These tests can even be unmoderated, which is
where you would provide the user with a set of
tasks to complete in their own time. However,
remote insights are not as potent as those
gathered from physical observations. It is difficult
to ensure remote participants are a true reflection
of the target user, and some could even be ‘serial
testers’ that are used to the environment.
 67

3.8
Focus Groups

UX-oriented focus groups aim to generate ideas and

feedback from users as part of a structured discussion.
These sessions are best conducted straight after usability
testing, as pre-qualified users are readily available and
already engaged with the project. Here, the moderator’s
role is to facilitate the group discussion and ensure it
stays on topic.

The moderator normally starts by asking the group how

they felt about specific tasks set during the usability
testing session. Slightly differing views will arise and
one user often has an opinion or idea that particularly
contrasts with that of their peers. Here, the moderator
can pick another participant to challenge the concept
raised, and open further dialogue. The moderator should
then seek group consensus via a show of hands and
encourage the participants to summarise their thoughts
on the best way forward.

But data collected from focus groups must be analysed

with caution. The product or service examined could be
new or unfamiliar for the user, who may not be used to
the learning curve. Some of the ideas suggested might
not be plausible or realistic. Overall, insights from focus
groups should be balanced with insights gained from
other research activities and be explored further with
stakeholders before implementation.
 68

• Plan the session – define relevant questions in

FURTHER TIPS
advance, alongside some creative, untested
designs or ideas. Limit the number of questions
asked to a figure between five and ten. You
will obtain sufficient data by doing so, all while
allowing time for spontaneity should the discussion
push in an unexpected, but relevant, direction.

• Open-ended questions – feedback will be limited if

participants are forced into binary-style ‘yes or no’
answers, as they will be relying on the moderator
to lead discussion. Avoid leading questions that will
influence responses.

• Equal involvement – overpowering personalities

could potentially take control of the discussion, and
create biased, non-reflective results. Brainwriting
with techniques like a simple ‘show of hands’ will
ensure equal involvement from the whole group.

• Mixed research – conduct focus groups in tandem

with other research activities such as usability
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

testing and persona research to ensure what you

design and build is above all usable.
 69

3.9
Art Direction & Visual Design

Successfully unifying the branding, art direction and

visual design with the interaction design is a critical part
of the best projects.

Numerous scientific studies have confirmed that users

believe beautiful interfaces have a higher degree of
usability. Colours, visuals, and the proportionality of
elements can make or break an experience. To truly wow
the audience, designers should invest in the photography,
typography, iconography and information design. Ryan
Freitas, a successful designer and start-up investor, also
supports this idea.
 70

“ The [user] presumption of utility

is entirely based on how beautiful
the product is… we have raised the
bar, where [the product] has to be
simple, gorgeous and utilitarian
from the first day, otherwise no one
will try it.”
RYAN FREITAS
Designer & Founder of About.me
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved
 71

• Branding – if designers are following brand

FURTHER TIPS
guidelines, they need to be extendible for the
project in question. Separate creative investment
is needed for projects that don’t have these
guidelines; you should establish a consistent
direction and tone of voice early on to propel
projects without guidelines forward.

• Typography – typefaces are critical when designing

a new product, and designers must select fonts
depending on their suitability to the brand. In
today’s digital world, it is even more important to
select web and app friendly type foundries.

• Colours – define a palette of colours that

complement each other. Different colours will
imply different meanings to users, depending
on the context. For example, on a post box, red
connotes an impression of institutional authority
and trustworthiness; in contrast, it implies warning
or danger on a road sign.

• Style tiles – like a mood board, style tiles are a quick

and inexpensive way to explore and iterate the
visual design without investing in fully-fledged art
direction too early on.

• Accessibility – when visually designing an interface,

accessibility needs to be considered. Colour
contrast, font–sizing and component size are just
some of the things that need to be thought about
when visually designing an interface.
 72

3.10
Design Systems

Some projects require a design system, which is a

collection of reusable components that can be used to
build different applications. Design systems are bound
by clear standards around their use. They work best in
large organisations where different teams are involved
in the design of multiple applications. In addition, design
systems allow for consistency, scalability and reduced
development time, all while reducing design debt.

As well as being useful in large organisations, design

systems are also beneficial in projects where different
companies design and develop an application. Creating
a design system is a cost-effective way to hand over
designs to developers. It provides developers with the
fully coded building blocks they need to create the digital
product the way it was intended.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved
 73

• Collaborate – before creating your design system

FURTHER TIPS
you should think about who needs to be involved
in its creation. Designers, researchers, leaders and
developers are just some of the people who should
be involved to ensure there is buy-in for the project.

• Maintain – once created, the design system should

be constantly maintained and updated when
necessary. Responsibility for updating the design
system should be assigned to someone.

• Standards – You must ensure there are standards

of use clearly defined for the design system. This
should be documented and followed by all who
use the design system to ensure it is implemented
correctly and serves its purpose.
 74

Case Study:
Bank of England
Cyber-Duck worked with the Bank of England to
redesign its website. The old website was dated
and it wasn’t user-friendly, but our UX designers
and in-house developers were ready to help.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

We audited all of the Bank of England’s 4,500+

web pages to gain a full understanding of the
current content strategy’s limitations. We then
proposed a new content strategy that would
empower users, enabling them to find content
quickly and easily.
 75

Our unique design system gave the Bank of

England the ability to build its own website
using pre-designed, pre-coded blocks. Our
accompanying guide taught the Bank how to
utilise the blocks, thereby ensuring our content
strategy was adhered to.

The new front-end design of the Bank of England

website was a far cry from the old one. Users can
now find the content they need, and the Bank
of England can build new pages quickly from
pre-fashioned blocks. But our success didn’t stop
there. The Wirehive 100 Awards recognised our
work for the Bank of England – we won Design
Team of the Year in 2017.
 76

3.11
Psychological Models

Strong design teams will work together to balance

brand design with accessibility, information architecture,
interaction design and content. UX designers, art
directors and visual designers can achieve a high
quality end product by applying a variety of established
psychological models, or ‘laws’, detailed over the
following pages.

“
The more choices you
have to choose from, the
longer it takes for you to
make a decision.
HICK’S LAW
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved
 77

BLUEBERRY PLUM
RASPBERRY STRAWBERRY

Hick’s Law reveals how the time taken by users to make a

selection increases with every additional choice they are
offered. It is best illustrated using the ‘jam experiment’.
Here, retailers presented audiences with similar tastes a
display of 6 jams in one location and 24 in another.

The study showed that 30% of consumers made a

purchase when faced with 6 options, whereas only 3%
converted with the choice of 24 jams. So, in the design
context, the effectiveness of designs will increase if
irrelevant objects are omitted from the end-product.
 78

“
The time required to rapidly
move to a target area is a
function of the distance to
and the size of the target.
FITTS’S LAW

The main hypothesis of Fitts’s Law is that user interaction

will improve when interactive objects are larger in
size and closer to each other. Smaller objects with
greater spaces between them (thus producing slower
movements between objects) will generally reduce the
quality of interactions.

Designers normally combine Fitts’s Law with other

Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

usability heuristics, like Gestalt principles. These are a set

of guides that describe how humans perceive patterns in
interfaces and objects. They reveal that grouping similar
items together can help the end-user build a cognitive
association between those elements.

By combining Fitts’s Law and Gestalt principles,

designers can strategically position interfaces together
to raise engagement, by improving both element
positioning and the relevant visual aspects.
 79

“
Data graphics should draw
the viewers’ attention to the
sense and substance of the
data, not to something else.
TUFTE’S THEORY

Tufte’s theory states that designers should place more

emphasis on content and data. The aim is to draw
user attention to it, and to help users process it easily.
Readability can be enhanced by visualising the data as
graphs, with plenty of captions and ‘call-outs’, or by using
visual cues like icons. In contrast, titles and secondary
information (like data labels) should be subtler.

DATA
 80

“
A behaviour will not happen
without motivation, ability
and a trigger.
FOGG’S BEHAVIOUR MODEL

Fogg’s Behaviour Model reveals how motivation, ability,

and a successful trigger must all combine in a single
moment for a user to perform an action on a website. The
simplest form of this model can help designers identify
the obstacles that prevent particular user behaviours.
When users don’t perform a desired action, one of these
psychological elements is missing.

High
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

motivation

triggers
succeed here

Motivation
A
ct
io
n
lin
e
triggers
Low fail here
motivation

Hard Ability Easy

to do to do
 81

“
Ethos, Pathos, Logos
ARISTOLE’S THEORY

To persuade a user that the product will be of value

to them, all design decisions should ideally follow the
three principles of ethos, pathos and logos, as identified
by Aristotle.

Ethos Pathos Logos

In other words, if a user does not believe the brand is

authentic and authoritative (ethos), cannot relate to the
imagery emotionally (pathos), and the product (or how
it is marketed) doesn’t appeal to their personal rationale
or logic (logos), there could be a lack of faith in the
product. This may prevent engagement or purchase.

An example of this is when a website uses obvious,

generic stock imagery, or where copy is poorly written
or lacks credibility. It will simply not enjoy the same
sales as competitors who invest in bespoke content.
 82

3.12
Design Summary

Designers must ensure products are accessible for as wide

an audience as possible, catering to different intellects,
IT literacy and disabilities, for example. It’s important to
maintain a user-centric focus during the whole project,
primarily by utilising the insights gained from the planning
and research stages throughout design and development.

The key to success is establishing a blended design

process, where iterative stakeholder and user feedback
are drip-fed into all design deliverables produced. From
interviews and focus groups to usability testing, the
techniques described above will help designers to ensure
validated user input drives each iteration and design
evolution throughout the project.

Of course, great art direction and visual design is still

important. But remember, the most effective products
will encourage user interaction through carefully selected,
prominent triggers, which have been meticulously tested.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved
 83

“ User-centred design means

understanding what your users
need, how they think, and how they
behave – and incorporating that
understanding into every aspect of
your process.”
JESSE JAMES GARRETT
The Nine Pillars of Successful Web Teams
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved 84

DEVELOPMENT
04
 85

4.1
Introduction to Development

It’s crucial to integrate the development process within the

context of UX design. Certain techniques and technologies
like test-driven development and responsive web design
will have a positive effect on the user experience of the
final product.

Design and development collaboration is the key to

success. Developers must be consulted on design ideation
throughout production. The developer must become the
UX professional’s ‘best work friend’ throughout the project,
especially for more technical projects. A close relationship
will ensure there are no conflicts over the UX ideas
proposed and what developers can realistically deliver.

After all, developers must understand the planned designs

and functionalities expected before they can begin the
technical research and risk analysis. From this, they will
define the development objectives and sanity-check early
deliverables, such as the flows of control and prototypes.

Collaboration from an early stage with a clear line of

continued communication will save time and avoid
unexpected delays. It’s key to use user stories, which we
covered during chapter 3.5. User stories underpin the
developer brief and help to engage them in both the
planning and development of the product. Developers will
only need occasional UX clarification following this. The
advantage of bringing developers on board early is that
you will minimise risks during the late production stages
because developers have already encountered the brief.
 86

They can work quickly and with full understanding to

deliver the product.

But to guarantee that your project flows smoothly from

the UX to development stages, you must understand
essential development tactics from a UX perspective. Here,
we’ll look at exactly that, covering: technical SEO, in-built
quality testing, performance budget and progressive
enhancement.

DEVELOPMENT QA

24H CYCLE
UPDATE
UX / DESIGN PRODUCTS
BACKLOG

UX DESIGN
DAILY
A retainer to ‘enable creativity’ STANDUP

and information sprints

RESEARCH /
DISCOVER

PROJECT
KICK-OFF
DAILY
CYCLE

SPRINT INITIAL INITIAL SPRINT

ZERO / PRODUCT RELEASE PLANNING
UAT
DISCOVERY BACKLOG PLAN MEETING
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

SCRUM PROCESS PRODUCT

INCREMENT
Sprint cycle 1-4 weeks

SPRINT
CLOSURE RETROSPECTIVE RELEASE

SPRINT
REVIEW

The graphic above demonstrates how key design and development stages work
in parallel at Cyber-Duck, where we combine UX with an agile mindset. The
UX research and design is ongoing within sprints but can also be treated as a
separate project within the Sprint Zero, or discovery phase.
 87

4.2
Front-end coding

Once the art direction is signed-off, we recommend

starting to prototype the front-end elements to see how it
will come to life in the browser.

Here are the key advantages of getting into the browser

as early as possible:

• Real content – the team will be more inclined to design

with real content. The very nature of an HTML page
will encourage early consideration of structured
content semantics, including headers, sub-headers,
and other tags.

• Responsive web design (RWD) – responsive design aims

to create websites and web applications that can be
used on all devices. This is achieved by using media
queries that target CSS for specific screen sizes, known
as breakpoints. Moving into the browser early makes it
easier for developers to experiment with fluid layouts,
and to explore how to implement each breakpoint.

• Progressive web apps (PWAs) – a natural evolution

of RWD, PWAs take responsive capabilities one
step further. PWAs allow developers to create web
applications that work offline, like a native iOS or
Android app, by utilising the device’s hardware
to accelerate the web app’s performance. These
web apps work like responsive websites with extra
capabilities and can also be ‘packaged’ into the Apple
or Google Play App store.
 88

• Easy universal changes – it saves time when universal

design-wide changes are applied. For instance,
the colour palette or behaviour of a link can be
altered by editing a few lines of code, instead of
painstakingly updating a Photoshop composition.

• Animation experimentation – if the design is coded in

the early stages, front-end developers can highlight
and experiment with animated elements to enhance
the user experience from the outset.

• Minimise production bottlenecks – early design in

the browser encourages the team to consider
cross-browser, device, hardware, and bandwidth
issues upfront. This will prevent roadblocks further
down the line. There are no hard and fast rules on
when exactly the shift to the browser should occur.
The timeframe depends on the project and core
development competencies.

“
Design is not just what it looks
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

like and feels like. Design is how it

works.”
STEVE JOBS
Founder of Apple
 89

4.3
Technology

The choice of technology is crucial for the success of the

project, but this can be difficult. There is an overwhelming
variety of programming languages, frameworks, content
management systems (CMS) and out-of-the-box platforms
or software that could act as a base for most products.

Overall, the chosen technology, platform and framework

must act to enhance, not constrain, the project’s desired
deliverables. They all have their own technological benefits,
and increase productivity and efficiency when utilised well.
Here are a few examples of frameworks to consider.

1. Front-end frameworks – These include grids and

layouts, base CSS, components for buttons, and
navigation controls. Other JavaScript plugins can drive
behavioural elements like page carousels, UI widgets,
and ‘drag & drop’ interfaces.

Frameworks that set a structure and standards

for writing front-end code include Foundation or
Bootstrap. But at Cyber-Duck, we have also produced
and shared our own lightweight, flexible front-end
framework: Hoisin.

2. Javascript frameworks – With the rise of Single Page

Application (SPAs) and Progressive Web Apps (PWAs),
several new Javascript frameworks have emerged.
These allow users to bind front-end components with
back-end data. Vue.js and React seem to be leading
the popularity contest thanks to their flexibility
 90

(and corporate sponsors), but this is a fast-moving

environment, and other technologies could arise.

If your project requires one of these frameworks, it’s

worth considering and assessing the merits of each
Javascript framework within the initial planning and
requirement gathering stage.

3. Back-end frameworks – Development frameworks

are baseline software systems that support the
development of digital products by minimising
overheads. They provide a standard methodology
for development by including database libraries and
template frameworks. They also utilise pre-existing
class systems and modules. Ultimately, they provide a
necessary starting point for developers that helps to
save time and money for clients; after all, it is cheaper
to start with a framework than a blank terminal.

By working within a framework, developers can

focus on the project’s creative and unique elements
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

instead, and work closely with UX professionals. In this

collaborative manner, UX professionals will learn what
modules exist and their function, and what new ones
need to be created. Any impacts to design ambition
need to be understood as early as possible, so a
collaboration between developer and designer is vital.

But to give you a brief overview, it’s worth noting

the capabilities of modules in a back-end framework.
The modules could include: a login/registration
authentication component; search indexing; error
 91

messaging; template engine; content tagging; enable

taxonomies; pagination; quick form builder; unit testing
control; database queries (via ORM); an admin console
or dashboard; and a lot more.

At Cyber-Duck, we remain flexible but champion

Laravel, the most starred PHP framework on GitHub. A
framework like Laravel provides the ‘low-level’ libraries
(or modules) of the digital product, usually interacting
with the database. It’s great for what we do here at
Cyber-Duck, but there are other frameworks out there.
Which framework you choose will depend on several
factors, including the software developer or agency’s
familiarity with the technology, and what the UX
requirements are.

4. Content Management Systems (CMS) – CMS are used

to manage and update the content of a website.
CMS come in all shapes and sizes, all with different
functionalities depending on the one you choose. For
many businesses, the capabilities of their CMS will
reflect what type of channels they are publishing in.

As we said above, there are numerous CMS out there.

Some include open-source projects like SilverStripe
or Drupal, which save time by providing much of the
publishing and editing functionality out-of-the-box.
Developers extend this default behaviour to match
specific project requirements; they can access and use
 92

the source code as a ‘base’, creating and implementing

custom plugins and building dynamic blocks to match
designs.

But in recent years, a new approach to CMS has

surfaced: the headless CMS. A headless CMS works in
tandem with APIs to analyse users and provide them
targeted content based on their segment and persona
profile. It delivers consistently high-quality experiences
for users that are optimised for every channel. 

Overall, the decision of what CMS you choose is best

made in consultation with technical experts, who can
advise you on what system is most suitable. The UX
professional or team should be part of this decision-
making process, as the CMS choice will impact the
delivery of their vision.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved
 93

4.4
Test-Driven Development (TDD)

The testing strategy should be planned carefully.

Functional and regression tests must be embedded in the
development process andimplemented before any feature
launches. This is known as a test-driven development
(TDD) approach. Developers and quality assurance (QA)
analysts are responsible for implementation. Using a
strategy like this means fewer issues will be discovered on
launch or in new feature releases.

First, the QA team should review the early deliverables,

mainly user journeys, sitemaps and prototypes. These will
help plan and document the overall testing strategy for
the project, including preparing test scripts, reviewing
different modules of the website/application, and detailing
all required functional tests. The QA team should also
ensure they have acceptance criteria for each user story to
confirm that the feature or function is working as intended.

Meticulously planning and executing the strategy will

ensure features and functions run correctly. Some key TDD
and QA tactics are detailed below.

1. Functional testing (FAT) – This ensures the product

achieves the goals expected. Each functional interface
of the website/application is examined by inputting
a test script, which compares the output against the
intended behavioural specification. It is known as a
‘black-box’ test, because interface surface functionality
is tested without examination of the internal structure
(or code) of the website.
 94

The scope of FAT means it is often the most intensive

part of the testing process. If the website or app is
‘form intensive’ (contains many in/outputs), testing
strategy should be defined early on. Build the unit tests
into the code during, or even before, development
commences. Vastly reducing the number of bugs
discovered post-testing is a great trade-off for this
time spent at the start.

By writing tests for each piece of code written (such as

database queries, controllers and API calls), developers
can run tests as frequently as needed. Tests can also
be configured to run with applications like CodeShip
or Jenkins, which will green-light deployment to a live
environment only if all tests are passed.

2. Regression Testing – Regression testing is critical, as it

ensures new improvements or iterations to features
released do not cause an unintended, knock-on
effect for another part of the system. Non-developers
can automate regression testing with documented
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

FAT testing. Tests are based on the boundaries

of acceptance criteria (specified upfront) before
automation tools such as Katalon Studio are used to
identify malfunctions and issues.

This kind of test can also be combined with broader

usability acceptance testing (UAT). Here, both the
client (or product owner) and relevant users test the
project under professional moderation.
 95

3. Load Testing – Before launch, load (or stress) testing

is used to understand and evaluate a product’s
behaviour under specific and expected traffic/
bandwidth loads.

Completed via tools like Blitz, load testing identifies

maximum operating capacities and highlights
system bottlenecks. It ensures that the correct server
infrastructure is implemented before launch.

You should complete all testing on the same server to

avoid last-minute migration issues or incompatibilities.
If high traffic is expected, ensure the website can
respond well. Use a cloud computing infrastructure
combined with load balancing to split traffic across
several servers.

As the original ‘UX owners’, designers must sign-off the

end-product before sending it to the client. After final
project launch, QA Analysts execute abridged versions
of regression tests. They use checklists to ensure that
everything is functioning as expected. These typically
focus on the most critical features, such as the shopping
basket and checkout, or contact forms, navigation and
search functions.

Of course, a different testing strategy is required for

projects with ongoing development, where improvements
or new features are released periodically. For instance,
the Lean Startup movement emphasises the importance
of continuous deployment and releasing ‘bundles’ of
features together.
 96

During projects with ongoing development, you should

first test all features in a staging environment. Carefully
plan when to launch new features and stick to your
plan; primarily, you should only launch new features
after a rigorous testing phase on a staging server. You
should utilise a mixed approach to testing, combining
automated and manual (human) testing methods. We
normally call this stage the beta phase.

Beta phases aren’t only about testing the features

and functions of your digital product to see if they’re
working. As GOV.UK3 states in its beta guidelines, you
should also “measure the effects of any change to Key
Performance Indicators (KPIs)” since the early design
stages; “get an accessibility audit and carry out regular
accessibility testing”; make a detailed plan for the
launch of your service; and much more.

Ultimately, if organisations overlook testing processes

and launch projects with bugs and device/browser
issues, you can harm usability and leave the user with a
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

negative experience.

3
Find out more about how the beta phase works from GOV.UK.
 97

• Future friendly technology – investment in

FURTHER TIPS
responsive web design and scalable technology
can reduce the amount of device-specific
testing required. Instead, testing can focus on
key breakpoints across typical devices from key
product families and operating systems.

• Beta sites – in some instances, it’s possible to

launch a project as a beta. This is different to a
closed beta phase, as discussed above. It is in
fact public, but users know they’re exploring an
early release. It’s beneficial because it allows you
to identify issues in a live environment. Users can
provide early feedback about their experience,
so the production team can gradually iterate and
improve features before the main launch.

• Clients test best – if there is a great production-

client relationship, ask them to test key features
on both the staged and live environments before
release. This is only an option for the later testing
stages, as it’s not their job to find basic bugs.
 98

4.5
Post-Launch Analysis

Monitoring and tracking results is the final important

ingredient for designing a successful user experience. Of
course, investment in digital projects aims to drive return
on investment (ROI) for the business in question. You
need to know how successful your digital product is; to
track ROI, you should extract quantitative data from real
post-launch usage. The key is to measure and monitor the
effectiveness of a project: how it is performing in terms of
interactions with users.

Quantitative data can be gathered in a variety of ways.

Firstly, you should implement analytics tools (like Google
Analytics) to monitor visitor behaviour and conversion on
a live website. You must ensure that what you’re measuring
is relevant to the project. To do that, use the KPIs and
objectives of your project to determine where you would
expect users to ‘convert’. The marketing team should
then configure goals via Google Analytics to explore user
journey funnels accordingly. Look out for increases in the
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

conversion rate; if they aren’t there, think about what has

gone wrong. Most importantly, ask your users for their
thoughts on the product. It’s also worth noting that you
can use similar tools to track how users interact with
native iOS and Android apps; explore via Countly, Flurry
or Mobile App Analytics (an extension of Google’s web
tools). Measure activity through these apps in the same
way you do using Google Analytics for a website.
 99

The data you gather will ultimately provide UX insights

that inspire future improvement. As a smaller number of
users were involved in testing stages, these insights were
previously unattainable. But with Google Analytics, you
can identify areas of improvement by regularly reviewing:
the traffic and bounce rate of key screens; conversion
rate of landing pages; or funnel conversion of the
checkout process.

Further sources of data could be applicable for particular

projects. Increase the value of post-launch analysis by
combining Analytics data with any of the following:

• Sales and cohort customer data – tracking this data

in CRM systems informs and validates marketing
decisions, as they can use the data to benchmark
against previous, successful marketing campaigns with
high conversions.

• Error monitoring – tools like Sentry provide error

tracking that helps developers to monitor and fix
crashes in real time. This helps to fine-tune and
improve the user experience.

• Email newsletter platforms – tools like Campaign

Monitor and Mailchimp provide detailed reports that
detail how users interact with email newsletters. The
reports show which recipients interacted with the
campaign, the click-through rate and geotagged data.
 100

• Social analytics tools – further quantitative data can be

extracted from any social media channels associated
with the project, such as Facebook or Twitter. They are
useful for identifying brand ambassadors or detractors,
reviewing sentiment and benchmarking competitor
social activity. A platform called Sprout Social can
even reveal how effective social media channels are at
directing traffic to the main website.

• Holistic social tools – these can monitor the entire

social web, and will gather real-time insight into
user engagement and emotion. Tools like Mention,
Hootsuite and BuzzSumo will help you do this.

Overall, listening to customers online is a very powerful

tool for monitoring the real user experience. People will
often provide unsolicited feedback on their joyful (or
awful) experiences with your products or services.

Some organisations go one step further with a big data

approach. They combine structured data (like conversion
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

data or clicks) with unstructured data (such as customer

sentiment trends, search string data or M2M machine data)
to draw out detailed and revealing insights4. Tools like
Hadoop help organisations to get started with big data
analysis quickly.

4
To find out more about the distinction between ‘big’ and ‘small’ data, read my
blog on ‘Applying Data-Driven Design to Marketing: Introducing Data’.
 101

• Social media for test recruitment – when beta

FURTHER TIPS
versions of projects are released, social media
can be used to find and recruit testers. Followers
can be given early access to new iterations to
provide feedback and help identify issues before
wider release.

• Feedback tools – tools like Get Satisfaction can

enable users to give live feedback: ask questions,
view FAQs, share ideas, report problems and
praise features.

• Find conversations – certain social analytics

tools help find conversations and mentions
that would otherwise go unnoticed. Improve
the user’s experience by getting involved in
these conversations: you can simply respond
to a query, or you can make specific website
improvements based on user frustration.
 102

4.6
Development Summary

The development stage often produces the most tangible

part of a digital project. Unfortunately, UX concerns are
often pushed to the background here, due to a perceived
‘handover’ of work between departments, or timeline/
budget pressures.

Instead, encourage developers to continue working within

the blended, multi-disciplinary team. For instance, tests
should draw on the ‘designer’s eye’, which is well versed in
spotting user interface, graphical or interaction issues. The
key principles for development teams to follow are:

1. Plan and research technology, frameworks and testing

models from the outset.

2. Develop and explore options in the browser or

application mode as early as possible.

3. Review and improve work with UX professionals.

Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

4. Involve users in testing the product during every

feature release, before going live.

5. Use measurement tools to track server load, errors and

bugs, alongside spotting emerging trends.
 103

“
Leonardo Da Vinci
combined art and
engineering, that kind
of unity is needed once
again.”

BEN SHNEIDERMAN
Computer Scientist
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved 104

CONCLUSION
05
 105

5.1
Conclusion

Jim Collins’ popular assertion that “good is the enemy

of great” couldn’t get closer to the heart of the user
experience discipline. Mediocre productions that are not
fully user-centric will not captivate, engage and retain
users. This is especially true if the user journey is not
great throughout the website or app. One moment of
disappointment may cause the user to leave and search for
a more considered service.

The guiding principles covered in this UX Handbook can

help anyone apply a proven UX model to their projects,
and achieve a delightful, engaging user experience.

• The introduction outlined the guiding principles of UX,

revealing the role and benefits of UCD. It described
how an effective UX process can add tremendous
value to a variety of projects.

• The planning chapter covered how different UX tactics

and research methods can analyse and validate
commercial decisions, before entering the production
process. Key methods include stakeholder interviews,
persona development, competitor analysis, feature
audits and ethnographical research.
 106

• The design chapter revealed how to create successful

designs through brainstorming and generating
logical flow documents, prototypes, and functional
specifications. Tie creative direction into UX processes
from the outset and constantly iterate work, drawing
on usability testing and user feedback at all times.

• The development chapter detailed the production

process within the user-centric context. Developers
should consult designers to architect and plan back-
end frameworks, integrations, APIs and other technical
models. Embed test-driven development methods
to improve overall product quality and minimise QA
issues and bugs. Ongoing deployment, measurement
and post-launch analysis are critical for maintaining the
user-centric approach.

The key to success is gathering an experienced cross-

disciplinary team, who recognise that design is all
encompassing and represents a fusion of technology and
creativity. Using a lean and agile process is important
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

because the right decisions and deliverables need to be

created at the right time. Nothing can summarise it better
than this quote.
 107

“
The best design explicitly
acknowledges that you cannot
disconnect the form from the
material - the material informs
the form.”

JONATHAN IVE
Apple

*This image is licensed under the Creative Commons Attribution-Share Alike 3.0 Unported license.
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved 108

ABOUT US
06
 109

6.1
About Us

Established in 2005, Cyber-Duck is a leading digital

transformation agency that works with exciting startups
and global brands such as the Bank of England, Mitsubishi
Electric and Cancer Research.

Cyber-Duck delivers transformation that is powered by

user-centred design, data, marketing and technology. We
blend an ISO-accredited design process with lean and
agile management principles, and draw expertise from
investment in creative R&D.

Our team have won some of the most sought-after

industry awards, including the Webby, Wirehive 100 and
UX UK Awards. We were ranked as one of the top five
agencies for client satisfaction by The Drum’s Independent
Agencies Census, as well as recognition in Deloitte’s
Technology Fast 500 (EMEA).

Learn more on our website: cyber-duck.co.uk

Get more UX insights

Explore UX Companion, our double award-winning
glossary of user experience theories, tools and principles.
It’s now available as an iOS and Android app, Amazon
Alexa skill or progressive web app (PWA).

Explore the website: uxcompanion.com

 110

Book Your Digital

Training Masterclass
Need digital training for your organisation?
Cyber-Duck specialise in providing tailored
workshops to up-skill your team. Our experts have
spoken as industry experts on BBC Watchdog and
at many notable conferences, including SXSWi,
UKTI, UXPA and UX London.

Clients we’ve delivered training for include:

Examples of training we can provide are:

Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

• Digital Transformation
• Customer / User Experience design
• Marketing Strategy and tactics
• Google Analytics and Tag Manager
• CUI, voice assistants and chat bots
• Technology

To enquire about our training services, please

email [email protected]
 111

6.2
About the Author

Danny Bluestone, the CEO and Founder of Cyber-Duck,

wrote this book. He is a UX professional with over 14
years of experience managing, designing and developing
enterprise-level projects for prominent organisations.
 112

6.3
Acknowledgements
Danny would like to thank the following contributors from
Cyber-Duck for helping to research and collate this paper.

Sylvain Reiter is the Client Services Officer. As an

experienced technical manager, he contributed to the
development chapter of this book.

Matt Gibson is the Chief Production Officer. He has led

workshops at UXPA and UX London. His ideas inspired the
book.

Gareth Drew is the Technical Director. As a creative web

developer who actively develops for clients, he contributed
to the test-driven development section.

Sofia Breg is a Marketing Manager. As a graduate from the

University of Cambridge, she supported Danny with the
original research and edited the 1st edition of the book.

Ramsay Albazzaz is a passionate UX Designer and

Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

contributed to the 2nd edition of the book.

Jordan Hallam is a Content Marketing Assistant. He is an

experienced copywriter: he edited the 2nd edition.

Danny would also like to thank Jenni Babayode (University

of Bath) and Grace Nolan (University of St Andrews) for
their input and research. Finally, Rajkumar Remanan created
the graphic design with assistance from Nick Garratt.
 113

“
Design drives innovation;
innovation powers brand;
brand builds loyalty; and
loyalty sustains profits. If you
want long-term profits, start
with design.”
MARTY NEUMEIER
The Designful Company
 114
Cyber-Duck Ltd | www.cyber-duck.co.uk | © All Rights Reserved

ISBN: 978-1-9160826-0-1

Let’s work together

+44 (0)20 8953 0070
[email protected]
www.cyber-duck.co.uk 9 781916 082601