The User Experience process as part of User Centred Design

This article gives a quick overview of how the practice of user experience design is used to specify and design a website. It aims to address two key questions:

• What is the rationale for employing a User Centred Design approach to conceiving, designing and building websites?
• How do we get from raw inputs such as market research, demographics and business requirements to a fully fledged design?

What is User Experience?
User Experience involves building a model of users’ attitudes and behaviours to help us consider solutions that best fits their needs and expectations. The core aspects of it are a blend of design insight, usability and accessibility, psychology, technical knowledge and storytelling. We can better support users’ experiences by focusing on what they are trying to achieve and making it easier for them.

Benefits of a user centred approach to design
Successful business models such as Netflix and Flickr have been predicated on the notion of a user centred design process. They will tend to be focussed on enabling their users to be able to feedback frequently about what works and what doesn’t work for them. They will also work on incremental improvements to their websites, rather than large scale revamps.

This means they are able to respond quickly and effectively to their users’ needs, and build up a high degree of affinity for their brands.

Typical project phases
Large scale web design projects often run in three phases:

• Discovery (stakeholder interviews, user research, requirements gathering)
• Definition (persona creation, experience concepting)
• Design (design and build – site map, wireframing, functional specification etc.)

Discovery
This is the starting point for the User Experience team to understand the scope of the project. During this phase they seek buy in from key stakeholders. At the same time, business consultants and planners assess the scope of the project, sometimes producing a scope map and a road map which is used to determine what the project is intended to achieve.

Definition
The Definition phase is when user research outputs are absorbed and processed by the User Experience team. Personas are often created at this stage, enabling a distillation of user research learnings into a form more suited to Experience work. Visual design work typically takes place at the same time. Requirements captured during the Discovery phase are prioritised.

Design
Typical outputs from the design process are a site map, annotated wireframes, and a page and module catalogue. This is the most easily recognised and understood point of a project. Recommendations made during the Definition Phase are put into practice: wireframes and key screens are mocked up, user testing of different treatments may take place. Annotations may be added to the wireframes, in conjunction with page architecture, page descriptions the site map and process flows. Together these form a functional specification – a working document outlining the design and build requirements for the website.

Inputs (requirements gathering)

Market and user research
The User Experience team will absorb as much information about the business, its goals, any available user research, whether primary or secondary. In addition, any competitor reviews or analysis, brand reviews, and in the case of a pitch, the RFP (Request for Proposal). This material may come from a variety of sources; chief amongst these are user research and material supplied by the client.

• Primary research – bespoke research commissioned and conducted for the benefit of the project
• Secondary research – research which while valuable, is not tailored for the exact demands of the project

Mental models / card sorting
Great benefits can be gained from understanding how target users of a website think. We can build a mental model of how a user understands and thinks about the world. This can be very helpful when considering how to organise and group information (information architecture), what type of functionality should be used (interaction design) and the most appropriate language and signposting for content areas and features.

One way to achieve this is with a card sort. There are two types of card sort: open and closed. In an open card sort, users are asked to group website items with no predefined groups established. In a closed card sort, users are asked to place website items into predefined groups.

Processes (methodology)

Personas
These are fictionalised, composite characterisations typically derived as a result of primary user research. The qualitative aspects of research shine through here. One way to develop personas is to create behavioural axes – a series of sliding scales that range across a behaviour, attitude or activity exhibited by the sample set of users.
An example axis might have ‘money’ at one end and ‘love’ at the other. The axis might be called ‘life values’. Each user is mapped to the axis, and where clusters emerge, commonalities in behaviour can be perceived. These become the formative factors in a persona – the motivations and goals a user may exhibit.

To be useful, there is usually a limited number of personas, each focused around distinct goals and motivations. One of these is usually settled upon as being the primary persona, that is the one persona for whom if you were to design, you would fulfil the needs of all the other personas. For example a job site would attract jobseekers and vacancy posters.

User journeys
Once personas are established, user journeys can be created which focus on enabling the personas to complete tasks. Hence a successful user journey for the jobseeker would probably involve searching, refining selecting and applying for a vacancy.

Outputs (deliverables)

Taxonomy
Typical processes include the development of a taxonomy. The site taxonomy is generally developed in conjunction with the card sort, though input from stakeholders is typical in this process.

Page architecture
To facilitate the creation of layouts for individual web pages, it is useful to create a consistent rationale for where items will be located within each page. This is achieved through zoning, dividing the page into areas where the user can expect to consistently find certain types of content, navigation, features and functionality.

Scamps
These are rough layouts made to get an initial sense of how the pages might look.

Wireframes
These are more detailed layouts, ideally featuring real website content to facilitate the design process, as well as stakeholder feedback and any user testing.

Pages and modules (page module catalogue)
Typically websites consist of a series of linked pages. These pages have many areas of commonality between them. The areas that are the same or similar across pages can be understood as modules. For example, websites usually have a footer with the same set of links regardless of the page they appear on.

Prototypes and user testing
As the specifications for a site are developed, prototypes of certain user journeys are sometimes created for the purpose of user testing. These can be low fidelity, paper prototypes, which consist of scamps with some moveable and replaceable elements. These are great tools for rapid prototyping solutions to problems.

It is possible to produce higher fidelity prototypes which can present the actual experience of using a website in a much more compelling way with tools such as Visio, Axure, Fireworks, Dreamweaver and Flash.

To test the value of a proposed design solution, sample users from the target audience are recruited to try to complete tasks with the prototypes.

This article is by Stephen Hellens, User Experience Architect at LBi, a leading London based digital agency.