EBOOK Introduction To UX Project Design PDF

1
UX
White Paper: Introduction to User
Experience (UX) Project Design
A leading digital agency’s guide

to a proven user-centred design
(UCD) process.
2
Preface
This unique white paper has been produced to give

organisations of all sizes strong user-centric guidelines, so
they can get started on designing the digital projects of
tomorrow.
It provides a step-by-step guide on how to apply a user-

centred design (UCD) approach to any project, and achieve
a compelling user experience. The paper covers design for
websites and web applications, but the principles can be
applied to software, native apps and other products.
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).
© All Rights Reserved
http://www.cyber-duck.co.uk/
Cyber-Duck Ltd
3
“Good design is thorough down to the last

detail. Nothing must be arbitrary or left to
chance. Care and accuracy in the design
process show respect towards the user.”
DIETER RAMS
10 Principles of Good Design
4
The white paper will guide you through the user-centric

strategy needed to produce successful projects:
A brief introduction to the user experience (UX) discipline, and

the key benefits of implementing a user-centred approach to
project design
Crucial processes to consider when planning a project, such

as stakeholder interviews, persona research, feature audits
and functional specifications
The influence of user-centred design tactics, which highlight

the importance of continual user verification throughout the
production lifecycle
How to undertake development within a UX context, and

encourage constant collaboration between developers and
designers
A conclusion that draws all the guiding principles together,

revealing how to create a user-centric project that will
captivate, engage and retain users
Cyber-Duck Ltd
5
Table of Contents
1.0 Introduction
1.1 User Experience (UX).................................................................10

1.2 The Development of Strategic UX........................................ 12
1.3 User-Centred Design and Test-Driven Development....13
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
2.0 Planning
2.0 Introduction to Planning......................................................... 22

2.1 Requirements Gathering..........................................................24
2.2 Stakeholder Interviews............................................................26
2.3 Personas .......................................................................................28
2.4 Content......................................................................................... 30
2.5 Competitor Research............................................................... 32
2.6 Analytical Reviews....................................................................34
2.7 Feature Audits............................................................................36
2.8 Ethnography................................................................................38
2.9 Planning Summary................................................................... 40
6
3.0 Design
3.0 Introduction to Design........................................................... 44

3.1 How Might We (Brainstorming) Techniques................... 44
3.2 Site and App Maps....................................................................46
3.3 Flows of Control.........................................................................48
3.4 Prototyping................................................................................. 50
3.5 Usability Testing......................................................................... 52
3.6 Focus Groups..............................................................................56
3.7 Art Direction and Visual Design...........................................58
3.8 Psychological Models...............................................................59
3.9 Design Summary.......................................................................70
4.0 Development
4.0 Introduction to Development............................................... 74

4.1 Website Design in the Browser.............................................76
4.2 Technology...................................................................................78
4.3 Test Driven Development (TDD)........................................ 80
4.4 Post-Launch Analysis..............................................................84
4.5 Development Summary..........................................................87
5.0 Conclusion.................................................................................. 90
6.0 About Us.......................................................................................94

Cyber-Duck Ltd
7
1.0
INTRODUCTION
8
1.1 User Experience (UX)
Our relationship with technology is constantly changing. As

digital and physical lives continue to merge, the development
of technology that can enhance the human experience
becomes even more important. Web design is a particularly
vivid instance of 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.
Useful
Usable Desirable
Valuable
Findable Accessible
Credible
Cyber-Duck Ltd
Morville’s ‘Facets of User Experience’ neatly

summarises the qualities desired by users.
9
In this sense, UX is a holistic discipline, rather than a

standalone end-point. It should be considered as an
encompassing process, methodology and mindset, which
aims to achieve the very best user engagement across
platforms and devices. This understanding of UX avoids the
discipline slipping into a synonym for usability or ‘pretty
design’. Here, it is clear how much UX has developed since
the term was first coined by Don Norman in the 1990s, while
he was Vice President of the Advanced Technology Group at
Apple.
“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…”
10
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 a
PlayStation or 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.
So, the role of UX professionals has grown. They must

not only design screens for the mobile, website and
email experience, but help users to switch between each
touchpoint easily: ‘remembering’ their latest action and

facilitating the next move.
Further challenges are raised by devices’ extra features

or limitations, and even by their portability. 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, and
encourage them to extend their role even further.
Cyber-Duck Ltd
11
1.3 User-Centred Design and Test-Driven Development
User-centred design (UCD) is a design methodology and

research process under the overarching UX discipline. An
effective UCD framework is the best way to examine and
meet user 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, with presentations
of the interface and/or tests of early prototypes. This iterative
methodology ensures the project is challenged and checked
by real users, with teams aiming for constant improvement in
response to the 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 technical
research, system architecture and technical development of
the final product occurs with on-going technical testing and
code reviews throughout.
The best results are achieved through combining the UCD

and TDD processes to create one 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.
12
Final product Final product
Stress test UAT
Platform development Functional briefing
Technical prototype Design
System architecture UX prototype
Technical research UX research
Test driven development User centred design
This diagram demonstrates how key UCD and TDD stages

can run alongside each other, to produce an effective, user-
centred final product.
1.4 The Key Benefits of an Effective UX Process

To deliver true value to users across platforms, the user

experience has to become an objective of the organisation
as a whole. 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. Prioritising the needs of
key audiences and incorporating innovative design and
technology will create the most pleasurable experience.
Cyber-Duck Ltd
13
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.
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.
4. Make your content work on relevant devices
Sometimes projects may only need to be designed for one

medium, be it desktop or iPhone. However, the plethora of
different gadgets on the market increases the importance
of potentially extending development to a variety of
mediums: from smart watches and game consoles, to
eBook readers. A solid UX process will help identify and
optimise for these user requirements from the start.
14
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 design fits 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 the best out of your team
Production can become more empathetic to the end

user’s needs by embedding 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.
Cyber-Duck Ltd
15
1.5 The Key Elements of UX
Recognising the intricate differences of each project is an

ingrained principle at the heart 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
verified UX decisions.
To illustrate this, here’s a ‘Pick & Mix’ of UX methods chosen

for a sample of projects produced by Cyber-Duck.
Ethnography Focus group Product demo via

interviews
Feature Wireframe usability Competitor

audit testing research
Use case Algorithm Strategic content

mapping & UI design writing
HTML Expert critique by Wireframe

prototype tax experts prototype
Work-flow software Retirement planning Corporate website

web app website application development
16
1.6 The Basic UX Process
So, designers should be creative about which UX tactics

they use, bearing the unique needs of each project in mind.
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: recommending
a management hierarchy, and specifying the kind of

interdependent organisational support required.
Research
At this stage, the UX team examines and evolves the brief

into a full design project: considering user needs, content

requirements and functional feature specifications, while
setting KPIs to fulfil organisational goals. It involves
qualitative and quantitative research: probing data sets,
creating user personas and exploring how they want to
interact with the end product.
Cyber-Duck Ltd
17
Prototype
The results are used to develop a prototype that normally

acts as a full design specification: the information
architecture and interaction design deliverable. It
demonstrates the user interfaces (UI) and content templates,
and some prototypes even include copywriting, media, and
elements of the visual design.
Visual design
The final product must be aesthetically pleasing and present

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, regular presentations

to stakeholders and real users should occur
Key Ideas
to gain valuable feedback throughout each
stage. User interviews, focus groups and
usability testing can verify design decisions.
It is vital that the UX team works with the
development, branding and marketing teams
to ensure that messaging, the marketability
and technology are consistent.
Inspired by Cyber-Duck’s agile UCD process, this paper will

expand upon these stages. It will detail how a compelling UX
can be executed alongside the technological implementation
and marketing.
Cyber-Duck Ltd http://www.cyber-duck.co.uk/ © All Rights Reserved
18
2.0
PLANNING
18
19
2.0 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. The
best UX can provide insights everywhere. Teams will consider
the following:
Audience
• Designing for varied audiences requires a different

research approach. After all, users of different ages,
cultures, and even socio-economic status can interact
differently with digital products. For instance, a Nielsen
study revealed genders care about different smartphone
capabilities.
Research
• Design is subjective. There’s always 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 a different way than anticipated.
Intelligence like this can present an opportunity to further
target design.
20
Technology
• From supporting ageing devices to discontinued Internet

browsers, designing for technological restrictions may
limit the user experience. Provide the best experience
possible across contexts by providing fallbacks, or using a
feature enhancement approach.
• If a product relies on new, unfamiliar technology or design,

consider incorporating affordance: the interface design
will indicate how to interact with the product.
Relationships
• Relationships affect production: projects can encounter

resistance from stakeholders and end users. This links to
the understandable human trait of reluctance to change,
and comfort with familiarity.
• Calm stakeholder ‘resisters’ by disclosing research findings

that underpin each design decision. You could even offer
them alternative interfaces, similar to previous systems.
This chapter explores the most effective techniques available

for gathering requirements and conducting effective
research. This phase can be undertaken in a matter of weeks,
or even five to six days.
Timeframes and budgets depend on many factors. This

includes project scope and complexity, alongside aspects of
the team: from size and experience, to project management,
Cyber-Duck Ltd
resources, and potential third party involvement.

21
2.1 Requirements Gathering
Most projects begin with a written brief. It varies in detail

and length, ranging from the 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 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 archetypical
users.
• 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.
• System integration or data import/export required, if

applicable to the project.
22
But, remember these ideas should be high-level only, and

treated as a hypothesis. The details of the user experience
will adapt through further discussion with internal and
external stakeholders, and working prototype outcomes.
Ultimately, the team producing the project will counter and
explore the document further, with their interpretation or
proposal. Any changes to the original requirements should
be carefully checked, so they match (or improve upon) the
original brief.
Further tips:
• Scope of work – after the requirements are given to the

production team or company, the counter proposal should
ideally display and quantify an estimate of the time
needed to research and implement the scope.
• Return on investment (ROI) – a solid UX process will

maximise the stakeholders’ budget. Within the schedule
outlined, it will help to deliver ROI measured against the
KPIs selected.
• SMART objectives – some project owners engage with UX

professionals to ‘firm out’ the UX requirements document

(i.e. define project needs) from the outset. Because of this,
a consultation period has become a normal stage before
full production commences.
Cyber-Duck Ltd
23
2.2 Stakeholder Interviews
Once the requirements are agreed, interviewing key project

stakeholders is often the first port of call. This helps to
articulate the overall vision for the project. Depending on
the project’s size, it’s best to interview key stakeholders
from across the board of the organisation. The questions will
differ from project to project, and these must be prepared
individually before the interview.
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 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 can be 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.
24
Further tips:
• Two heads are often better than one – multiple UX

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 or override the interviewee, or thoughts
and opinions may be influenced.
• 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.
Cyber-Duck Ltd
25
2.3 Personas
After the stakeholder interviews, create archetypal personas

to conceive and verify the content of a project. They can
stimulate design thinking, helping UX professionals to create
and explore use-cases, flows of control and user journeys.
Personas must be chosen carefully. Typically, persona

creation should be limited to no more than three or four:
avoid creating more than the amount of audience types.
This is because designers should aim to define high-level,
archetypal users only. After all, most users will share common
motivations and concerns, so perform similar tasks across
systems or websites.
UX designers must cover the persona motivations and

objectives for using the product or service, and any concerns
they may have. Explore this by creating individual ‘persona
sheets’, with a name, photo and three to four other attributes
that would influence their mindset: such as technological
capabilities, socio- economic and cultural background1.
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 these by
talking to real users, who match the persona attributes. This
can be done quickly and cheaply either by phone or short
face-to-face interviews.
1
User behaviour can vary across different nationalities and cultures. International projects
should verify designs with all nationalities during the project lifecycle.
26
Devoting enough time and resources to persona creation is

valuable 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.
Further tips:
• Approving personas – review and sign off the 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.
Cyber-Duck Ltd
27
2.4 Content
The maxim often goes that content is king. It’s absolutely

central to shaping designs, interactions within them and the
user experience as a whole. It can be extremely valuable to
conduct a content audit at the start of a project, mapping
the content you have (or need). Organise this by type or
purpose, and explore the structure. Naturally, this can fall into
the realms of information architecture.
Move on to define the crucial plan for the content strategy.

This will ensure every piece of writing is carefully considered.
It’s beneficial to involve a dedicated copywriter in the
process, with expertise in the subject matter.
Ideally, create the content plan (and even the content itself)
as one of the earliest production tasks. This avoids the
complications of retrofitting content into the project at a
later stage. It ensures the content plan will fit the proposed
sitemap and shape the information design. This includes
the semantics, structure, visual aspects and mark-up of
templates. From this, the team will help shape the style,
length and frequency of content types: headers, sub headers,
quotes, caption areas, tabular data and supporting graphics.
When a vast amount of content is required, it’s best to use a

content matrix to track content creation in progress. Gather
Content and Typecast are useful tools that can be used 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.
28
Further tips:
• User personas – use this research to write the content in a

language and tone of voice that key audiences can relate
to and understand.
• Use call outs – visually highlight and illustrate key points

with designed ‘call-outs’.
• Avoid Latin! – try not to 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.
Cyber-Duck Ltd
29
2.5 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.
30
Further tips:
• Financial performance – the financial worth of a 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.
Cyber-Duck Ltd
31
2.6 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 can
require specialist 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, which access the website or system
at different points in time; when design or content changes
have been made, for instance.
Of course, there are many other factors that need to be

considered when undertaking analytical reviews. This
includes analysing top performing pages, current rankings,
social media sentiment, survey or net promoter scores (NPS)
and big data.
But, be careful to balance data with qualitative user research.

Set clear objectives and a deadline for this stage, to avoid
‘analysis paralysis’: or over-analysing data, with no definitive
conclusion for project production.
32
Further tips:
• Search input – with website projects, incorporating SEO

and PPC insights into performance reviews will ensure
multiple sources of data are scrutinised.
• Click paths – various software tools (like ClickTale) can

provide useful insights, tracking 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, further useful data can be

considered from other channels. Ideas include mobile app
downloads and usage, social media sentiment and email
marketing campaigns.
Cyber-Duck Ltd
33
2.7 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.
So, feature audits helps negotiate the fine balancing act

between designing new features and keeping older ones.
Combining qualitative input and machine 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’.
34
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.
Further tips:
• Technical audits – developers can often generate an

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
35
2.8 Ethnography
Ethnography can be used at any stage of the UX process.

But, it’s best to begin this as early as possible. On-going
ethnography is a particularly welcome step, ensuring that the
project remains designed with users in mind. This technique
involves observing the daily routine of the archetypical user
within their natural habitat. It removes the clinical aspect of
the research and testing environment.
So, users can interact in a less pressured, and thus 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 so in the natural context of their 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.
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.
36
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.
Further tips:
• Be invisible – ethnography undertaken on site should be

as non-invasive as possible, given the aim to observe the
user throughout their daily routine.
• Reward users – recruitment can be a challenge. So, reward

users with small incentives (such as discounts or payment)
and explain the value of their contribution towards
improving the product.
• 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.
Cyber-Duck Ltd
37
2.9 Planning Summary
Embarking on a planning phase (or research sprint) upfront

is important for the production of all digital projects: from
websites and apps, to software and product development.
Increasingly, organisations are using agile project

management models to develop user-centred digital
products rapidly. This model encourages 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 ‘user stories’: a way of writing about features
that shifts the focus to the user, by writing a requirement
from their perspective.
But, getting the stages and sequence of tasks right will

determine how user-friendly, scalable and future-proof the
final product will become. The research phase must not be
missed. Besides user stories, agile methodologies don’t tend
to document or mandate how teams can gather and research
user requirements.
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, and 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.
38
“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
39
3.0
DESIGN
40
3.0 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,
true UX design fuses 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.
3.1 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 design only what is best
for the organisation.
Cyber-Duck Ltd
41
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 views.

Encourage constructive, amicable and professional debate
that can be beneficial for the project, rather than judgment or
criticism. A UX professional would take notes of all the ideas
presented. The data gained from HMW sessions can be used
to direct the sitemap and flows of control.
Further tips:
• Provide context – UX professionals should explain 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, with some distance from the workplace.
42
3.2 Site and 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, from a website and software to 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 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.
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.
• 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.
Cyber-Duck Ltd
43
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 or 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 items2.
Further tips:
• Prepare for the card sorting meeting – whether 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).
2
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.
44
• 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 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.
3.3 Flows of Control

Flows of control (FOC) are also referred to as ‘activity

diagrams’, ‘user journeys’ or ‘use cases’. They are diagrams
that highlight the different journeys (or options) a user
can take through a web system or product, based on the
project’s agreed business logic. FOCs help all stakeholders to
understand the order of events, and what happens at each
interaction.
FOCs should be created after the stakeholder interviews are

complete and personas established. While there is overlap
between the interfaces defined on the sitemap and the FOC,
the stages can inform each other if iterated together.
Cyber-Duck Ltd
45
FOCs must be easy to follow. Use standardised visual

elements and conventions from traditional flow diagrams,
like diamonds for decision trees and squares for interface
screens. Adding diagram colours 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.
Further tips:
• Add notes – enhance the FOC diagram with annotations

(even pen scribbles and drawings can help) and footnotes
to clearly articulate the complete user experience.
• Logic – Designers should work closely with developers to

verify the user experience is logical from their perspective.
After all, developers will be adapting the business logic
from the FOC into their own database design and/or UML,
the modeling language used to visualise the design of a
system.
• 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.
46
3.4 Prototyping
Prototyping is an essential stage in the design process. It

involves creating interactive and functional interfaces that
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.
Begin with low fidelity prototypes, as these are very fast to

create. 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.
Axure RP and OmniGraffle should be used to build more

detailed prototypes. They can further reflect the interactivity
of the end product.
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, including Twitter Bootstrap, Foundation, Mixture or
Hoisin, Cyber-Duck’s very own SASS framework.
Cyber-Duck Ltd
47
Further tips:
• Black and white – initially, use low fidelity tools (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.
• Generate functional specifications – tools like Axure

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.
48
3.5 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
on-going user input and usability testing in the very early
prototyping stage, as well as including end-user acceptance
testing (UAT).
There are a myriad of usability testing techniques, each with

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. The
findings should be collated into a concise report and / or 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.

Cyber-Duck Ltd
49
There are two different technologies that help record user

input more precisely, enabling the moderator to review the
‘test’ again in retrospect:
• Using a tool like Morae, which captures mouse

movements, video and audio feeds of the user performing
the task, while moderators view the activity in another
room or even in a remote location.
• Eye tracking is used in a similar way to Morae, but with the

additional benefit of recording where people’s eyes fixate
in relation to mouse or finger movement.
The nature of both of these testing methods means it is

best to undertake them in a quiet environment. There are
two primary environments where usability testing usually
happens:
1. 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
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 freely talk about
their experience in retrospect.
50
2. Informal testing is more spontaneous, and therefore

compatible with corridor testing, and 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
increases3.
Cyber-Duck Ltd
3
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.
51
Further tips:
• Recruiting – testing with the ‘wrong’ users is a common

reason for obtaining unreliable feedback. Generally, real
samples or segments of customers should be recruited
using a customer database, CRM, or recruiters.
• 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-Allowed Techniques – here, users are asked to

verbalise their thought processes while undertaking tasks
in tests. But, unlike RTA techniques, ‘Think-Aloud’ can
influence a user’s cognitive behaviour and thereby skew
test results. However, it is important to capture any verbal
comments that a user might make during testing, as they
could provide useful insights.
• Remote Testing - this is a newer method, where tools like

UserTesting could prove useful if face-to-face tests cannot
be performed. 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’, used
to the environment.
52
3.6 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 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 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

explored further with stakeholders before implementation.
Cyber-Duck Ltd
53
Further tips:
• Plan the session – define relevant questions in advance,

alongside some creative, untested designs or ideas. Limit
the number of questions asked to a figure between five
and ten. This will obtain a sufficient amount of data while
allowing time for spontaneity, as the discussion may 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.
54
3.7 Art Direction and 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:
“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.”
Further tips:
• Branding – if designers are following brand guidelines,

they need to be extendible for the project in question.
Separate creative investment is needed for projects
without these guidelines; a consistent direction and tone
of voice should be established early.
Cyber-Duck Ltd
55
• 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.
• Photography – unless absolutely necessary, clichéd and

generic stock photography should be avoided. Images
must be authentic and believable – why should the user
believe in the brand if there is no investment in realistic
visuals?
• Colours – define a palette of colours that compliment each

other. Different colours will imply different meanings to
users, based 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 – similar to 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.
3.8 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 the established psychological models, or ‘laws’,
which have been detailed below.
56
Hick’s Law
“ The more choices

you have to choose
from, the longer
it takes for you to

make a decision ”
Cyber-Duck Ltd
57
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 set up a display of 6 jams in one location and 24 in
another, in front of audiences with similar tastes.
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.
58
Fitts’s Law
“ The time required

to rapidly move
to a target area is
a function of the
distance to and the

size of the target ”
Cyber-Duck Ltd
59
The main hypothesis of Fitts’s Law advises that user

interaction improves when interactive objects are increased
in size and proximity to each other. Smaller object sizes and
slower movements will generally reduce the quality of the
interaction.
Designers normally combine Fitts’s Law with other 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.
60
Tufte’s Theory
“ Data graphics should

draw the viewers’
attention to the
sense and substance
of the data, not to

something else ”
Cyber-Duck Ltd
61
DATA
85%
15%
Tufte’s theory reveals that designers should place more

emphasis on the content and data, giving it the right
treatment to draw user attention and help them process it
easily. Readability can be enhanced through visualising the
data as graphs, with plenty of captions and ‘call-outs’, or
using visual cues (like icons). In contrast, titles and secondary
information (like data labels) should be subtler.
62
Fogg’s Behaviour Model
“A behaviour will
not happen without
motivation, ability
and a trigger ”
Cyber-Duck Ltd
63
High
motivation
triggers
succeed here
Motivation
A
ct
io
n
lin
e
triggers
Low fail here
motivation
Hard Ability Easy

to do to do
Fogg’s Behaviour Model reveals how motivation, ability and

a successful trigger must combine (in a single moment) for
a user to perform a single 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.
64
Aristole’s Theory
“ Ethos, Pathos, Logos ”

65
Ethos Pathos Logos
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.
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.
66
3.9 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:
drawing the insights gained from the planning and research
stages into practice 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 ensure validated user input drives
each iteration and design evolution throughout the project.
Of course, the importance of a great art direction and

visual design continues, with the most effective products

encouraging user interaction through carefully selected,
prominent triggers, which have been carefully tested. James
Jesse Garrett provides the best summary of this approach.
Cyber-Duck Ltd
67
“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.”
JAMES JESSE GARRETT
The Nine Pillars of Successful Web Teams
68
4.0
DEVELOPMENT
68
69
4.0 Introduction to Development
It’s crucial to locate 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 over 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: becoming the UX professional’s ‘best work
friend’, 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 design planned

and functionalities expected before they can begin technical
research and risk analysis. From this, they will define
development objectives and support 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. Production will only need occasional UX
clarification, rather than encountering a brief for the first time
in late production stages.
This chapter will describe the essential development tactics

from a UX perspective. Overall, technical SEO, in-built quality
testing and backwards compatibility (for older web browsers,
operating systems and devices) must be factored into design
from the outset.
70
Account Manager
UX Professional
Visual Designer
Marketing Expert
User-Centred Design
Client and Experience Visual

user research prototypes design
Start System Functional Testing Launch

architecture specification and QA Support
Technical Technical Platform

research prototypes development
Test-Driven Development
Technical Lead
Front-End Developer
Software Developer
The graphic above demonstrates how key design and

development stages work in parallel at Cyber-Duck.
Cyber-Duck Ltd
71
4.1 Website Design in the Browser
For some projects, it is more effective to move design tasks

traditionally completed in the graphical image editor (like
Photoshop) straight through to HTML/CSS code.
Shifting to the browser will help UX designers get a better

understanding of how the project will work in its real
‘material’ form. It encourages them to ‘pixel pushing’: the
focus moves to graphics and artwork, as opposed to form,
material and function. Steve Jobs even echoed this sentiment
in the following idea:
“Design is not just what it looks like and feels like;

design is how it works.”
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, from headers and sub headers, to other tags.
• Responsive web design (RWD) – this mindset aims to create

websites and web applications that can be used on all
devices. This is achieved through 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 explore
how to implement each breakpoint.
72
• 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 through
editing a few lines of code, instead of painstakingly
updating a Photoshop composition.
• Rapid prototypes – prototypes can be delivered far more

rapidly, and many tools (like Axure RP) support responsive
design.
• 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 later 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. Some use tools
like Typecast to experiment with typography and layout.

Others may create the art direction in Photoshop or Sketch,
and then design and iterate all other interfaces directly in the
browser.
Cyber-Duck Ltd
73
4.2 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.
But, remember to evaluate whether their overhead (created

by reducing flexibility or performance) is worth the potential
fast, streamlined development offered.
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.
At Cyber-Duck, we produce and share Hoisin: our own
lightweight, flexible front-end framework.
74
2. Back-end frameworks
These provide the ‘low level’ libraries (or modules) of

the digital product. The modules could include a login /
registration authentication component, search algorithm,
error messaging, template engine, pagination, quick form
builder, unit testing control, database queries (via ORM),
and more.
Using these frameworks for the basic functions allows

developers to focus on the project’s creative and unique
elements, and saves time compared to starting from
scratch. Laravel is a particularly popular example.
3. Content Management Systems
CMS are used to manage and update the content

of a website. Open-source projects like Wordpress,

SilverStripe, Perch or Umbraco save time by providing
much of the login, blog, comment and edit functionality
out-of-the-box. Developers extend this default behaviour
to match specific project requirements; they can access
and use the source code as a ‘base’, creating and
implementing custom plugins.
Depending on budget and technology preferences, paid

(or enterprise) platforms are also available. Examples of
these include Sitefinity and Sitecore.
Overall, this complex decision is best made in consultation

with technical experts, who can discuss success stories with
Cyber-Duck Ltd
particular technological frameworks.

75
4.3 Test Driven Development (TDD)
The testing strategy should be planned carefully. Functional

and regression tests must be embedded in the development
process, implemented 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 new
feature release.
First, the QA team should review the early deliverables,

mainly user journeys, sitemaps and prototypes. These will
help plan and document the overall the testing strategy
for the project: including preparing test scripts, reviewing
different modules of the website / application, and detailing
functional tests required. 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 through 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.
76
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 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. To name just a few, this includes stress,
security, ‘look & feel’ and non-functional testing. They
focus on discovering code and UX defects by analysing
several product features related to what was just

developed.
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.
Cyber-Duck Ltd
77
3. Load Testing
Load (or stress) testing aims to understand and evaluate

the product’s behaviour before launch, under specific,
expected traffic / bandwidth loads.
Completed via tools like Blitz, this test identifies maximum

operating capacities and highlights system bottlenecks.
It ensures the right server infrastructure has been
implemented before launch.
All testing should be completed 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, where traffic is split amongst several
servers.
As the original ‘UX owners’, designers must sign-off the

end product before sending to the client. After final project
launch, abridged versions of regression tests are executed
by QA Analysts. They ensure all is functioning as expected,
in the form of checklists. 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 on-going development, where improvements
or new features are released periodically. The Lean Startup
movement emphasises the importance of continuous
deployment and releasing ‘bundles’ of features together.
78
During projects with on-going development, resources can

be planned for testing on the stage server or in a testing
environment before going live at pre-determined, fixed
intervals of time. A mixed approach to testing should be
utilised, which combines automated and manual (human)
testing methods.
Ultimately, if organisations overlook testing processes and

launch projects with bugs and device/browser issues, the
usability can be harmed, leaving the user with a negative
experience.
Further tips:
• Future friendly technology – investment in responsive web

design and scalable technology can reduce the amount of
device-specific testing required. Instead, testing focuses
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 lets users know they’re exploring an
early release, while identifying issues in a live environment.
Users can provide early feedback about their experience,

so the production team can gradually iterate and improve
features.
• 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
Cyber-Duck Ltd
to find basic bugs.

79
4.4 Post-Launch Analysis
Monitoring and tracking results is the final important

ingredient for designing a successful user experience. Of
course, investment into digital projects aims to drive return
on investment (ROI) for the business in question. Extracting
quantitative data from real post-launch usage can track
whether this has been achieved. It measures and monitors
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. Analytics tools (like Google Analytics) should be
implemented to monitor visitor behaviour and conversion
on a live website. Using information from the stakeholder
interview and user research stage, the UX team would have
defined KPIs and objectives to indicate where visitors are
expected to ‘convert’ on the website. The marketing team
configures goals via Analytics and explores user journey
funnels accordingly. Similar tools can even 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).
The data can provide UX insights that inspire future

improvement. As a smaller number of users were involved in
testing stages, these insights were previously unattainable.
Via Analytics, areas of improvement can be identified through
regularly reviewing the traffic and bounce rate of key screens;
conversion rate of landing pages; or funnel conversion of the
checkout process.
80
Further sources of data could be applicable for particular

projects. Increase the value of post-launch analysis through
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 previous, successful
marketing campaigns with high conversions.
• Email newsletter platforms – tools like Campaign Monitor

and Mailchimp provide detailed reports that detail how
users interact with email newsletters. This reveals which
recipients interacted with the campaign, links clicked and
geotagged data.
• 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. Simply Measured 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 gain real-time insight into user engagement and
emotion. Salesforce’s Marketing Cloud is a market leader
here, relying on the Radian6 technology.
Cyber-Duck Ltd
81
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
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.
Further tips:
• Social media for test recruitment – when beta 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: from simply responding
to a query, to specific website improvements based on
user frustration.
4
To find out more about the complex distinction between structured and unstructured data,
Forbes Magazine covers ‘The Other Side of Analytics’.
82
4.5 Development Summary
The development stage often produces the most tangible

part of a digital project. Unfortunately, UX concerns can
be 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’, 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.
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.
Cyber-Duck Ltd
83
5.0
CONCLUSION
84
5.0 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 white paper 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 could 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.
• 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, through drawing on usability
Cyber-Duck Ltd
testing and user feedback.

85
• 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 drawing together an experienced,

cross-disciplinary team, who recognise that design is all
encompassing. Jonathan Ive, Senior Vice President of Design
at Apple, explains “the best design explicitly acknowledges
that you cannot disconnect form from the material… the
material informs the form”. At Cyber-Duck, we live and
breathe this motto.
86
“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
Cyber-Duck Ltd
87
6.0
ABOUT US
88
6.0 About Us
Danny Bluestone, the CEO and founder of Cyber-Duck,

wrote this whitepaper. He is a UX professional with over 13
years of experience managing, designing and developing
enterprise-level projects for prominent organisations.
Previous experience as a digital producer ignited his interest
in combining usability, design and technology to create
effective projects that place the needs of the user at the core.
He would like to thank the following contributors from

Cyber-Duck, for helping to research and collate this paper.
Sylvain Reiter is the Chief Technical Officer. As an

experienced technical manager, he contributed to the
development chapter of this paper.
Matt Gibson is the Chief Creative Officer. His ideas inspired

this paper, through collaborating with Danny to lead
workshops at events like UXPA and UX London.
Gareth Drew is the Development Director. As a creative web

developer who actively develops for clients, he contributed
to the test-driven development section.
Sofia Breg is the Marketing Lead. As a graduate from the

University of Cambridge, she supported Danny with the
original research and edited the full paper.
He would also like to thank Jenni Babayode (University of

Bath) and Grace Nolan (University of St Andrews) for their
Cyber-Duck Ltd
input and research. Finally, Rajkumar Remanan and Michael

Lieu created the graphic design.
89
Established in 2005, Cyber-Duck is a leading digital agency

that works with exciting startups and global brands such as
Cancer Research Technology, The European Commission and
Arsenal FC. As a full service digital agency, Cyber-Duck offers
creative, technical and marketing services all under one roof.
The company blends an ISO-accredited user-centred design
process with lean and agile management principles, drawing
on investment in creative R&D.
The Cyber-Duck team have spoken as industry experts on

BBC Watchdog and at many notable conferences, including
SXSWi, UKTI and UX London. The company has won some of
the most sought after industry awards, including the Webby,
Wirehive 100 and UX UK Awards, as well as being included
in The Drum’s list of top agencies and Deloitte’s Technology
Fast 500 (EMEA).
90
90

EBOOK Introduction To UX Project Design PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

EBOOK Introduction To UX Project Design PDF

Uploaded by

Copyright:

Available Formats

1

A leading digital agency’s guide

This unique white paper has been produced to give

It provides a step-by-step guide on how to apply a user-

The framework and thought process are based on the refined,

“Good design is thorough down to the last

The white paper will guide you through the user-centric

A brief introduction to the user experience (UX) discipline, and

Crucial processes to consider when planning a project, such

The influence of user-centred design tactics, which highlight

How to undertake development within a UX context, and

A conclusion that draws all the guiding principles together,

1.1 User Experience (UX).................................................................10

2.0 Introduction to Planning......................................................... 22

3.0 Introduction to Design........................................................... 44

4.0 Introduction to Development............................................... 74

6.0 About Us.......................................................................................94

1.1 User Experience (UX)

Our relationship with technology is constantly changing. As

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

Morville’s ‘Facets of User Experience’ neatly

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

“I invented the term ‘user experience’ because

Since then, the term has spread widely, so much so

1.2 The Development of Strategic UX

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

Rapid technological progression means digital interfaces are

So, the role of UX professionals has grown. They must

touchpoint easily: ‘remembering’ their latest action and

Further challenges are raised by devices’ extra features

low-powered devices that can connect to the Internet and

1.3 User-Centred Design and Test-Driven Development

User-centred design (UCD) is a design methodology and

UCD creates an end product that is efficient, pleasurable

Technological implementation is the other side of the UX

The best results are achieved through combining the UCD

Final product Final product

Stress test UAT

Platform development Functional briefing

Technical prototype Design

System architecture UX prototype

Technical research UX research

Test driven development User centred design

This diagram demonstrates how key UCD and TDD stages

1.4 The Key Benefits of an Effective UX Process

To deliver true value to users across platforms, the user

1. Make the product pleasurable to use

An effective process will ensure the original vision for the

Project briefs often misinterpret both the organisation’s

3. Mitigate risk early and reduce waste

Involving users and stakeholders throughout the design

4. Make your content work on relevant devices

Sometimes projects may only need to be designed for one

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

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

6. Eliminate ego design

A UX team can distil and steer projects towards key issues

gradually becomes more user-centric.

7. Bring the best out of your team

Production can become more empathetic to the end

professionals. The collaborative nature of UX combines

1.5 The Key Elements of UX

Recognising the intricate differences of each project is an