Prototyping all the things

Humans are incredibly bad at predicting the future yet increasingly complex environments require us to do just that in order to avoid costly and even dangerous mistakes. To try and understand the future of our apps, our products, even entire businesses, we make risky guesses and estimations which — not rarely — end up being far from reality.
Prototyping to the rescue! Prototypes built the right way can act as the time machine we always wanted. At Siili, Florian and his team are building prototypes for a wide variety of environments — from in–car guidance systems to kitchen appliances. Through–out the years they have found a way to utilize prototypes as strategic design tool and Florian will share some insights on what he has learned.

Transcript

1. Prototyping all the things GOTO Night 2015
2. My interest is in the future because I am going to spend the rest of my life there. ! Charles F. Kettering “
3. Prediction & Anticipation
4. http:/ /wikipedia.org/
6. http:/ /flickr.com/photos/adactio/
7. http:/ /macrumors.com/
8. http:/ /pcmag.com/
9. http:/ /androidpolice.com/
10. http:/ /androidpolice.com/
11. http:/ /wikipedia.org/
12. The upcoming generation will no longer be able to distinguish between online and offline.
13. We need new tools
14. We can only see a short distance ahead, but we can see plenty there that needs to be done. ! Alan Turing “
15. Prototyping as Strategic Design Tool
16. —Connect across silos —Support for short iteration cycles —Increase development speed —Increase transparency —Involve users and designers early on —Enable sustainable solutions
17. Manifesto
18. Assumption is the root of all evil 1
19. Ideation is always followed by validation 2
20. Design happens close to the ‘client’ 3
21. Constant change is supported by all tools 4
22. Prototypes don’t have to be dead–ends 5
23. Experiences
24. The ubiquitous browser 1
27. POC Business prototype Production
28. Business prototype Feature Prototype Production Invalid feature Validation Integration
29. Web technology
30. —Speed —Transparency —Variations —Validation —Education
31. —Speed —Transparency —Variations —Validation —Education Html, CSS, JavaScript Meta languages (Haml, Sass, Slim) Interpreted languages (Ruby, JS)
32. —Speed —Transparency —Variations —Validation —Education Hosted solution Accountability of Design Access through browser
33. Version control Skinning/Theming Media Queries —Speed —Transparency —Variations —Validation —Education
34. Tangible design process Utilize existing infrastructure Short iteration cycles —Speed —Transparency —Variations —Validation —Education
35. Higher availability of experts and resources —Speed —Transparency —Variations —Validation —Education
36. Motion on mobile 2
37. People
38. Truly responsive, on the road 3
39. 1 3 2
40. Server Client Instances WS Server External inputs
41. Client Instance Client Instance Client Instance Component
42. Client Instance Client Instance Client Instance Component Component
43. Ruby Rack Middleman Server Client Instances WS Server External inputs
44. Html CSS JavaScript SVG (Templating) Server Client Instances WS Server
45. JavaScript Node.js Express Einaros API proxy Server Client Instances WS Server
46. Home appliances 4
47. (Touch) Display Controls Sensors
48. (Touch) Display Controls Sensors ? ? ?
49. Server WS Server WiFi iPhone (Touch Display) Controls Arduino
50. Pitfalls
51. —Hardware —Repeatability —Geographical distance —Remote updates —Education —Corporate environment
52. StroopBox
53. Development GIT CI/CD StroopMeister (Proxy) Prototype
55. Development
56. Raspberry Pi or similar Arduino Sensors Controls — Configuration — VM — Ruby, Python, JS, C — Local WiFi — LCD (Status)
57. Development Prototype (Staging) Prototype (Production) Prototype Provisioning (Ansible)
58. CI/CD
59. GIT Build Tests Store build artefact Notify user
60. StroopMeister
61. StroopMeister Prototype SSH Tunnel Development Error logs Certificate “key”
62. Updates
63. Raspberry Pi Certificate “key” Update request
64. Pull build Stop services Update Restart services
65. —Hardware —Repeatability —Geographical distance —Remote updates —Education —Corporate environment
66. Prototyping — Strategic Design Tool
67. Thanks!
68. siili.com / @siili_de / @polarblau