User-centred design and prototyping


Published on

Often, we forget that we build systems the way the BA, the Systems Architect and the Developer interpret the requirements and not the way that users might envision the system. This means that what we build might not actually be what users want or actually need to help them get their work done.

This presentation looks at user-centred design as a way of shifting the focus back toward the user in order to achieve the sweet spot between the business requirements and the user-requirements. It suggests that this process needs to start early, as part of the planning, rather than being left til too late in the process.

Published in: Business, Technology

User-centred design and prototyping

  1. 1. User-Centred Design & P rototyping Matthew Hodgson Regional-lead, Web and Information Management 4 Nov 2007
  2. 2. Systems design What the user actually needed As finally implemented As produced by the developers As envisaged by the business owner As specified in the requirements As designed by the senior analyst
  3. 3. Systems development lifecycle
  4. 4. Squeezing out the design-phase
  5. 5. Developers as designers
  6. 6. The high cost of redevelopment COST INCREASE
  7. 7. How do we capture the intent of the system?
  8. 8. User-centred design
  9. 9. What is user-centred design? <ul><li>Engages users: </li></ul><ul><li>From the beginning to the end of a project </li></ul><ul><li>Understands: </li></ul><ul><li>How users want to use the system </li></ul><ul><li>How users think about their work </li></ul><ul><li>Identifies: </li></ul><ul><li>Needs and wants </li></ul><ul><li>Interaction preferences </li></ul>
  10. 10. User-centred design frameworks Jessee James Garrett:
  11. 11. How do we do user-centred design? <ul><li>A look at how other disciplines employ this philosophy… </li></ul><ul><li> </li></ul>
  12. 12. Prototyping thru storyboarding <ul><li>Movie-makers use storyboarding to: </li></ul><ul><li>Plan the movie as early as possible </li></ul><ul><li>Put themselves into the shoes of the audience </li></ul><ul><li>Make the movie better for the audience </li></ul><ul><li>Conceive of the movie early </li></ul><ul><li>Identify flaws in the plot </li></ul><ul><li>Work out difficult concepts </li></ul><ul><li>Save time and money </li></ul>
  13. 13. BAs using storyboarding <ul><li>Helps us understand: </li></ul><ul><li>User’s wants and needs </li></ul><ul><li>User-interaction preferences </li></ul><ul><li>Clarify: </li></ul><ul><li>Business processes </li></ul><ul><li>Identify: </li></ul><ul><li>Flaws in business & system logic </li></ul><ul><li>Points for system support </li></ul>
  14. 14. BAs using storyboarding (cont.)
  15. 15. Storyboarding (cont.) <ul><li>Benefits: </li></ul><ul><li>Light-weight – use at a minutes notice </li></ul><ul><li>Low cost – just grab pen & paper </li></ul><ul><li>User buy-in for change management </li></ul><ul><li>Gets users involved </li></ul><ul><li>Sets users’ expectations </li></ul><ul><li>Increases users’ understanding of the system </li></ul><ul><li>Disadvantages: </li></ul><ul><li>Need to be able draw to convey the concept  </li></ul>
  16. 16. Iterative prototyping <ul><li>Take your storyboards to the next level </li></ul><ul><li>Conceive of a system before implementation! </li></ul><ul><li>Involves: </li></ul><ul><li>Engaging users again, and again and again </li></ul><ul><li>Refining concepts until they’re bullet-proof </li></ul><ul><li>Includes: </li></ul><ul><li>Interaction design </li></ul><ul><li>Navigation design </li></ul><ul><li>Information design </li></ul>
  17. 17. Case study <ul><li>‘ Previz’ as an example of iterative prototyping </li></ul><ul><li> </li></ul>
  18. 18. Evolution through iteration with users
  19. 19. What does iterative prototyping involve? <ul><li>Emphasise: </li></ul><ul><li>User involvement – they’re the ones going to use the system! </li></ul><ul><li>Improve: </li></ul><ul><li>Design concepts </li></ul><ul><li>Refine: </li></ul><ul><li>User interactions </li></ul><ul><li>Information design </li></ul><ul><li>Navigation model </li></ul>
  20. 20. Why use iterative prototyping? <ul><li>Benefits </li></ul><ul><li>Involves users – sets expectations, increases understanding </li></ul><ul><li>Conceptual or detailed </li></ul><ul><li>Communicates the intent of the system to the developers </li></ul><ul><li>Find problems in system interactions early </li></ul><ul><li>Solve information architecture problems early </li></ul><ul><li>Cheaper than building the system </li></ul><ul><li>Disadvantages </li></ul><ul><li>Need good software – Axure ( </li></ul><ul><li>Prototyping is more than just ‘screens’ – you might need a UX-designer or an IA to help with the tricky bits </li></ul>
  21. 21. Do conceptual design sooner rather than later!
  22. 22. User-centred design – finding the sweet spot What the user actually needed As finally implemented As produced by the programmers As envisaged by the business owner As specified in the project request As designed by the senior analyst THE SWEET SPOT
  23. 23. Fin <ul><li>Questions? </li></ul><ul><li>Blog: </li></ul><ul><li>Slideshare: </li></ul><ul><li>E: </li></ul><ul><li>W: </li></ul>