Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Prototyping - the what, why and how at the University of Edinburgh


Published on

Edited highlights of my prototyping training session. These slides are essentially the intro to a 3 hour practical, collaborative learning experience using pencil/paper and Balsamiq. The slides cover:
- What is prototyping?
- Prototypes and the design process
- Example projects
- How to prototype
- Case study: Website search results page
- Balsamiq demo

Published in: Education
  • Be the first to comment

  • Be the first to like this

Prototyping - the what, why and how at the University of Edinburgh

  1. 1. Prototyping The what, why and how at the University of Edinburgh Neil Allison University Website Programme Web Publishers Community October 2015
  2. 2. Overview • What is prototyping? • Prototypes and the design process • Example projects • How to prototype • Case study: Website search results page • Balsamiq demo
  3. 3. Shared understanding is vital
  5. 5. What is prototyping? • Sketching out how an idea or concept will work
  6. 6. Why should I prototype? • Anyone can prototype – not just specialists • It encourages upfront planning • It’s a useful team design exercise • It means you can test with users and make changes quickly and cheaply • You can try out different concepts • Effective way to communicate with stakeholders, designers, programmers
  7. 7. Prototyping basics • Prototypes are good in the early design phase – Focus on navigation, workflow, terminology and functionality than visual design • Too much visual design is a bad thing – It encourages focus on the wrong things • Paper prototyping brings out problem solving skills – Not sketching or technical skills Read more: 7 myths about paper prototyping
  8. 8. When is a prototype not a prototype? • When you can’t implement changes quickly for retesting • When it’s a pain to try alternative approaches, particularly in parallel • When you get too attached and the thought of starting over because something fundamental is wrong makes you want to cry
  10. 10. How prototypes fit in the design process • Know who your users are and what tasks they will do (personas) • Create prototypes of the designs • User test (not show!) the prototypes with the representative audience • Make changes and test again (and repeat)
  11. 11. User testing with prototypes • Testing, not just showing, is an important part of prototyping – What people say and what they do is different! • It is important to have a solid understanding of the tasks before putting screens in front on users – Always have a pilot test
  12. 12. Pocket guide to running a usability test with a prototype 1. Set the scene – talk through the scenario we’ve provided so participant can play the role of the target user 2. Play computer – enable your prototype to replicate functionality to allow participant to work through the scenario (e.g. Changing tabbed content) 3. Ask questions – prompt participant to think aloud, but save the ‘why’ questions til the end 4. Make notes – pertinent comments and actions
  13. 13. …so long as you can be when you present or test them Prototypes don’t have to be clever or sophisticated…
  14. 14. Video demo of paper prototype
  16. 16. Example 1: Requirements gathering
  17. 17. Example 2: AB testing
  18. 18. Example 3: Rapid iterations
  19. 19. Example 4: Communicate ideas
  21. 21. Prototype sophistication • It depends: – On what you’re looking to find – On where you are in the design process – On who you’re working with • Does it facilitate – Interaction? – Communication?
  22. 22. Choosing the right tools • Use the tool(s) that work best for you • Doesn’t matter what you prototype with – Are you comfortable with it? – Can you work quickly? – Opportunities for collaboration are good too
  23. 23. Prototyping options • Pencil, paper, post-it notes • Graphics package (we love Snagit) • Office packages: PowerPoint, Visio, Word • Firefox free add-on: Pencil • Online services like Mockingbird, UXPin... • Specialist tools like Axure, iRise, Balsamiq • Your preferred development framework
  25. 25. Website search results page • We needed to redevelop website search to fit the new website design – Responsive layout vital • Early draft designs were taking too long and not testing well with users • New approach: Rapid, iterative, collaborative prototyping
  26. 26. Rapid team prototyping • Quick: Session took 90 minutes • Cheap: Team time, pencils and paper • Inclusive: 6 members of UWP involved with a range of backgrounds • Creative consensus: 20+ rough designs evolved into a single preferred option
  27. 27. How to… 1. Everyone spends 5 minutes independently generating as many solutions to a problem as possible 2. Everyone presents their ideas to the group 3. Everyone independently sketches their one preferred solution – Must include at least one idea from someone else
  28. 28. How to… 4. Everyone presents back to the group again 5. Working in pairs each team evolves their design again 6. Final presentation to the group
  29. 29. What happened next • By the final round designs had significantly converged • Designer/developer used this prototype as the basis for a revised design – Rough interactive prototype produced & tested with users – significantly better results • Interactive prototype evolved into the current search page design Read more:
  31. 31. Balsamiq – EdWeb templates
  32. 32. Share your experiences • Has anyone – Used prototyping as part of a development process? – Attended our training on prototyping? – Used Balsamiq?
  33. 33. Thank you Get in touch if you’d like support or advice to begin prototyping in your team UX Manager, University Website Programme