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.”
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.