1. Compiled with the assistance of the Tiger University Program of the Estonian
Information Technology Foundation

2. Ülikooli logo
PANTONE 1807
PANTONE Black
ess

3. Creating and Testing Low
or Medium Fidelity
Prototypes Recap
Ilya Shmorgun,Valeria Gasik, David Lamas

4. Topics
• Low fidelity prototypes
• Medium fidelity prototypes
• Testing prototypes

5. Low Fidelity Prototypes

6. Sketch
• A rough or unfinished drawing or painting
• Often created to assist in making a more
finished picture

7. Things to Remember
• A sketch is disposable
• Draw as many variations as possible
• Don’t go into too much detail

8. Example

10. Defining the
Interactions

11. Tap the Back button
Tap the Camera button
Tap the lecture name
Start
Tap the Scan button

12. Medium Fidelity
Prototypes

13. Wireframe
• A visual guide that represents the skeletal
framework of a website or an application
• Usually lacks typographic style, color, or
graphics
• The main focus lies in functionality,
behavior, and priority of content

14. Example

15. 4:20PM 4:20PM
mTLU Done Back mTLU Done
IFI7038
21. sajandi käsitlusi informatsioonist ja täh...
16:15 - 19:45
IFI7038
Lorem ipsum
21. sajandi käsitlusi inf...
Nullam id dolor id nibh ultricies vehicula ut id elit. Duis
Teng Jaan
mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Maecenas
faucibus mollis interdum. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros. Integer posuere
Nothing else today erat a ante venenatis dapibus posuere velit aliquet.
Donec id elit non mi porta gravida at eget metus.
Lorem ipsum
Nullam id dolor id nibh ultricies vehicula ut id elit. Duis
mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Maecenas
faucibus mollis interdum. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros. Integer posuere
erat a ante venenatis dapibus posuere velit aliquet.
Donec id elit non mi porta gravida at eget metus.
Thu Fri Sat

16. Defining the
Interactions

17. 4:20PM 4:20PM 4:20PM
mTLU Done Back mTLU Done
Tap the Back
IFI7038
button 21. sajandi käsitlusi informatsioonist ja täh...
16:15 - 19:45
IFI7038
Lorem ipsum
21. sajandi käsitlusi inf...
Nullam id dolor id nibh ultricies vehicula ut id elit. Duis
Teng Jaan
mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit. Maecenas
faucibus mollis interdum. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros. Integer posuere
Nothing else today Tap the lecture erat a ante venenatis dapibus posuere velit aliquet.
Donec id elit non mi porta gravida at eget metus.
name Lorem ipsum
Nullam id dolor id nibh ultricies vehicula ut id elit. Duis
Start mollis, est non commodo luctus, nisi erat porttitor
Tap the Camera ligula, eget lacinia odio sem nec elit. Maecenas
faucibus mollis interdum. Morbi leo risus, porta ac
button consectetur ac, vestibulum at eros. Integer posuere
erat a ante venenatis dapibus posuere velit aliquet.
Donec id elit non mi porta gravida at eget metus.
Thu Fri Sat
Tap the Done
button
4:20PM 4:20PM
mTLU Done mTLU Done
IFI7038 16:15 - 19:45
21. sajandi käsitlusi inf...
Teng Jaan
IFI7038 16:15 - 19:45
Tap the Fri
21. sajandi käsitlusi inf...
Teng Jaan button No lectures today
16:15 - 19:45
IFI7038
21. sajandi käsitlusi inf...
Teng Jaan
Nothing else today
Thu Fri Sat Thu Fri Sat
Tap the Sat button

18. Tools
• Pen and paper
• OmniGraffle
• Balsamiq
• Mockingbird

19. Testing Prototypes

20. Why do you need to
test?
• You don’t know your users
• You assume too much
• You have no idea what your users will
stumble upon
• Creating personas is no substitute for real
user feedback

21. Preparing for Testing

22. Preparing for Testing
• Write several tasks, which will allow a user to
test all aspects of your prototype
• Write an introduction to your application
• Decide who will moderate the testing and
who will take notes
• Test your prototype with at least three people
• The optimal number of testers is 5+

23. Topics Covered
• Low fidelity prototypes
• Medium fidelity prototypes
• Testing prototypes

24. Assignment
• Choose a platform for your application (iOS,
Android, Windows Phone)
• Create sketches or wireframes
• Put them in a state transition diagram
• Make a clickable prototype
• Prepare a testing session
• Test the prototype