1.
Prototyping
The what, why and how at the
University of Edinburgh
Neil Allison
University Website Programme
Web Publishers Community October 2015

2.
Overview
• What is prototyping?
• Prototypes and the design process
• Example projects
• How to prototype
• Case study: Website search results page
• Balsamiq demo

3.
Shared understanding is vital

4.
WHAT IS PROTOTYPING?

5.
What is prototyping?
• Sketching out how an idea or concept will
work

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.
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
www.userfocus.co.uk/articles/paperprototyping.html

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

9.
PROTOTYPES AND THE
DESIGN PROCESS

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.
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.
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.
…so long as you
can be when you
present or test them
Prototypes don’t
have to be clever
or sophisticated…

14.
Video demo of paper prototype

15.
EXAMPLE PROJECTS

16.
Example 1: Requirements gathering
http://www.slideshare.net/mrscammels/prototyping-for-responsive-web-design

17.
Example 2: AB testing
http://ausweb.scu.edu.au/aw04/papers/refereed/alexander/paper.html

18.
Example 3: Rapid iterations
http://www.bunnyfoot.com/about/clients/screwfix.php

19.
Example 4: Communicate ideas

20.
HOW TO PROTOTYPE

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.
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.
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

24.
CASE STUDY: RAPID
ITERATIVE PROTOTYPING

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.
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.
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.
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.
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: http://bit.ly/uwp-search-sketch

30.
BALSAMIQ DEMO
https://www.wiki.ed.ac.uk/display/mockups/Home+-+Prototyping+wiki

31.
Balsamiq – EdWeb templates

32.
Share your experiences
• Has anyone
– Used prototyping as part of a development
process?
– Attended our training on prototyping?
– Used Balsamiq?

33.
Thank you
Get in touch if you’d like
support or advice to begin
prototyping in your team
neil.allison@ed.ac.uk
UX Manager, University Website Programme