Your SlideShare is downloading. ×

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.

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Click to edit Master title style User-Centred Design Process ObjectiveDigital May 2009
  • 2. User-Centred Design Process
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.