Issue 11 — November 2018Prototyping brain-computer interfaces in JavaScript, prototypes and production, agile machine learning, and tips on usability testing.

Hi! I’m on my way back home from the Interface Prototyping seminar I’m giving at Muthesius University Kiel and it once more was a great joy to design and prototype with the students there. The next generation of designers will start working in a world of constant change, facing many challenges but also opportunities for positive change and improvement. So I feel a strong sense of responsibility to help them be prepared, which I hope to do by sharing my experience and introducing them to the many benefits of prototyping. If you have the opportunity to pass on some of your knowledge, whatever it is — don’t hesitate. Do it. Not only is it satisfying, but also the tiniest bit of support will help others to better meet their challenges and will make the world a bit better. And that alone is worth it. You built, wrote, or found something that belongs in this newsletter? Just write a short email to matthias@prototyping.news or send a tweet mentioning @PrototypingNews.

— Happy prototyping! Matthias

Links

Experimenting with brain-computer interfaces in JavaScript.

The best way to explore the nature and the possibilities of a new technology is to experiment and tinker around with it. Neurotechnology as a human-machine interface is such a technology and Charlie Gerard sure knows how to build interesting prototypes with it. In this super-interesting article, she shares her experiences from developing for brain sensor devices like the Emotiv Epoc and explains the limitations and potential of the technology.
https://medium.com/@devdevcharlie/experimenting-with-brain-computer-interfaces-in-javascript-8d6cb891fda8

Prototypes and production

Prototyping is getting more and more important in the design process as a tool to validate ideas. But, as Jeremy Keith notes, when coding prototypes there is an important distinction to make. While the code for a prototype can and often should be quick, dirty, and disposable, production code requires a very different attitude: Here, code quality and care for end users is key.
https://adactio.com/journal/14562

Agile Machine Learning — by Alex Kirsch

Machine learning is one of the hottest topics today and if we want to positively shape our future with AI we need to understand how to include methods into our design processes that allow avoiding the most common mistakes of this scarily powerful technology. Because let’s be honest: If we approach AI like Social Media campaigning or IoT, we’re doomed. ;) Alex Kirsch shares how at Intuity, a UX design studio from my hometown Stuttgart, the team uses a prototyping-based approach to master the challenge of creating useful AI solutions for clients.
https://www.intuity.de/agile-machine-learning-by-alex-kirsch/

3 Tips to Help You Prototype a Service

I already shared a few links about service design in the past issues of this newsletter, and for good reason. Great service design requires involvement from users, for which prototyping is ideal. And so, according to Melanie Bell-Mayeda, a Partner and Managing Director at IDEO, the most successful service design prototypes are based on real customer needs and co-created with the people responsible for delivering the service — iteratively improving the design and considering the user experience not just during the moment, but also before and after.
https://www.ideo.com/blog/3-tips-to-help-you-prototype-a-service

Redesigning the transport booking experience for Grab app — a UX case study

How do you approach the redesign of the transport booking experience of Southeast Asia‘s largest transportation platform? Rice Tseng, Senior Product Designer at Grab, did exactly that with his team. In this great case study, she talks about how the team got the redesign done by hosting a lot of workshops, collecting assumptions, doing user research, and testing interaction flows and assumptions with tons of prototypes.
https://uxdesign.cc/redesigning-the-transport-booking-experience-for-grab-app-52fbe796c36c

Beyond 800 words: News formats for personalizing and understanding

The BBC started a project last autumn to explore what the future of online news might look like. In particular, they looked at how to design personalized story formats and formats that would enhance the understanding of stories and issues. For that, they built over 30 prototypes and tested them with users. In this article, Tristan Ferne explains what worked best, walks you through some of the really interesting prototypes, and shares what the team learned over the past year.
https://medium.com/bbc-news-labs/beyond-800-words-news-formats-for-personalising-and-understanding-dd9a6c5ac6c9

Tips on Prototyping for Usability Testing

One of the main reasons to use prototypes is that you can test your design with users. But there are some differences between testing a prototype and testing a fully functional product. Jim Ross takes a look at the most substantial ones like that ideally, you should test a prototype which has its actual content in place and that you should conduct multiple rounds of usability testing, using prototypes with increasing levels of fidelity.
https://www.uxmatters.com/mt/archives/2012/10/tips-on-prototyping-for-usability-testing.php

Tools

Introducing Craft Player

With InVision’s Craft plugin, you can transform your Sketch designs into clickable prototypes. Now they added a player to the plugin that allows you to preview how InVision prototypes play out right inside Sketch.
https://www.invisionapp.com/inside-design/craft-player-sketch/

A Guide to Creating Design Systems In Framer X

The Framer team launched a beta version of the Framer X Team Store, a place to create, build and scale your company’s design system as a single source of truth for all your brand assets and even production components.
https://framer.com/blog/posts/design-systems-in-framer/

A new direction for Atomic

After nearly five years, the prototyping tool Atomic is being shut down in the middle of next year, because the team is changing their focus to designing a “new platform for development and product teams”.
https://atomic.io/prototyping

Bruck

Bruck is an experimental HTML prototyping system by Heydon Pickering built with web components and the Houdini Paint API. Quickly create and comment on interface layouts. The output is screen reader accessible and responsive without you having to author breakpoints.
https://github.com/Heydon/bruck

Felipe — intention-based design

Felipe is an interesting plugin for Sketch to turn Wireframes to UI. Simply draw simple shapes or text layers, and Felipe magically turns them into the symbols you meant to add. While I’m not that sure about the real practical use (yet), the idea of “intention-based design” behind it is brilliant and we will certainly see much more of such solutions in AI-driven design tools in the near future.
https://www.arielverber.com/felipe/

Torch: AR Prototypes

Torch is an app that lets you build augmented reality prototypes without code. It also includes real-time collaboration features and integrates with Sketchfab, Poly, and various cloud services.
https://www.torch.app/

Flowkit 2.0

Flowkit is a set of symbols and components that allows you to quickly create user flows inside Figma and Sketch. Version 2.0 has been redesigned from the ground up and brings a new grid, new components, flows, and more.
https://useflowkit.com/