Designing the User Experience


Published on

Our User Centred Design/User Experience process. Each stage is part of our training course and has associated guidelines and templates.

Published in: Technology, Business
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Designing the User Experience

  1. 1. Click to edit Master title style User-Centred Design Process ObjectiveDigital May 2009
  2. 2. User-Centred Design Process
  3. 3. Strategy Review Existing Research • To understand our client’s business and the context of the project, we gather and review any existing research and documentation including: o Web usage statistics o Previous user research o Any relevant project documentation o Client surveys or feedback o Any issues collated by the call centre or client liaison staff
  4. 4. Strategy Strategy Planning Workshop • In the strategy planning workshop we work with your business and your technical teams to map your strategic customer experience requirements. • All project stakeholders gain an objective understanding of the project, future strategies and develop a roadmap for the project ahead. Strategy
  5. 5. Strategy Project Management Plan • Before we commence work on any project, we complete a Project Management Plan to ensure the project runs smoothly, on time and on budget. • This document outlines the following: o Project Scope o Project Roles o Strategy Key Dates o Project Schedule and Resources o Exclusions and Assumptions o Project Meeting Plan
  6. 6. Strategy Expert Review • An expert review is a quick and reliable way to identify usability issues early on in the process. • It can look at existing technology, new technology, prototypes or requirements documentation. • A set of tasks representative of your strategy is used to walkthrough the technology as though we are one of your customers or staff. • Issues are documented according to the tasks evaluated or heuristics to ensure we cover everything. • The outcome is a report with the issues prioritised with accompanying actionable recommendations is provided.
  7. 7. Strategy Competitor Review • We review the competitor landscape to identify functionality and design components that can be leveraged within the new site. • This ensures our designers have a full understanding of what potential customers may have experienced previously. • We customise the review criteria for the project and cover: Strategy o Customer interaction processes o Usability issues and opportunities o Useful functionality and its execution • We also review overseas sites to ensure that our solution is cutting edge and leverages the technology available to its full capacity.
  8. 8. Strategy Social Media Strategy • Customer experience extends beyond a website! • We help our clients: o Find out where users and competitors are on social networks o Determine which social networks a client should participate in o Identify relevant topic areas and key messages for conversations o Plan a management strategy for conversations o Work out what content should be created and where it should be posted o Post content (images, videos, PDFs, comments etc) o Social bookmark and tag relevant content o Monitor social media for references to our client’s business or relevant keywords
  9. 9. Research User Description • Different techniques can be used to describe your users: o Task analysis Task analysis teaches you more about what users want to do on your site by listing the user tasks. o Personas Personas are often used as a design tool and reference point to make decisions during project. Fictional people represent the different key user groups. o Scenarios (goal and story based) Scenarios elaborate on the tasks in the task analysis with more context around the goal users may have on your site. o Workflow/customer journey A workflow illustrates the individual steps a user goes through on your site to reach their goal. To develop an intuitive and logical user experience is built each process and the links between these are documented.
  10. 10. Research Business Requirements • Requirements gathering begins in the strategy workshop with key project stakeholders, and continues with interviews and site visits with staff and business unit leaders. • These in-depth stakeholder interviews solidify requirements from different parts of the business, as well as uncover insights into user requirements. • Business requirements are the priorities, needs, and goals of the business for the project. • They may cover budget, branding and marketing requirements, content, functionality and technology considerations.
  11. 11. Research User Requirements • Gathering user requirements means finding out how users want to interact with the website, and their opinions of the existing website. • Generally we ask users about the tasks they are completing when they use the website, and the context in which they are completing them. • Requirements gathering can be done in one on one interviews, focus groups, or surveys. • Visiting users in their place of work or home provides valuable insights into the context of use. • Brainstorming ideas in workshops can sparks ideas. Usability testing an existing site at this stage also provides valuable insights.
  12. 12. Research Focus Group • A focus group is used to gather requirements about the attitudes, beliefs and desires. • To gather feedback on users, products, general tasks, strategies and environments. • It can also be used to gather reactions to ideas or prototypes. • It is a focused group discussion led by a moderator who follows a plan that has questions, prompts, tasks and exercises for the group. o Typically 5-12 people per focus group. o A typical focus group lasts for 2 hours.
  13. 13. Research Ethnographic research • Ethnographic research allows for first hand observation of behaviour in the real world rather than a test environment. • Participant are observed and interviewed at the place where the technology is used, i.e. home or work, to determine their usability requirements. • This provides insight into the issues surrounding the use of the technology rather than actual metrics.
  14. 14. Research Online research • Research tools deployed online: o Tangler Online discussion forums and groups to discuss a technology. o Surveymonkey To design, collect and analyse online surveys. o Optimalsort An online card sorting tool to help organise information. o Treejack To help make decisions around the information architecture. o RelevantView An online market research tool tracking behavior and opinion used for remote usability testing.
  15. 15. Research Social network research • Social networks can be leveraged to target and engage with customers: o Twitter o Facebook o LinkedIn o Tangler o Google Answers o Yahoo Answers o Or groups relevant to a particular customer need, business or industry
  16. 16. Design Information Architecture • Information architecture (IA) describes the organisation and labelling of the content and functionality on the website. • It is generally a hierarchical structure defined to three levels, but may go deeper if the website has complex functionality. • Creating an IA is a decision-making process based on: o o Card-sorting results Business strategy o o Usability testing Project objectives o o Technology considerations User requirements • The most important input into the IA is the card-sorting exercise, conducted in user workshops on online so you can consult your users no matter where they are. o As a group, users sort the proposed content of the website into logical groups, and label each group. o The exercise is repeated with several groups, and the results compared.
  17. 17. Design Documenting your IA • We generally present your information architecture (IA) to three levels. • A fast and visual way to document the results is to use a mind map or similar software. • A group of stakeholders should work through the proposed architecture together, referring to the outcomes of the user research, and the stakeholder and marketing requirements. • The final output is documented in Excel format, useful later when populating the site with content. Working format Final format
  18. 18. Design Design Workshop • The purpose of the design workshop is to explore possible approaches to the wireframe design based on user feedback, technical feasibility (accessibility, CMS etc) and stakeholder and marketing requirements. • Covered in the workshop are typically: the outcomes of the previous phase, the recommended information architecture, and explore ideas for the wireframes. • This ensures innovation within what is actually technically feasible.
  19. 19. Design Wireframe Design • Wireframes are sketches of the basic design of the website. • Starting as a team sketching on butcher’s paper. • For any interactive pages, clearly indicate how the interactions will work. • Further development of the wireframes is required to clearly explain how the interactions works for development. • Typically, the following wireframes are created: Home; Level 2 & 3, search, and the key interaction pages. • Complex interaction sites require detailed documentation to explain the workflow and functional requirements.
  20. 20. Design Graphic Design • Once the wireframes are completed and approved they move on to the graphic design phase. • This may be conducted either by the clients’ design agency, or Objective Digital’s own graphic designers. • Here are some examples of our graphic design work:
  21. 21. Build + Test Handover workshop • The handover workshop ensures the developers have a clear understanding of the project from both the business and users’ point of view. • The workshop participants include key business, technical and consulting contacts. It covers: o Project objectives o Key user types and tasks Strategy o Site features and functionality o Content requirements o Reasoning behind wireframe design decisions
  22. 22. Build + Test Prototype • A prototype is used to test user reactions to new concepts and functionality on website. • Three types of prototyping: o Low-fidelity, paper prototyping o Clickable images/pages with Axure o High-fidelity – fully functioning website Strategy • Our website development partner, Rage Communications, can build website prototypes based upon the functional specifications, wireframes and graphic designs that we provide. • The website developers are based in Chennai, with the project management function managed by our Sydney office.
  23. 23. Build + Test Eye-tracking Usability Testing • Testing with users identifies any usability issues, and allows you to watch people as they interact with the site. • This provides an understanding of why any issues arise. • A representative sample of each user type completes a series of tasks on the website. • The use of Eye Tracking allows the users to undertake the test on their own, without distraction. Strategy • Immediately following the test the participant’s eye movements video is replayed from the session and they are asked to comment on their experience.
  24. 24. Build + Test Implement and retest • For the UCD process to have value, it is most cost effective to Test implement the recommendations prior to the website build. • The recommendations are prioritised into different categories making it easy to differentiate between showstoppers and cosmetic issues. • The ideal UCD project goes through a series of iterations Build Design where changes are made to the prototype and tested with real users before going into the build phase.
  25. 25. Build + Test Manage Website Development • We work with our website development partner, Rage Communications, to build websites based upon the functional specifications, wireframes and graphic designs that we provide them with. • The website developers are based in Chennai, with the project management function managed by our Sydney office. • We have completed a number of successful projects with Strategy Rage Communications, and they build websites to a very high quality standard, at highly competitive rates.