Alexis Odysseos - Building a prototype that feels real

1. Building a prototype that feels real
Alexis Odysseos
Co-Founder and CTO

2. 6 years old

3. After a hard day’s work

4. From kilo to giga

5. FAIL

6. EARLY
FAIL

7. EARLY
VALIDATE
YOUR IDEA

8. Why do products fail?

9. Products no one wants

10. Unusable products

11. Too early

12. Badly executed idea

13. From idea to product
Photo by Marc-Antoine Dépelteau on Unsplash

14. Users are different

15. Different cultures

16. Different goals

17. Different needs

18. Different pain points

19. They use products to make their
lives easier

20. But… there’s a way!

21. Study your users. Know your users.

22. Prototype before you build

23. Test with users. Validate.

24. Get feedback

26. Improve

27. Iterate. Again and again.

28. Process

29. 5 users can reveal 85% of
problems

30. Happy users

31. Successful products

32. Prototyping

34. Prototyping Fidelity

35. Developing visual fidelity

36. Prototyping Fidelity
Interaction Fidelity
LOW MEDIUM HIGH
MEDIUM
HIGH
Pencil
Sketches
Wireframes
Mockups
HotSpot
prototypes
Fully
Interactive
Prototypes
LOW

37. Developing interaction
fidelity
(low medium high interactions on low visual)
LOW INTERACTION MEDIUM INTERACTION HIGH INTERACTION
Developing interaction fidelity

39. Developing interaction
fidelity
(low medium high interactions on low visual)
LOW INTERACTION MEDIUM INTERACTION HIGH INTERACTION
Medium visual fidelity

40. Developing interaction
fidelity
(low medium high interactions on low visual)
LOW INTERACTION MEDIUM INTERACTION HIGH INTERACTION
High visual fidelity

42. Proto.io demo : web

43. Proto.io demo : apple watch

44. Proto.io demo : input handling

45. Proto.io demo : interactive native UI
controls

47. Hands-on

48. • Editor Tour
Basic shapes
Interactive UI components, on off switches, progress bars
Player
Sharing
Interactions (screen 1 <-> screen 2) toolbar
Images/dropbox
Animations/States
Masking paper prototype to create interactions/animations
Lookback & user testing tools integration
Topics

49. Promo code
‣ 120 days free account
https://proto.io/promo/inacademy
‣ Proto.io Spaces - Community showcase of interactive prototypes
https://spaces.proto.io
‣ Video tutorials and documentation
http://docs.proto.io/
Resources

50. Thank you.
Questions?
Alexis Odysseos
Co-founder, CTO
alexiso@proto.io
Promo code
‣ https://proto.io/promo/inacademy120 day free account