Issue 22 – October 2019
Hot potatoes, using the platform, effective design critiques, accessible color systems, and a guide to UX research.
Hello, my fellow prototypers! I am currently reading a book that has been on my list (and on my bookshelf) for far too long: Daniel Kahneman’s seminal work “Thinking, fast and slow.” The book, which has been an international best-seller, provides an overview of the research that Nobel laureate Kahneman conducted over several decades in the field of cognitive psychology. Based on the central thesis that our mind has two distinct areas of thought – one that is fast, instinctive, and emotional, and one that is slower and more logical – Kahneman shares a wide range of cognitive biases that we all fall victim to. Besides being a fascinating read, knowing of those biases can also be super useful for our work as designers and creators. One of the most striking biases in the book is the overconfidence effect: We all tend to overestimate how much we understand about the world or a given problem and make overconfident judgements and decisions based on causality where none exists. When there is a lack of information or causality, our fast, instinctive mind simply constructs a story that seems plausible and we then confidently believe it, also because checking this story for plausibility would require too much work by our lazy, logical mind. As designers, we are not immune to this, either. We tend to make decisions based on assumptions about how people will use our interfaces or we even go with our gut, referring to our experience. If you know of the overconfidence effect, though, it becomes clear that we should not blindly trust our intuition or even our most confident judgements. Even if we think of ourselves as seasoned professionals with years of experience, we should still always check our assumptions and base our decisions on as many bits of information as possible to minimize bias. Whether you generate that data with prototyping, user testing, interviews, or other forms of research, is up to you. But always bear in mind that confidence alone is no measure of accuracy. You might still be wrong.
As always: If you enjoy this newsletter, please consider sharing it with a person who might appreciate it, too. If you have any feedback or want to share an interesting link, just write an email. I love to hear from you. Thank you so much! 🤗
– Have a great day! Matthias
Links
The Hot Potato Process
Handoff between design and development is still a much-discussed topic and I also had my fair share of projects in the past where a bad handoff caused a lot of frustration on both sides of the “canyon“. And while processes have changed a lot in recent years towards more collaboration, there is still a noticeable number of designers who simply hand off comps to developers and think their work is done. Dan Mall and Brad Frost are vocal proponents of a workflow they call “The Hot Potato Process,” where ideas and artifacts are continuously passed back and forth from design to development and back again. A process that can involve a lot of prototyping, too.
http://danmall.me/articles/hot-potato-process/
Using the Platform
Part of the huge success of the Web as a platform has always been its permanence and stability, while at the same time allowing for change and experimentation. In this wonderful piece, Tim Kadlec reminds us, that this stability of the Web is by design and that a lot of thought and consideration goes into what becomes a standard and what doesn’t. Security, performance, and accessibility are inherent qualities of the platform, so Tim suggests that you should “use the platform until you can’t, then augment what’s missing.” And what could be better suited to explore how to use the platform than a little HTML prototype?
https://timkadlec.com/remembers/2019-10-21-using-the-platform/
Critique your shortcut to better designs
Introducing regular structured critique to your design process is one of the keys to improving the design quality of a team and growing the design literacy of whole organizations. But to have the desired effect, critiques have to be done right. So, in this post on the Clearleft blog, Chris How explains how to run a productive design critique and make it part of your practice.
https://clearleft.com/posts/critique-your-shortcut-to-better-designs
Introducing Design Critiques to large UX organizations
How design critiques can work in a larger UX organization is the focus of this article by Jan Kiekeben, Product Designer at XING, where about 60 UX professionals with different backgrounds regularly exchange their ideas and discuss UX work intensively. Jan shares lessons learned from implementing their very own formal design critique format and, for example, why specifying what type of feedback you want as a result of the critique is so important.
https://medium.com/xing-design/introducing-design-critiques-to-large-ux-organizations-53ea8ba78e5
To Design Better Products, Write Better UX Copy
Words are vital elements of digital products, especially on the Web. Nina Feinberg, a senior product designer at The New York Times, explains why considering language at the start of the design process can improve the quality of user experiences and shares a few exercises you can use to make sure that you strike the right tone and communicate effectively.
https://open.nytimes.com/to-design-better-products-consider-the-language-f17b923f8bae
Designing accessible color systems
Because good contrast makes it easier for people with visual impairments to use products, the team at Stripe wanted to improve the color contrast of their interfaces. And because, as Daryl Koopersmith and Wilson Miner share in this post, none of the existing tools helped them define colors that met the WCAG contrast guidelines while at the same time still being the Stripe colors, they set out to prototype and shape their own color tool that would help them define accessible colors in the perceptually uniform CIELAB color space.
GV’s Guide to UX Research for Startups
Research is essential if you want to learn more about your customers and create products and interfaces that work. Google Ventures has helped hundreds of startups use UX research and in this guide, Michael Margolis, UX Research Partner at GV, shares an extensive list of lessons and articles on the topic. Whether you want to learn more about why research is important, want to know how to plan and conduct user interviews, or if you would like to test prototypes with users and evaluate the results – this guide is for you.
https://library.gv.com/gv-guide-to-uxresearch-for-startups-b6d0c8ac81b3
Prototyping for innovation
The message of this article by Lulo is as true as it is powerful: You should see prototyping as a tool, not as a mere phase in the process. Prototyping is “something you do continuously to discover, learn, test and even pilot ideas”. Throughout the whole design process, prototyping can be used to visualize concepts, test hypotheses, and to test execution.
https://medium.com/design-thoughts-case-studies/prototyping-for-innovation-2983421b64cb
Videos
Mozilla Developer YouTube Channel
Whether you are a designer who wants to know why CSS is so weird, or you are a developer who wants to learn CSS Grid or how to improve image loading, the new Mozilla Developer YouTube channel got you covered. Miriam Suzanne and Jen Simmons are on fire bringing you the latest and greatest about building websites in the browser. And there is much more to come, like a series on the “Cascade”, for example.
https://www.youtube.com/channel/UCh5UlGiu9d6LegIeUCW4N1w/
Tools
November 2019 Release of Adobe XD: Coediting, Document History, Component States, and More Unveiled at Adobe MAX
Yes, this is news from November already, and yes, there was an Adobe XD release in October, too, that brought, for example, blend modes and improved selection of elements. But the latest XD release dropped on Monday and it is simply too huge to wait until next month to spread the news. So here you go: For their impressive Adobe MAX release, the team added major new features that will change how people work with XD. It starts with component states which can also be auto-animated and, yes, hover interactions. But beyond that, you are now able to work collaboratively in the same document in real-time (Coediting), you can access a document’s version history, and even name the versions to keep track of milestones. The Plugin Manager also received a complete overhaul and it is now much easier to find great plugins and app integrations.
https://theblog.adobe.com/xd-november-2019-update-coediting-more
ProtoPie for Teams: Collaborate More Efficiently, Prototype Better Together
The ProtoPie team has also been busy and just released the new ProtoPie for Teams, which includes useful collaboration features like invites, link sharing, commenting, and version history. Also very interesting: The new ProtoPie 4.1 now supports Lottie animations and a full-screen preview window.
https://blog.protopie.io/protopie-for-teams-collaborate-more-efficiently-prototype-better-together-176be696351e
Sketch 59 — New Typography Features & Smart Layout Improvements
The October update of Sketch brings new Typography features like variable font support and more OpenType features (e.g. ligatures and contextual alternates) as well as improvements to the Smart Layout feature introduced in Sketch 58.
https://medium.com/sketch-app-sources/sketch-59-new-typography-features-smart-layout-improvements-4ef2492cb396
BuilderX
“Beautiful, Readable & Production-ready Code – Designers and Developers on one platform”, that’s the bold promise of BuilderX, a new browser-based design tool that codes React Native & React for you.
https://builderx.io/
placeholder.pics
Placeholder.pics is a free service that lets you quickly include placeholder pictures into your HTML prototypes via a URL. What’s nice about it is that all images are served up as sub-kilobyte, fully optimized SVGs and you can adjust properties like size, color, or labels.
https://placeholder.pics