Our Guide to

User Experience

Our Guides

Our guides are here to help you understand a topic or to provide support for a particular task you might already be working on. Inside you’ll find lots of information to help you plan and make better

decisions. We’re not saying we have all the answers but we believe the stuff inside this guide will help get you started. If you think we’ve missed anything, or you want to join in the debate then please get in touch.

Inside you’ll find

• What is User Experience?• User Experience process• Who else is involved?• UX techniques • Some important things to consider• How we can help

What is User Experience?In a nutshell

User Experience (UX) is the scoping, design, development and creation of online environments whether on a desktop, laptop, mobile, tablet, application or interface.

It’s about

• Putting the user at the centre of the design and build process

• Understanding the end-user, their needs, behaviours, perceptions, motivations, expectations and

desired outcomes

• Designing experiences that are intuitive, consistent, differentiated and beautiful

• Designing experiences that take into account context, environment and surroundings

• Working collaboratively with clients, analysts, developers, graphic designers, architects and users

• Realising that online does not exist in a cocoon: it’s interdependent with the real world

• Constant critique, testing and feedback. Making changes, improvements and enhancements

• Understanding best practice, appreciating the great work done before

• Understanding analytics but always asking why?

• Keeping up with the pace of change, new standards, trends, modes of behaviour

• Taking into account the necessary business requirements

UX processFrom start to finish

Is there such a thing as a UX process?

The answer to this is ‘yes and no’ or, rather, ‘somewhere in between.’

It often depends on the type of project you’re involved with and the

stage at which you’ve been asked to participate. A client might

already have a site up and running and therefore might only need your

help as an expert reviewer to make small improvements. On the other

hand they may want your help in designing a website from scratch.

Both scenarios will require a methodical process, but not necessarily the

same one and certainly not with activities happening in the same

order.

I’m hearing a lot about waterfall vs. agile, what does it all mean?

Both are process descriptions. Waterfall is a process where activities

occur one after another. The agile approach means that activities are

planned or amended based on project realities. The benefit of agile is

that it helps ensure changes in requirements are incorporated into any

design, reducing potential for later re-work.

A quick visit to Google and you’ll find some great examples of UX

processes which you can use or adapt as you see fit. One of the many UX processes to be found online

Who else is involved?Creating a UX community

Community stakeholders Role & remit

Customers or usersThose using and engaging with your website, app or interface. Might involve more than one type of person and various roles

Clients

This is you, the person sponsoring the UX work and owner of the outcomes and budget. Client may also include other stakeholders who have a vested interest in the work

UX Lead or Designer Responsible for managing and delivering output to help you achieve your online design aims

DevelopersResponsible for the building of the website. Experts in technology, infrastructure, functionality and capability

Graphic designersResponsible for the look and feel of your site, app or interface

AnalystsData owners and responsible for gathering, storing and analysing web data. Experts in demonstrating facts behind online use

Shop assistants / call centre staff

These are your employees and those who know the customer / user best. Responsible for providing a ‘real world’ view on your designs

UX Techniques

The briefRequirements, objectives, outcomes and expectations

The brief outlines what the client expects from your involvement in the project. It provides clarity around goals, objectives, expected outcomes, deliverables, milestones, budgets, timings and additional resource.

A good brief will also illustrate interdependent projects or initiatives that may have relevance for the project.

All briefs should be signed off before work starts and continually updated. Briefs should act as a business case and be used to demonstrate expected outputs and provide justification when needed.

Be aware that you may not receive a brief. You may want or need to write one in collaboration with your client.

BriefClarity up front, saves re-work later

User personasGetting under the skin of your user

Emma, 43, Lincoln, Eastern England

A persona should bring your user to life by outlining in detail their demographic, personality, characteristics, motivations, behaviours and desired outcomes.

It should also outline the relationship the user has with the business, product or service and highlight their expectations and perceptions. It’s sometimes a good idea to include some information relating to their online sophistication and fluency.

It’s important to remember that personas should be built using evidence sourced from customer data, analytics and insight. Making up a persona without using data and insight will only dilute the effectiveness of your work later on.

Don’t forget that you may need more than one persona, depending on the types of users visiting your site, app or interface.

An example of a persona we recently employed at a visitor experience conference

Getting to know your user

AnalyticsData driven root cause analysis

Web analytics are your ‘boring best friend.’ Whilst it might not excite you to trawl through endless spreadsheets and analytical tools, it will really help you design better web environments.

Working with web analysts will help uncover some hidden stories about your users are behaving online. Analytics can show how many users visited the site together with how long they stayed and any actions they completed.

The benefit of analytics is the ability to assess and identify potential problem areas and opportunities for improvement.

Whilst analytics don’t tell you why something happens, they do give you a good early warning sign that something isn’t working.

Number crunching breadcrumbs

An example of visitor flows using Google Analytics

Competitive benchmarkingIdentifying best practice and standard commonalities

Amazon UK Assess design and functionality. Test user journeys. Complete a series of tasks i.e. check wish list, order a book. Score website against a set of pre-defined measures,

attributes and principles. Identify elements of best practice. Be sure to record website commonalities.

Barnes & Noble US Assess design and functionality. Test user journeys. Complete a series of tasks i.e. check wish list, order a book. Score website against a set of pre-defined measures,

attributes and principles and compare against Amazon UK. Any cultural or best practice differences?

Waterstones UKAssess design and functionality. Test user journeys. Complete a series of tasks i.e. check wish list, order a book. Score website against a set of pre-defined measures, attributes and principles. Any differences compared to Amazon or Barnes & Noble? Any new findings?

User research Why, what, when, where and how

Why, what, when, where, who and how

User research is a large subject, which is difficult to cover in such a short document. The approach or methodology you decide to adopt will invariably depend on your objectives and the insights you’re trying to discover.

Research can take a variety of forms from straight forward qualitative and quantitative analysis.

Take card sorting as an example. The aim is to better understand how users read, understand, cluster and organise words, headings and categories. The research will help guide later web design efforts.

Words are written onto cards, and participants asked to group them. The research can either be closed (participants sort into pre-defined categories) or open (participants sort based on their own view). This simple research can provide some fascinating insights into how your future site needs to be structured and organised.

Experience and task mappingDefining journeys, activities, tasks and events

End-to-end, step-by-step, leap frog

Journey mapping and task modelling are great ways to better understand what your user is trying to achieve and the likely steps they might go through.

You don’t necessarily have to observe and map

this based on an online environment. Some of the best ways are to observe users in a real world setting. Smashing Magazine’s book ‘UX Design’ gives a great example by showing how they visited a bricks and mortar shirt store when tasked with designing an online site for their client. They observed how men chose, tried on and bought shirts. This was an easy way of designing a journey which could be used later as a starting point for web design.

Don’t forget to involve users in this work. They will often highlight a lot of tasks and activities that would otherwise have remained hidden.

Think about journeys, break them down into smaller chunks. Identify some of the events, tasks and activities that the user completes along the way. Map the journey on some brown paper or straight onto a wall

SketchingPutting pencil to paper

Thinking creatively, sketching wildly

Often the most fun you’ll have within a UX project. Sketching is a quick fire way of getting ideas onto paper so that you can discuss them as a team or with the client. Sketching isn’t just reserved for designers or those with an art degree. Encourage clients to put pen to paper

and to start drawing.

The finished sketches don’t require too much detail. They are simply a fun way of starting to imagine how a site, app or interface might look.

Remember, try and involve as many people in this process as possible. Encourage developers and graphic designers to get involved early to help avoid a significant rethink further down the line.

A morning of sketching. We quite liked the idea of having a built-in video player. Use sketching to get people thinking and debating through the use of pen and paper

Information architectureDesign instruction book

Can everyone find their way around?

Site maps are often overlooked, due to many clients wanting to see graphical mock ups and wireframes relatively quickly. However, a site map is critical if you’re to ensure the final design meets the client’s brief and delivers against both user and business requirements.

The site map is used to show how everything fits together. It illustrates hierarchy and how various components stitch together. It should be clear enough so that everyone involved understands it. Site maps can be designed graphically (as shown opposite) or by using simple tools such as word or excel.

Try to keep clutter to a minimum. This will ensure that the power and accuracy of your map is not diluted.

One of our earliest site maps. Use site maps to help everyone understand how everything fits together

WireframesDesign mock-ups

Adding depth and detail. Increasing fidelity

Wireframes are often the most recognised deliverable from a client perspective. Clients are often desperate to get to this stage as they can start to visualise the finished product in more detail.

Wireframes are a step up from sketches and help to provide more context and environmental elements into the design.

It’s a good idea to add some wording to the wireframes and some small explanations where necessary. This helps add further depth to the designs and may answer some of the questions that came up during the sketching and user research.

There’s a raft of tools available online to help, many of them with pre-existing templates to play with.

Balsamiq - One of the many mock-up and template tools available online

PrototypesExploring solutions and functionality through trial and error

Creatively designed, rigorously tested

Like sketching, this can be an enjoyable part of any UX project. Prototyping allows you to test out some of your paper based ideas in the real world.

Prototyping doesn’t have to be expensive and it

can often be done by using nothing more than scissors, prit-stick, paper and cardboard.

By building prototypes you can accelerate, critique and feedback on your work. You will immediately find out which designs are working well and those which either need to be ditched or require further work.

Don’t forget to record how your testers engage with your prototypes. Be sure to listen to their concerns.

Some of our first designs and prototypes. A day of cutting out, gluing down and moving around

TestingIn a lab, on the streets, in your living room

Watch, observe, listen and ask questions

Testing is one of those things that should be done throughout any UX project. Testing can take a variety of forms, from usability testing to prototype testing.

You may want to test a clickable prototype and

observe how the user is engaging and interacting with the product. You may want to ask the user to explain why they made certain decisions, why they jumped a step or left a page altogether.

Testing enables you to understand how the functionality, look and feel, tone, journeys and information architecture is working and what could be improved.

For those of us who enjoy the outdoors it might be an option to use a GoPro camera to test your product in a real world environment and context. If your app is to be used on the move then such guerrilla testing might be more appropriate.

The mountain bikers’ friend. Use the GoPro to help with guerrilla testing

Some important things to consider

UX always changesDon’t be a static learner

What’s new in 2014?

Be mindful of changes in technology, trends or user behaviour. What users expect now is likely to change very quickly. Users adapt quickly to changes in functionality, format, structures and designs.

Real-world imitation in the digital world, once a common feature of web design is now on the ebb.

Remember to keep abreast of subtle changes in web design. Only recently have we ourselves moved away from shadows and borders to a flatter, cleaner website.

Some design debates might seem pedantic, but they will have a significant impact on any user experience.

Two very different views on the use and execution of ‘real-world’ rules when it comes to web design

Be aware of multiple users Understanding segmentation, roles and desired outcomes

Who are you designing for?

Carefully map out the users likely to be visiting and engaging with your website, app or interface. Consider each persona and segment in detail.

Identify behaviours, expectations and journeys that are both unique and common. This will help ensure that requirements and designs take into account the differences

between each persona.

Even within broad segments consider additional differences, such as a user’s spending power or desire for a bargain.

Marks and Spencer’s UK retail website. Be conscious that you may have a number of different audiences and segments to design for. Each segment will also have their own idiosyncrasies

Consider device and platformDesktop, laptop, mobile, tablet

Design for deviceEnsure your designs will work correctly across multiple devices. Your user may be

visiting your site on a desktop or mobile. They may be using your app on a dumbphone or smartphone.

Design for platformEnsure your designs work correctly across multiple platforms. Your user might be using

Apple, Android or Windows. Remember to take into account old devices and platforms. Not everyone is an early adopter.

Taken from BBC GEL presentation at UX

Australia 2012

UX isn’t always obviousFiguring out idiosyncrasies and hidden realities

Heard of GOMS Analysis?

Speed and simplicity are often cited as the core facets of a good online experience. A recent presentation by Andrew White at UX Australia 2012 brought to everyone’s attention the theory of GOMS.

GOMS is a simple way of conducting keyboard stroke analysis to better understand how quickly and efficiently end-users can complete a task. His presentation gave the example of comparing three unique formats for users to enter their date of birth. As you can see the keystroke function was much faster than

the designs that required drop down and scroll functionality.

Take a financial institution for example. They want their users to be able to complete a series of online tasks with speed and ease. One of these tasks may be to enter password information or their date of birth. However, the majority of banks have opted for the drop down and slower design to prevent fraud and security breaches. Hackers can record keystrokes much more easily than drop down selections. It’s worth thinking about context before you set out on designing solutions.

Andrew Wight’s GOMS presentation, UX Australia, 2012

Does it work for everyone?

Analytics tells the ‘what’ not the ‘why’Identifying the root cause behind a fact

23%

6%

8%

35%

12%

23%

The Exceed All Expectations website. Measuring performance and visits. What’s working, what’s not

Probe and interpret facts

Web analytics are great. They can provide you with so much information and data. By viewing analytics you can immediately see how many people have visited a site, which parts they visited and how

long they stayed.

Analytics also helps to identify where there might be problems. For instance, by examining sales checkout data you might be able to judge that a significant amount of users are not completing their sale.

Whilst analytics indicates there might be a problem, it doesn’t necessarily give you the reason behind the problem. For that you’ll need some user research.

Think about the user, usingContextual and environmental understanding

Whether on a train or walking down a busy street, your users may not be sitting at a desktop in a quiet office. Think about where they are as much as who they are

Small buttons on a fast-moving and jolting train

Designing a web environment based on personas, business requirements and a list of devices is all great but forgetting context can prove disastrous.

Context and environment are the two most important aspects to consider when it comes to delivering a great UX product.

If your users are likely to visit your site whilst on a moving train then you need to take this environment into consideration during the design and testing phases. A site with small, fiddly buttons will put users off.

It’s also important to consider the context of such a visit. A user might be looking to research and book a holiday. However, they might not want to do all activities on a single device. A user on a busy train might want inspiration or to read reviews. They may opt for using their laptop for

booking when they have more time. Consider context and ensure that the buttons, navigation and options presented are relevant based on what the customer is trying to achieve in that given environment.

Beauty in simplicity Find the balance between beauty and ease

The UK’s motorway signage celebrated at the Design Museum in London. The final designs are now well known both in the UK and internationally. They are simple, clean, consistent and deliver against their primary objective: to help people move about the country more effectively

Design something beautifully simple

Simplicity and beauty go hand in hand when undertaking any UX project. Whilst it’s important to consider standard conventions, common best practices and delivery against business goals, this should not hold you back from designing something that really gives pleasure to the user.

Great inspiration can be taken from the UK’s famous road sign project of the late fifties and mid sixties. The final designs, created by Jock Kinneir (1917-1974) and Margaret Calvert (1936-) are both simple and beautiful. They set out to create signage that was clearer, more accessible and that would enable faster and more effective movement throughout the country.

The final designs are now a template and example of best practice, which has been copied throughout the world. Take inspiration from great design.

Start offline before you design onlineAssess the interdependencies and links with the offline world

Go in-store, buy online

Designing a retail website might prompt a UX designer to immediately visit online retailers such as eBay or Amazon. One of the greatest tricks is to visit an offline, real-world shop to see how customers browse, pick, choose and buy a product.

Customers buying books from Waterstones will behave very differently depending on whether they’re browsing online or in-store.

By shadowing and viewing customers in a real-world environment you can start to understand the rituals

and habits customers go through. These insights can then be used to design features that mirror this behaviour in an online setting.

You may even come across customers struggling with a problem in-store for which you have the perfect online design solution. Remember that most

customers operate across both the online and offline worlds. Many browse in-store but buy online.

Waterstones is a multichannel business

Seek out existing solutions Accelerate your work by tapping into existing content

Take advantage of common, pre-existing work

The great thing about the UX community is its ability to share ideas and best practice. There’s no other community quite like it.

Sometimes it’s easy to get hung up on designing a

new icon, a new typography or a navigation bar from scratch.

However, it’s important to realise the wealth of content, existing designs and open source work that is available for people to share, download, amend and re-purpose.

It’s also important to remember some of the free and low cost tools that are available for activities such as wireframe and sketching. You can save a lot of design time by tapping into work that has already answered some of your design questions.

How we can helpYou’re not alone

1UX DesignWe can help you get that website up and running in no time. We take a methodical approach where the customer is put at the centre of the design process

2UX ResearchYou might just want some research or testing support.

Maybe you want help with a card sort exercise or hosting a focus group. We’ve got all the necessary skills to hand

3UX StrategyMaybe you’re in a world with multiple websites and

portals and need some strategic guidance in how to integrate everything. We can help get that strategy onto paper