28
Christopher M c Queen My user experience (UX) process

Christopher McQueen - My UX Process 2014

Embed Size (px)

DESCRIPTION

A detailed outline of my typical UX process that I've applied as a user experience (UX) designer and researcher over the last 10 years. My full UX lifecycle involvement includes: - Planning scopes of work within ‘Agile’ and ‘Waterfall’ development contexts. - Insight gathering through contextual inquiry methods, ethnographic research and observational studies. - User research through remote user testing, card sorting, concept testing and in-person product usability evaluations. - Facilitating workshops to analyse and synthesise research into meaningful product requirements, user journeys and personas. - Designing and iterating interaction designs and prototypes. - Supporting development teams throughout implementation, facilitating feature prioritization and creation of user scenarios. - Measuring success, tracking feedback and conversion rate optimization.

Citation preview

Page 1: Christopher McQueen - My UX Process 2014

Christopher McQueenMy user experience (UX) process

Page 2: Christopher McQueen - My UX Process 2014

[email protected]

I’m a user experience (UX) design and research leader. I’m passionate about creating engaging and meaningful experiences for real people.

My 10 years of experience spans agency and client-side teams across multiple domains including finance, entertainment, exhibitions, gaming, pharmaceuticals e-commerce and anymore besides.

Up until September 2014, I was a Vice President within Deutsche Bank‘s Global Transaction Bank. Here, I led a small team of UX designers and researchers.

I’ve worked with some incredibly talented teams in the last few years, working across mobile, tablet, desktop and kiosks. Some examples include supporting PayPal‘s credit UX team, providing multi-channel UX design within Reed Exhibitions and usability consultancy for Betfair.

About Me

2

My full UX lifecycle involvement includes:

Planning scopes of work within ‘Agile’ and ‘Waterfall’ development contexts.Insight gathering through contextual inquiry methods, ethnographic research and observational studies.User research through remote user testing, card sorting, concept testing and in-person product usability evaluations.Facilitating workshops to analyse and synthesise research into meaningful product requirements, user journeys and personas.Designing and iterating interaction designs and prototypes.Supporting development teams throughout implementation, facilitating feature prioritization and creation of user scenarios.Measuring success, tracking feedback and conversion rate optimization.

www.christophermcqueen.com

[email protected]

@chrismcqueen

+44 (0)7753 841690

Website:

Email:

Twitter:

Phone:

Page 3: Christopher McQueen - My UX Process 2014

[email protected]

Strategy

UX evangelismPlanning (Waterfall / Agile)PrioritisationContent strategyStakeholder interviewsUX training

Discovery

Competitor analysisContent audit AnalyticsSurveysContextual inquiryCard sortingHeuristic (expert) review

Synthesis

PersonasIdeation and sketchingTask / experience mapsUser journeysSitemapsWireframesStoryboardsPrototyping

Optimisation

Usability testing (lab based)Usability testing (remote)A/B testing

My process in brief

3

This document contains a small sample of the typical tasks and outputs I’m able to provide throughout a UX research and design project.Whilst not exhaustive, the process I follow go a little something like this…

Phase

Tasks

Tools Whiteboard(s)Post-its (lots of)MarkersMS PowerPoint / Keynote

MS PowerPoint / KeynoteGoogle Sheets / Survey MonkeyOptimal Sort

Markers, paper, more post-its!Balsamiq / OmniGraffleAdobe CSSketch / Invision AppAxure RPHTML & CSS

Camtasia / SilverbackUserTesting.comWebex / GoToMeeting

Page 4: Christopher McQueen - My UX Process 2014

StrategyUX evangelism Planning and prioritisation Content strategy UX training

4

4

Page 5: Christopher McQueen - My UX Process 2014

[email protected]

Over recent years, evangelising UX to product teams and stakeholders has become an increasingly important and more frequent part of my daily work.

Without exception, the teams I meet strive for a “great user experience”. However, it’s common amongst teams and business units for the definition and goals of UX to be muddled. Also, expectations around a UX project’s execution using a robust research and design methods are often mixed.

By simply explaining core research and design principles and providing a clear understanding of where these fit into a SDLC helps set the scene. The sooner in an engagement that this can be achieved, the better and more focused the end result.

EXAMPLE: The examples on this page are taken from several different slide decks that I utilised whilst at Deutsche Bank.

I provided regular overviews and updates to teams as to how UX fits into Agile and Lean approaches and the product development lifecycle.

UX evangelism

GTB Client Access Deutsche Bank GTB Deutsche Bank

What is client centric design? We often simply refer to this as User Experience or UX

2010 DB Blue template

Users

Business

Technology

UX

Good “User Experiences”… • Focus on user needs and goals • Meet our business requirements • Perform within technical constraints By means of... • Client interviews and observations • Concept testing for direct feedback • Constant iteration and validation

In order to... • Produce consistent, unified products • Make our “apps” easy to use and intuitive • Provide market-leading, best in class client experiences

5

Page 6: Christopher McQueen - My UX Process 2014

[email protected]

Early in the life of any UX project, planning is extremely important. It continues to be important throughout the development phase, particularly if working in an Agile manner.

For a UX team, a solid plan helps the team allocate resources and focus on the most important features or deliverables for a given project.

During the planning phase, it’s valuable to have a firm grasp on the relative prioritisation of the features to be specified and developed.

Prioritisation can take many forms, but often workshops involving sizing activities, story point allocation and Kano modelling exercises.

EXAMPLE: The example provided on this page was undertaken during my time with Deutsche Bank. It shows the outputs, in the form of an “initial” sprint planning board, from a collaborative planning session for a Trade Finance application.

As UX Lead on the project, I was responsible ensuring the design was feasible for development whilst meeting business and user expectations.

Planning and prioritisation

6

Page 7: Christopher McQueen - My UX Process 2014

[email protected]

Personally, I’m a strong advocate of educating teams in user experience research and design techniques.

I believe that by training people in research and design methods, the scope and reach of small UX teams in organisations can be broadened.

By training product and technology teams, more insights can be gathered and richer feedback can be provided particularly in early project discovery and research phases.

EXAMPLE: With Deutsche Bank, I created and recorded several presentations to facilitate Product Manager training in UX techniques.

The “course” consistent of 3 parts moving from collecting data through client interviews, interpreting and analysing the resulting information, and finally collating this into meaningful outputs such as personas, task flows and design ideas.

UX training

7

Page 8: Christopher McQueen - My UX Process 2014

[email protected]

For websites, content is the stuff that actually gets users to visit. For products, services and applications the copy needs to be consistent and fit for purpose.

Ordinarily, I’d recommend that a content strategy and the resulting copy is left to the professionals.

Good copywriters and strategists add a huge amount of value to any project. However, when content strategists aren’t available, it often falls to the UX designer to complete the copy requirements.

EXAMPLE: This example was taken from an Intranet re-design built on SharePoint. The intention of this template and guidance document was to assist in the page content structure for the site. In this instance, product managers and and intranet team stakeholders used the template for primary pages. The completed templates were then distributed to teams who could then incorporate their own content and follow the guidance provided.

Content strategies often fall out of content audits (covered later in this portfolio) but the planning of a solid content strategy is very important and needs to be considered early in the project.

Content strategy

8

Page 9: Christopher McQueen - My UX Process 2014

DiscoveryHeuristic (expert) review Content audit Surveys Contextual inquiry Card sorting

9

Page 10: Christopher McQueen - My UX Process 2014

[email protected]

Heuristic reviews (often referred to as expert reviews) are a cost effective way of quickly identifying usability issues.

Reviews can be used to evaluate existing websites, competitor offerings or prototypes. They can therefore be used early in a project to baseline the website or application you’re creating, or towards the end to catch any small usability niggles on rapid turnaround projects.

EXAMPLE This example from my work with Reed Exhibitions was conducted prior to a more in-depth review of the Exhibitor website homepages.

To provide additional detail and support prioritisation of future feature development the issues that have been identified can be ranked and rated.

In support of this prioritisation each issues best practise wireframes and interaction designs are often provided when more detailed fixes are required.

Heuristic (expert) review

10

Client: Reed ExhibitionsProject: Exhibitor homepage structure and layout

Page 11: Christopher McQueen - My UX Process 2014

[email protected]

Content audits help determine what needs to stay and go when reorganising a site. Content auditing is a tedious and un-sexy job but you can’t undertake a redesign of a content-heavy site without it.

The main purpose of a content audit is to produce a listing of the site’s content. From this list, you can determine the importance and priority of content, identify duplicates, relationships, and generally think about there overall structure before plugging ahead with a full site redesign.

I typically record a content audit in a spreadsheet so they’re easy to share with other people on the team.

EXAMPLE: The example provided is a snapshot of a fairly a short content audit performed on a content heavy site, prior to a redesign. Here content was captured along with it’s author and additional notes so that a job of rationalisation could begin. It also helped when migrating over to a new content management system.

As mentioned earlier in my portfolio, a content audit often feeds into a solid content strategy, from which authors can use to rationalise existing content, restructure, repurpose or start again!

Content audit

11

Page 12: Christopher McQueen - My UX Process 2014

[email protected]

Surveys aim to understand user needs, behaviours and motivations. They can also provide high-level guidance as to what users feel about an existing product or service.

Online surveys are useful in providing a high number of responses to research questions to help get a general overview of the target audience.

EXAMPLE: The survey illustrated on this page was sent out to all staff at a large pharmaceutical company. Its intention was to capture a high number of responses regarding the company intranet.

The survey was successful in capturing over 430 responses and provided clear guidance to stakeholders as to the priority issues to be addressed.

This project also included qualitative research methods (illustrated on the next page). The captured data was combined and synthesised in order to derive user requirements.

Surveys

12

Client: GSK (via The Team)Project: UK Pharma Intranet Redesign

Page 13: Christopher McQueen - My UX Process 2014

[email protected]

Contextual inquiry should be considered as one of the first and most important components of detailed user/customer research. The aim of a contextual inquiry interview session is to form a comprehensive understanding of how real customers use products in the context of their daily life.

Typically, participants are far more relaxed and anecdotal in their own, familiar surroundings. By studying people in a natural environment, observations can be made as to the context of use which may inform design decisions.

Contextual inquiry can also be used to validate existing designs by understanding how they perform in ‘the real world’ and not in a lab-based, manufactured environment.

EXAMPLE: As illustrated on the previous page, contextual depth interviews were used in combination with an online survey to capture a wealth of data regarding a large pharmaceutical company’s intranet.

Contextual inquiry

13

Client: GSK (via The Team)Project: UK Pharma Intranet Redesign

Page 14: Christopher McQueen - My UX Process 2014

[email protected]

Card sorting aims to understand users expectations around navigational concepts. Participants are asked to group a selection of “cards” into categories that they feel have most meaning. Groups can be named by the participant (open sort) or by the facilitator (closed sort).

Card sorting can be achieved using online tools or in-person simply using paper and pens. The research outputs can be used in tandem with other research techniques and may also be iterated several times with different groups of participants.

EXAMPLE: In combination with usability studies and competitor research, online and offline card sorts facilitated research into Betfair’s global navigation.

Over 50 responses were received via an online sort. 10 live (offline) card sorts were carried out to provide context to the data. Offline sorts allow users to think out loud; explaining their thoughts, opinions and rationale.

Card sorting

14

Client: BetfairProject: Global Navigation

Page 15: Christopher McQueen - My UX Process 2014

SynthesisIdeation Personas Sitemaps User Journeys Wireframes Mobile and tablet wireframes Storyboards Prototyping

1515

Page 16: Christopher McQueen - My UX Process 2014

[email protected]

Ideation workshops typically involve gathering the data from the research inputs in order to understand the findings and extrapolate into high-level design requirements.

From these requirements design concepts can be created. Ideation workshops can also be a useful milestone from which to establish the next steps of a project.

High-level navigational concepts are formed and tested through further “reverse” card sorting exercises, mock-ups or prototypes.

Design concepts are generated by way of sketching prior to any high-fidelity wireframes. Through the generation of multiple design concepts, ideas can be validated against the project, business or user requirements.

Ideation

16

Page 17: Christopher McQueen - My UX Process 2014

[email protected]

Personas are fictional but represented user archetypes. They are created in order to illustrate to stakeholders and the broader design team who might use the intended website or product.

For each website, application or service, typically 3-5 personas are created. Each persona represents the behaviour patterns, goals, skills, attitudes, and environment of an archetypal user.

Personas are useful in helping to guide decisions about a service, product or interaction space such as features, interactions, and visual design of a website.

EXAMPLE: The persona examples provided were created (in partnership with UX team members) as part of the Trade Finance application for Deutsche Bank.

Personas

17

Page 18: Christopher McQueen - My UX Process 2014

[email protected]

Sitemaps demonstrate high-level Information Architecture.

Whilst I have focused less on sitemaps in recent times, due to interactions often being difficult to represent, sitemaps are still very useful tools.

Typically, for content heavy websites or intranets a sitemap will help form the foundation of the high-level navigation structure.

Sitemaps also serve as tools to provide guidance to content/page creators to select the appropriate template design via the client’s content management system.

EXAMPLE: This examples opposite demonstrates the high-level IA of both a mobile app and an intranet.

The red-orange tags in the lower image denote the required page templates for intranet pages.

Sitemaps

18

Client: GSK (via The Team)Project: UK Pharma Intranet Redesign

Page 19: Christopher McQueen - My UX Process 2014

[email protected]

User Journeys help define the core path that a customer takes through a an experience.

User Journeys help define the site map and overall structure and flow of pages and user interactions.

Swimlanes can also be used to illustrate the changes to a customer’s flow through a site via different user profiles, permission level or status.

EXAMPLES: Here are a couple examples of typical User Journey deliverables. The lower example demonstrates user entitlements to certain site features by way of a swim lane diagram.

User journeys

19

Client: Reed ExhibitionsProject: Advanced Exhibitor Directory

Page 20: Christopher McQueen - My UX Process 2014

[email protected]

Wireframes are often the most important part of any design process.

The intent of a wireframe is to provide a specification for the design. A good wireframe can make the difference between and good and a poor implementation.

Personally, I’m a fan of rapid iteration and therefore the creation of detailed designs tends to be more fitting when reaching a decision point for the design direction.

EXAMPLE: This example is from a light reporting tool to be used as part of Deutsche Bank’s Transaction Inquiry application.

Examples on the following pages include mobile and tablet betting concepts and floor planning tool for exhibition visitors.

Wireframes

20

Page 23: Christopher McQueen - My UX Process 2014

[email protected]

Mobile and tablet wireframes

23

Page 25: Christopher McQueen - My UX Process 2014

[email protected]

Creating prototypes has become an increasingly important task for a UX Designer/. The purpose of each prototype is to successfully represent the primary interactions of the website or application.

Considering the audience for each prototype is extremely important. The final prototype may be received by the developers of the product. Earlier prototypes ranging from low to high fidelity are useful for usability testing.

When testing with real users, higher fidelity and interactional realism often leads to much richer feedback. However, it’s often the case that rapid iteration through low fidelity prototypes can provide a good steer for whether the design of the website or application is meeting expectations.

EXAMPLE This example was produced using Axure RP and formed part of the final round of concept testing for Deutsche Banks Trade Finance application.

This relatively high-fidelity prototype incorporated many the primary interactions needed to validate the overall concept with end users of the system.

Prototyping

25

Page 26: Christopher McQueen - My UX Process 2014

OptimisationUsability testing (lab based) Usability testing (outputs)

26

Page 27: Christopher McQueen - My UX Process 2014

[email protected]

Usability testing is used to evaluate a product or service by testing it on real end-users.

The aim of each study is to provide validation and input into existing designs, future concepts or prototypes.

A typical study will involve one participant whilst the moderator observes “Points of Pain” within the system.

EXAMPLE The examples on this page are from a variety of projects which incorporated lab-based usability testing.

Usability testing (lab based)

27

Page 28: Christopher McQueen - My UX Process 2014

[email protected]

The outputs of a Usability Study are intended to input directly into the design process.

Once the input has been digested into an iterated design, the usability testing process is repeated.

Throughout the course of a study, several benchmarking exercises take place in order to gauge the relative success of the design.

Usability testing (outputs)

28