Issue 21 – September 2019
A scientific method for UX prototyping, a guide to experimenting, machine learning with Tensorflow.js, and designing for dark mode.
Hi! I recently stumbled upon a quote by Tom Wujec, an author and adjunct professor at Singularity University: “Prototyping is the conversation you have with your ideas.” I couldn’t agree more. In creative fields like game design or also (physical) product design, having this conversation with your ideas is a proven strategy: Got an idea for a game with a novel way of controlling the movement of a character? Build a low-fidelity prototype to test how the gameplay might feel! Got an idea for applying a physical sensor in a certain way? Build a shitty prototype to test how it works in reality. As soon as you create a prototype, your idea suddenly becomes visible, tangible, testable – and you start to think in new ways about your design. Just like a sculptor who constantly checks the block of marble after each hammer stroke, you start to notice the things that don’t work yet or somehow don’t feel right about your solution. Fellow team members and users can get their hands on the prototype, too, and can provide valuable feedback. The prototype has become an extension of your mind, and with that, the cycle of iteratively improving your idea has begun.
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 me an email. I love to hear from you. Thank you so much! 🤗
– Happy prototyping! Matthias
Links
A Scientific Method for Impactful UX Prototyping
While iterative design and prototyping can be the key to improving a design over time, the process of trial and error alone often isn’t enough to come to a great solution. Prototyping isn’t a magical guarantee for improvement, it is work and therefore, a more structured approach can help you to decide what to focus on and to identify when your prototyping efforts were successful. Derived from the basic scientific method and based on a simple equation of what constitutes a successful prototype, Mike Dodge explains his idea of a framework for impactful UX prototyping and decision making.
https://modus.medium.com/a-scientific-method-for-impactful-ux-prototyping-9ab6c7a1dcde
A guide to experimenting and prototyping
Experimenting and prototyping are key to innovation. Through a well-designed experiment, we can think differently, test our assumptions, and gain new insights that lead to better solutions. Yet many organizations shy away from experimenting because they associate experimentation with ambiguity, risk, and failure. In this great piece for Cooper Professional Education, Kelly Lai, a Lead Experience Designer at Designit Sydney, explains why experimenting and prototyping can help your team avoid costly mistakes and how you can approach your experiments in the right way – whether you are creating a digital product, a non-digital product, or a service.
https://www.cooper.com/journal/2019/09/a-guide-to-experimenting-and-prototyping/
Tools for Unmoderated Usability Testing
Testing your designs with real users is super important if you want to know whether you are on track of really solving the right problem and if your solution is easy to use and understand. But where to start? Unmoderated remote usability testing is a popular method and there are many platforms out there that make your life as a designer or researcher much easier. But the features of the different tools are often quite similar and it can be hard to decide which tool best suits your needs. In this article for the Nielsen Norman Group, Kathryn Whitenton compares several tools and also explains why the decision for the right tool mostly depends on the type of data that you need to collect.
https://www.nngroup.com/articles/unmoderated-user-testing-tools/
Machine Learning For Front-End Developers With Tensorflow.js
Not a day goes by, at least in my perception, without some sort of news around AI and machine learning. It might seem as if machine learning is still a futuristic technology, yet it is already astonishingly ubiquitous. From the camera in your smartphone to assistive technology in cars to spam detection for social networks and the taste-predicting skills of Netflix – machine learning technology is already all around us. So if you think that the time is right to start learning about machine learning, what it is and how you can try it and use it yourself, for example in a first rough prototype, this article by Charlie Gerard is for you. Charlie covers the three main features currently available using Tensorflow.js and also talks about the limits of using machine learning in the frontend.
https://www.smashingmagazine.com/2019/09/machine-learning-front-end-developers-tensorflowjs/
Turn the lights off — designing for dark mode 🌌🌒
Dark modes are all the rage at the moment but there is more to them than just the good looks. Especially in low-light situations, dark interface color schemes are easier on the eyes and they also save battery life. Designing a dark UI, however, does not mean simply inverting the colors and turning white into black. There is a lot to consider, as Briandito Priambodo shows in this article, and prototyping can help you to test the results on real devices and with the people who will use your product.
https://uxdesign.cc/turn-the-lights-off-designing-the-dark-mode-of-wego-ios-app-6c4967e59dd6
Why version history is not version control
“We’re no longer just designing screens. We’re actively building products, together.” The way we design digital products has changed a lot over the past few years. One increasingly popular way of working is based on an idea borrowed from software development: A workflow based on the concept of branches and commits. In this post, Josh Brewer and Kevin Smith, co-founders of Abstract, share how such a branch-based open design workflow can work and how version control can bring structure, clarity, and better collaboration to formerly messy workflows of teams and whole organizations.
https://www.abstract.com/blog/version-history-version-control/
Podcasts
Sounds Like Good Design
Sound is becoming increasingly important in digital user interfaces and can be key to designing successful experiences, but doing sound right is not that easy. In this excellent episode of his podcast Wireframe, Khoi Vinh speaks to sound designer Connor Moore and psychoacoustic expert Susan Rogers on the best ways to design for the ear and how the construction of certain sounds creates different effects in our brains.
https://creative.gimletmedia.com/shows/wireframe/49h6xv/sounds-like-good-design
Rapid Prototyping – Philip Pantelides on The Product Experience
Philip Pantelides, Head of Product for Premium Services at Cookpad, is on a mission to make everyday cooking fun. He and his small, cross-functional team have global and fairly complex problems to solve, and they use prototyping as a way to navigate their problem space with reduced risk. In this podcast episode, Philip shares how prototypes and demos allow the team to focus on moving to the next version of the product quickly and test the riskiest assumptions first.
https://www.mindtheproduct.com/2019/09/rapid-prototyping-philip-pantelides-on-the-product-experience/
Tools
Sketch: Introducing Smart Layout
With Sketch 58, the team added a new feature that allows you to create content-aware layout components in Sketch: “Smart Layout allows you to maintain the padding and spacing between layers in a Symbol when editing its overrides. Once you’ve set up Smart Layout, a Symbol instance will automatically resize when its overrides are changed.”
https://www.sketch.com/features/smart-layout
Adobe XD in 2019: How Far We’ve Come and Where We’re Going
Andrew Shorten, Senior Director of Product Management for UX Design at Adobe, reflects on some of the more recent feature additions to Adobe XD and provides insights into the future roadmap of the platform, including upcoming features like support for component states (including Auto-Animate), a new marketplace experience for plugins, and real-time collaboration, also known as Coediting.
https://theblog.adobe.com/xd-roadmap-future-plans-recent-features/
Figma: Designing for top feature requests, like Smart Animate
Other prototyping tools like Adobe XD already have a similar feature, now the Figma team added “Smart Animate” to their software, too. Smart Animate automatically animates similar objects and improves existing transitions. On top of that, Figma now also supports a simple drag gesture.
https://www.figma.com/blog/announcing-smart-animate-and-advanced-transitions/
The Official Place to Learn Framer
The Framer team just updated the Framer website with a new Learn section full of videos, written guides, and more. Courses, lessons, and how-to guides cover a wide range of topics, from a 101 crash course to mobile prototyping fundamentals to designing with APIs.
https://www.framer.com/learn/
Advanced Prototyping with ProtoPie
Meng To has published a new course on Designcode.io about advanced prototyping with ProtoPie. You’ll learn how to create high-fidelity prototypes with animations and variables, formulas, conditions, and sensors.
https://designcode.io/protopie-course
UI Bakery
UI Bakery is a new component-based prototyping tool that lets you build the front-end for your project using a drag-and-drop builder. It uses machine learning to create adjust the visual styles of your interface and generates Angular front-end code.
https://uibakery.io/
Generated Photos
You might have heard of thispersondoesnotexist.com, a website that shows images of faces generated by NVIDIA’s machine learning generator architecture StyleGAN. Now, a team of about 20 AI and photography professionals used the same GAN to generate 100,000 (quite symmetrical) faces – free to download for your next prototype.
https://generated.photos
Pitch
Christian Reber and a few other former Wunderlist team members just launched the private beta of their new tool Pitch. Pitch is a new kind of presentation software “with superpowers that you’ve always wanted in a modern tool. Smart formatting and custom-crafted templates make designing beautiful slides feel like magic. Collaboration features help you stay up-to-date on progress, reuse and remix the best content from your team and stay on brand.“
https://pitch.com/news/announcing-our-limited-preview-beta-and-new-funding