christopher mcqueen's portfolio
DESCRIPTION
Christopher McQueen's Portfolio. Originally created in 2012 so some of the projects are slightly out of date, but hopefully this gives you a good flavour of my process and work to date. If you like what you see, please do get in touch on [email protected]TRANSCRIPT
Christopher McQueenMy UX Process and Work Samples
About MeI’m a user experience researcher and designer with a love for all things design, technology and product.
I love to create engaging and usable experiences across web, intranet, kiosks, mobile devices and many more besides.
Over the course of the last 10 years, my experience has covered many different aspects of the user experience research and design lifecycle.
I’ve worked with a wide range of e-commerce, gaming, e-learning and transport clients.
Currently I’m working within the finance sector, specialising in the user experience research and design of transactional banking applications.
That’s me
User Research Online Surveys Ethnography and Contextual Enquiry Card Sorting
Online Surveys
4
Client: GSK (via The Team) | Project: UK Pharma Intranet Redesign
Online surveys aim to understand user needs, behaviours and motivations. They can also provide 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.
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.
Ethnography and Contextual Enquiry
5
Client: Various | Project: N/A
Ethnographic research methods and Contextual Enquiry are typically the first steps of deep user/customer research. The aim 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.
Ethnography and Contextual Enquiry 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.
Card Sorting
6
Client: Betfair | Project: Global Navigation Research Project
Live and online card sorting research can be used in tandem with other research techniques to help define and test navigational structure and user flows.
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.
Research Synthesis Ideation Workshops Navigation Synthesis
Ideation Workshops
8
Client: Reed Exhibitions | Project: Advanced Directories
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.
Client: GSK (via The Team) | Project: UK Pharma Intranet Redesign
Navigation Synthesis
9
Client: Various | Project: N/A
High-level navigational concepts are formed and tested through further “reverse” card sorting exercises, mock-ups or prototypes.
Interaction Design User Journeys Concept Generation Concept Development Site Maps Wireframes 1 Wireframes 2
User Journeys
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.
Below are 3 examples of typical User Journey deliverables.
Project: Sony Ericsson “Connections Kiosk” Project: E-commerce Checkout Enhancements Project: Loyalty CMS RedesignClient: Carphone Warehouse (via Iris Digital) Client: Argos (via CVL)Client: Shell (via Iris Digital)
Advanced DirectoriesParticipant Profiles
Fri Mar 04 2011
Creator
Modified
Chris McQueen1 / 1
Website User (WU)
Signed Up Website User (SUWU)
Visitor/Delegate
Visitor(same as Delegate - can Edit Visiting Company Profile)
Show Coordinator
Any Page Login / Sign Up
Listing PageSearch
Search for Company or Participant
Limited Profile(Company or Participant)
Any Page Listing PageSearch
Search for Company or Participant
Profile(Company or Participant)
Show Planner
Listing PageSearch
Search for Company or Participant
Profile(Company or Participant)
Show Planner
Private Message
×
Login / Sign up
Social Hub
Inbox
Add Social Media Profiles
Any Page
Edit Profile
Edit Visiting CompanyProfile
Show CoordinatorPortal
Site Search SearchResults
Profile Pages(Company Profiles and Participant profiles. Views are limited based on
User Type)Show Planner
Participant Hub (Provides an aggregated view
of the Participant features)
Participant HubFeatures
(Send Private Message, View Inbox, Integrate Social Media Profiles, Edit
RX Profile)
Register for Event
User Type
User Journeys (cont.)
This is an example of a User Journey Diagram that incorporates swimlanes.
Swimlanes can be used to illustrate the changes to a customer’s flow through a site via different user profiles, permission level or status.
Client: Reed ExhibitionsProject: Participant Profiles
Concept Generation
Design concepts are generated prior to any high-fidelity wireframes.
Through the generation of multiple design concepts, ideas can be validated against the project, business or user requirements.
Client: Various | Project: N/A
14
Client: Reed Exhibitions | Project: Participant Matchmaking
Concept Development
Sketch / scamp
Wireframe
High fidelity prototype
The concept development process often begins with sketching. Sketches can be quickly modified or abandoned. The aim is for all ideas can be considered. Through various iterations, wireframes and prototypes can be created for usability testing.
Client: Undisclosed | Project: N/A
Project: Sony Ericsson “Connections Kiosk” Project: UK Pharma Intranet RedesignClient: Carphone Warehouse (via Iris Digital) Client: GSK (via The Team)
Sitemaps
The sitemaps below demonstrate high-level Information Architecture.
17
Client: Reed Exhibitions | Project: Floorplans
Wireframes 2
Usability Asessment Expert Review / Heuristic Analysis 1 Expert Review / Heuristic Analysis 2 Usability Testing Usability Testing - Sample Outputs 1 Usability Testing - Sample Outputs 2
Expert Review / Heuristic Analysis 1
Client: Reed Exhibitions | Project: Metalex 2011 Homepage - Heuristic Review
Heuristic Analysis (often referred to simply as an Expert Review) is a cost effective way of quickly identifying usability issues.
Reviews can be used to evaluate existing websites, competitor offerings or prototypes.
This example demonstrates a simple homepage review highlighting key usability issues.
An alternative review method (illustrated on the next page) provides more detail by capturing, prioritising and rating issues leading to the production of recommended, best practise wireframes and interaction designs.
Expert Review / Heuristic Analysis 2
Client: Betfair | Project: Open an Account Heuristic Review
21
Client: Various | Project: N/A
Usability Testing
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.
The outputs of a Usability Study (see Betfair example on the next page) are intended to input directly into the design process. Once this 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.
22
Client: Betfair | Project: Sports Site Redesign
Usability Testing - Sample Outputs 1
23
Client: Argos | Project: E-commerce Checkout Enhancements
Usability Testing - Sample Outputs 2
Original design proposal:
• All participants who tested the original design proposal for the Improved Inventory did not understand the feature or the required calls to action
• All participants ignored the “Show Store Stock” button. 1 participant selected a checkbox then scrolled back up the page to view updated store stock
• All participants ignored the instructional text “Select up to 2 stores”
• Participants did not understand the preview feature
!!!
!!!
!!
!
Iterated design proposal:
• All participants immediately understood the required calls to action
• 1 participant expected the preview feature to show product imagery. The participant later understood the feature but did not experience added value
Only implement the iterated version of Improved Inventory
!
Trolley List page: • 1 participant mistook the stock availability for reservation as relating to the home delivery items
• Several participants commented upon how detailed the information was at the bottom of the page.
Stock Availability Page: • E-mail me when back in stock caused confusion due to visual separation from email address
entry field
• 2 participants commented about the inability to go back into the store from this page to purchase an alternative (in-stock) item
• Wording Available to Order rather than In Stock caused significant confusion
!!!
!
!
!!
“I would have gone back in and tried and found something else, or I’d have
removed the whole lot and started again.” Suzanne, 40