Imagining an interactive experience from a set of requirements, then refining that idea while examining it from many angles and views (e.g. business goals, usability, content and aesthetics), and eventually finalizing the design for development. That is the user experience (UX) design process in a nutshell.
Seeing a design through varied representations is necessary in the UX realm since designs are complex, dynamic and not visible all at once. In some instances, such as with voice interfaces, they’re not visible at all. So designers use many kinds of representations to “see” and analyze their creations during the iterative process. Those representations take a variety of forms, such as storyboards, maps and flows, journey maps, wireframes, and visual mockups.
But for UX designers, by far the most powerful representation is an interactive prototype. It’s all about understanding the experience before you commit to building it.
The Value of Interactive Prototypes
By “prototype” I mean something that simulates the design’s interactivity — including all of the various screens and states that occur during that interactivity. The higher fidelity a prototype has — meaning how true the prototype is to the interface’s final form -- the more useful it is for evaluating the design and furthering any needed refinements.
But not all types of interactive products benefit equally from high-fidelity prototypes. This is because of two main reasons: 1. The process or style of deployment and 2. The delivery platform both make a difference. For instance, websites and web apps stand in direct contrast with embedded and IoT devices in terms of both deployment style and delivery platform.
- Websites are usually delivered progressively with frequent updates while embedded devices are delivered once, often for the life of the device. That means designers of embedded and IoT devices have only one shot at getting it right before they deploy to customers, while web designers can keep refining ad finitum as they continually deploy to customers (commonly referred to as “continuous beta”).
- Websites and web apps run on general purpose platforms with known contexts of use, and embedded and IoT devices run on often-unique platforms in novel contexts of use. General purpose platforms, such as laptops, tablets and phones, have already had their context of use issues solved by the device designers. Lots of research and design has already gone into making sure that the ways that you can use your phone are ergonomically robust.
This differs from embedded and IoT devices, which have unique sizes, shapes and placements, such as a wall in a surgery suite or a dashboard in a car. Unlike web, mobile and desktop apps, embedded and IoT devices require extra design and user testing to confirm that the ergonomics of interacting with the device (e.g. height, size, and lighting) have solid usability.
Aren’t Designers Good at Imagining Unique Scenarios?
Although designers are practiced in pre-visualizing design ideas, across the spectrum of UX designers the ability to pre-visualize varies considerably. In fact, very few designers are able to robustly pre-visualize an interactive experience in all of its detail.
For any designer, it’s difficult to make all the detailed design decisions when you can’t “see” all the moving parts together in an interactive context. Illustrating this point, recently a designer expressed to me how different their screen designs appeared when interactive and in the context of dynamically navigating between screens compared to how they looked as still images.
And we haven’t yet touched on the topic of stakeholders. Getting sign off from product owners on significant design decisions using what are truly abstract representations of an interactive experience, such as wireframes and static images, can be fraught with misunderstandings. That’s why high-fidelity prototypes are essential.
Without them, issues may only be discovered after code is written when it’s costly to make changes. Also, user testing with high-fidelity prototypes can help designers identify more detailed interaction problems that might be missed using low-fidelity testing.
Improving the Hand-off to Developers
Then there is the topic of designer-to-developer hand-off. Often, this process is time consuming and many details get lost in translation and are never recovered, leading to a lower quality and less-polished product. If designers could efficiently create a high-fidelity prototype that developers can use to extract detailed data, such as a speed of a transition between screens or the acceleration on a swipe gesture, finished product results would be superior.
But good prototyping tools are scarce, and most are time consuming to use or limited in their capability. Why is this the case? There are two main reasons: First, by definition prototyping tools pack a lot of functionality; and second, in most cases they need to be platform-specific. That is, they need to behave consistently with, and potentially live on, the platform for which you are designing. That immediately limits most prototyping tools to a specific design community segment.
As you might guess, there are many more website, mobile and desktop prototyping tools than there are for embedded or IoT. To help in this area we’ve developed our own prototyping tools in-house. Greenhouse by ICS is a prototyping environment specifically designed for embedded touchscreen apps.
With Greenhouse we’re able to create high-fidelity prototypes by importing Figma designs, thus saving the time and expense of recreating a design. It also allows us to add more interactivity than Figma to create a truly interactive prototype. (Another advantage is that the code that Greenhouse generates for the prototype is usable, not throwaway, as is the case with most prototyping tools.)
The Bottom Line
High-fidelity prototypes are essential in the UX design process of embedded and IoT devices because they reduce development risk, increase communication between designers and developers, and designers and stakeholders; and lead to significantly improved design outcomes.