Mari-Liis Kärsten & Karin Salu - UX/UI Designers, Nortal

1. 1. Digital prototyping
2. Usability testing

2. Based on your customer journey and
paper prototype start creating high-
fidelity wireframes and turn them
into digital prototype

3. Source: https://blog.prototypr.io/a-bridge-to-product-design-case-study-cd7bc0e43b55

5. Source: Muzli design inspiration - View log by Grejory for NICE 100 and marvelapp.com/features/prototyping

6. Digital design and prototyping tools

7. Marvel App – marvelapp.com

8. Adobe XD – adobe.com/products/xd

9. Figma – figma.com

10. WIX – wix.com

11. Digital design resources

12. Uplabs UI resources – uplabs.com

13. Google Material Design Kit –
materialdesignkit.com/android-gui/

14. Color tool – material.io/tools/color

15. Free photos – unsplash.com

16. Free fonts – fonts.google.com

17. Design inspiration

18. Dribbble – dribbble.com

19. Awwwards – awwwards.com

20. 1. Digital design and prototyping
✅ Choose a tool and stick with it
✅ Use UI kits to speed up the process
✅ Get inspired and make it your own
✅ Start working on your digital design views (based on user journey and paper prototype)
✅ Turn the static design views into a clickable digital prototype
Summary

21. 2. Usability testing

22. WHY we need user validation?

25. WHAT can you validate?

28. HOW to validate your prototype?

29. When is the right time?
Time

30. When is the right time?
As early as possible

31. How many users you need?

32. How many users you need?
5 people is enough

33. Technique 1
Observational user testing

34. Observational user testing

35. Observational user testing
Test your prototype on 5 end-
users
● Do the test 1 person at a time.
● Create tasks (about 5) for the person
to follow and observe them.
● Ask if it’s okay to record the screen
and voice for later analysis.
● Ask only open-ended questions to
get more feedback.

36. Technique 2
The 5 second test

37. The 5 second
test

39. What did you see?
What does this brand do?
What do you remember?

40. 5 second test for landing page
Test your prototype on 5 end-
users
● Show them your website for 5
seconds
● Ask them what they think your
company is about
● Ask them what they remember
● If your website did not communicate
the purpose clearly make changes

41. WHICH tools to use to record your
sessions?

42. Windows 10’s game bar

43. Windows - free cam

44. User testing tools
Screen + voice recorders
Free Cam (Windows)
Freescreenrecording.com
or
Windows + G
QuickTime (Mac)

45. What to do with the feedback?

46. Documenting feedback
Challenge Change proposal Decision
User did not find ... Lets move (this) to (there) We can do it. It is a
small change
User was confused by ... Lets bring (this component) to the
top of the page to be more
prominent
It is a bigger change so
lets do it later, if we
have time
User said that …. Lets change ...
User proposed that …. This is a good idea, lets change it

47. User testing
✅ Pick your participants (5 people)
✅ Pick your technique (observational testing, 5 second test)
✅ Prepare for the task (create tasks for the users)
✅ Do user testing
✅ Change your prototype accordingly
Summary

48. One last test

49. What do you remember from our
presentation?

50. “The first draft of
anything is sh*t.”
-Ernest Hemingway

51. Thank you!