Issue 14 — February 2019
The right amount of perfect, a good time to do research, motion in UX prototyping, and more and more AI.
Hi! As a reader of this newsletter, you know that prototyping can profoundly change and improve the way we design products and websites. But establishing prototyping as a regular exercise can be harder than we might think at first. Other people have to be convinced of the value of prototyping and you might meet with resistance: Isn’t building a prototype too much work? Do you really think the client will pay for this? Why not just do our layouts like we always do them? That’s safer.
I’ve heard all of those excuses and there are many reasons why people hesitate to take the necessary step towards more prototyping and a more iterative process. For one, many fear the uncharted waters and prefer to adhere to a linear process that appears to produce more predictable outcomes — even if they have seen many projects fail. But many also just haven’t yet experienced the advantages of prototyping first-hand. For them, it just seems to create more work and more complexity.
If we want to promote change in our teams and work environments, if we want to establish a prototyping mindset, we need to constantly bring good arguments forward why prototyping is a unique way to learn from experience, create evidence, and make sure we are building the right thing. But most importantly, we should just start to prototype. Frame it as an experiment and just do it. It will work. Because there is actually no better lesson than to experience something first-hand.
If you enjoy this newsletter, please share it with people who you think would appreciate it, too. Thank you! 🤗 And now off to my selection of the best articles, talks, podcasts, and tools on prototyping of February 2019.
— Happy prototyping! Matthias
Links
The right amount of perfect
When you are building something new, you don’t necessarily need a polished, production-quality result all the time. Instead, what perfect means entirely depends on the project and the situation you are in. What you really need, is only the right amount of perfect, argues Jonas Downey in this post on Basecamp’s Signal v. Noise blog: “When you’re making a prototype of an idea, the right amount of perfect is a barely-working demo. Can you show the idea to someone, well enough to demonstrate how it should work — even if it’s stitched together with duct tape and popsicle sticks? Perfect.”
https://m.signalvnoise.com/the-right-amount-of-perfect/
It’s Never a Good Time to Do Research
Research is not only often neglected, but often teams struggle to find the right time to do research. Erika Hall, co-founder of Mule Design and author of ‘Conversational Design’ and ‘Just Enough Research’, explains why there is never a good time to do research — you simply should be doing research all the time. Because when everyone is working from clear goals and good information, everything goes faster, feels more meaningful, and has a much higher chance of success — also prototyping. So you better get into a mode of continuously asking questions and gathering evidence. Also make sure to read Erika’s post “The 9 Rules of Design Research”, too.
https://medium.com/mule-design/its-never-a-good-time-to-do-research-1ef719158980
The knowns and unknowns framework for design thinking
The Knowns and Unknowns framework — most famously used by Donald Rumsfeld to make the case for the invasion of Iraq — is a useful method to analyze the extent and quality of knowledge we have about something. In this article on UX Collective, AJ Justo explains the concept and provides some historical background to then go on and provide a starting point of how to use the framework in a Desing Thinking process to be more aware of facts, hypotheses, and prejudices, and to explore the unknown. An idea that can easily be applied to prototyping, too.
https://uxdesign.cc/the-knowns-and-unknowns-framework-for-design-thinking-6537787de2c5
Prove it with prototyping: How to test your ideas and focus your innovation
The story that James Gordon, a technologist in the RJI Innovation & Futures Lab, shares in this article is a classic example of maybe the most powerful advantage of prototyping: It allows you to test and validate ideas quickly and to adapt your approach with new insights after gathering feedback from real users. Prototyping is not so much about solving a problem, but about helping you to better frame it. And consequently, every new idea offers a new vantage point and an opportunity to formulate a more coherent perspective of the challenges and opportunities before you. In this case, the team decided to throw away a prototype they built for sportswriters and to try something completely different — which was only an easy thing to do, because the initial prototype was cheap and therefore easily abandoned.
https://www.rjionline.org/stories/prove-it-with-prototyping-how-to-test-your-ideas-and-focus-your-innovation
The Magic of Motion in UX Prototyping
Tyler Beauchamp is a Product Designer at HubSpot who works on Canvas, the company’s design system for their products. Canvas allows for making a high-fidelity prototype with just a few clicks. But there was still something missing: motion. So Tyler created a supplementary animated component library in Principle that includes the vast majority of elements that are in use. In this post, Tyler explains the benefits of prototyping with motion and you also get to see lots of examples of animated components.
https://medium.com/tyler-beauchamp/the-magic-of-motion-in-ux-prototyping-d2e4b8876043
Using Artificial Intelligence to Generate Alt Text on Images
Machine learning is currently gaining a lot of traction and there are already lots of APIs available to build interesting new things. In this article for CSS-Tricks, Nino Ross Rodriguez explains how you can leverage an image recognition service like Microsoft Azure‘s Computer Vision API to generate alt texts for images on the Web to improve accessibility and SEO performance. Only one of many potential applications for AI and machine learning that can best be explored by building prototypes.
https://css-tricks.com/using-artificial-intelligence-to-generate-alt-text-on-images/
Talks
Mind the Product: Tom Chi on Rapid Prototyping & Product Management
I already shared a talk by Tom Chi in issue 12 and although this exceptional talk here is from 2015, it is still highly relevant and well worth your time. Tom, who served as head of product experience at Google X developing technology such as Google Glass and Google’s self-driving car, shares lessons he has learned in rapid prototyping that are also applicable to product management. For example, he emphasizes how important it is to create a culture of learning and to stay in the medium instead of creating too many abstraction layers. He also stresses the importance of reducing the loop length of improving a prototype after user feedback. This way, you generate the key learnings necessary to improve the product experience much faster.
https://www.mindtheproduct.com/2015/07/video-tom-chi-on-rapid-prototyping-product-management/
Podcasts
CodePen Radio — Prototyping with Dave and Trent
Dave Rupert and Trent Walton from the web design shop Paravel join Marie Mosley and Chris Coyier for this episode of the CodePen Radio podcast. They talk about their approach to web design, which includes a lot of prototypes, preferably in the browser, and also about how prototyping can improve project progress and lead to far better results, especially if the prototypes are shared early and often with clients and colleagues.
https://blog.codepen.io/2019/01/15/206-prototyping-with-dave-and-trent/
Prototypes
arOS Concept
A super amazing prototype by Asher Vollmer, who used Unity and ARKit to explore the relation of AR glasses and touchscreen phones. Stuff like dragging and magnifying UI elements from the smartphone screen into an AR environment.
https://www.youtube.com/watch?v=PhiRxJCUXu8
Tools
Conversational UI Tools
CUI Tools is “a directory of the best conversational AI design tools and resources to help you master your next voice- or text-based bot project” — including a collection of prototyping tools.
https://cui.tools/
Marvel — Prototyping meets User Testing
Exciting news from Marvel: They are improving their prototyping tool by adding user testing features that allow you to get video, voice, and analytical feedback on designs and prototypes. Afterward, you can invite your team and stakeholders to view and feedback on test results. Speech detected in your user tests is automatically converted to text, you can recruit participants in just a few clicks, and even integrate and automate user testing with many tools in your workflow via a GraphQL API.
https://marvelapp.com/user-testing
Introducing Anima 3.0 — High-Fidelity Prototyping in Sketch
Anima is a plugin that lets you build High-Fidelity Prototypes right within Sketch, including real inputs, video, or also your own HTML/CSS/JavaScript. You can then preview your prototype in a browser and create a shareable link that can be commented on.
https://medium.com/sketch-app-sources/introducing-anima-3-0-high-fidelity-prototyping-in-sketch-df8537b23508
8th Wall Release 10: New Year, New Product, New Interface
8th Wall is an augmented reality platform that makes it easy to build mobile AR content for the mobile web, iOS, and Android. The latest version of the platform features an AR camera with a drag-and-drop interface AR prototyping tool.
https://medium.com/8th-wall/release-10-new-year-new-product-new-interface-890a11643c6d
Better overrides, a brand new Fill Popover and faster prototyping in Sketch 53
The latest release of Sketch brings many useful improvements like, for example, better overrides for symbols, a totally redesigned Fill Popover adding named colors, color presets in libraries, HSL and more, and improved performance when working on complex prototypes.
https://blog.sketchapp.com/better-overrides-a-brand-new-fill-popover-and-faster-prototyping-in-sketch-53-160e6f760919
New Features in Adobe XD 16
The February 2019 release of XD brings a few useful enhancements to existing features. Most notably, you can now add narration using your microphone when you record a video of your prototype in preview mode and the new eyedropper shortcut makes changing colors much easier.
https://helpx.adobe.com/ca/xd/help/whats-new.html
CodeSandbox
CodeSandbox is an online editor that’s built for web application development and makes it easier to start a project by doing most of the configuration for you. You can then build, import or export your project and share a single URL. All this makes CodeSandbox a promising tool for spinning up an application prototype quickly.
https://codesandbox.io
Gimbalst — Prototype your navigation
This is nice: Copy your sitemap into Gimbalst, and it creates a fully interactive navigation prototype for you. You can then check if the labels fit and are clear or how the navigation works on mobile viewports.
https://gimbal.st/
