The genius of modern, digitally-connected products is that they’re malleable: able to be formed, reformed and modified until they’re as good as we can make them. This flexibility, and the fact that most designers now prefer prototypes to theories is probably the main reason why product and service experiences have gotten dramatically better over the past few years (example: Do you still use Netscape? How about a Zune? There you go.).
How we build prototypes is still a subject of much debate though. Some designers do it in code, cobbling bits of Javascript and Python together with widely available web services to make something that gets the idea across, resulting in something fairly “real”, but at a considerable cost in time and effort. This approach also tends to drive designs down familiar tracks. Other designers prefer hacking on graphics-oriented programs like Photoshop, Illustrator or even Keynote, using clickable overlays to simulate interactive experiences — this gets you quickly to a convincing visual, but limits how “smart” the prototype can be.
At the low-fi end of the spectrum, there’s also paper prototyping, which is just what it sounds like: a combination of printouts, hand sketches and Post-it notes that simulate an intended digital workflow. It’s very fast and very simple, but demands a certain suspension of disbelief on the part of the test user, and it’s not great for, say, a travel app that pulls in live data about flight schedules.
Which brings us to the dedicated prototyping platforms, of which there are dozens, like Axure, Sketch, InVision and Omnigraffle, to name a few. These have shallow-to-moderate learning curves, a decent amount of computing intelligence, and enough flexibility to let designers create the thing that they want, rather than the thing that the tool wants them to make.
So why don’t we use one of those?
Topp is only a five years old as a studio, but a few of our designers have spent nearly half that time creating a custom tool called Noodl. In the current parlance of the UX design world, Noodl is a Digital Experience Design Platform — essentially, a code-free way of creating digital apps and IoT experiences on a wide range of devices.
You can download a public version of it here, along with a variety of tutorials and other information, and thousands of design teams have done just that, from Samsung to Playstation to Amazon, and plenty of university-level design courses as well. But despite this level of access, Noodl was never primarily intended as a standalone product.
Mostly, we made it for ourselves.
More fidelity, more speed
The first thing to know about Noodl is that it outputs at real-world fidelity, so even five minutes of hooking up boxes will give you something that looks and works like it could’ve come off the shelf, or from the App Store.
This is different from many UX prototyping tools, which tend to work at the wireframe level — they look great in a purely visual sense, but there’s no mistaking them for the real thing in terms of interactive experience.
There’s a school of thought that says you should match the fidelity of the prototype to the maturity of the concept; that early experiments should look sketchy, to keep clients and test users from obsessing over minor details. But people who use digital tools — which is to say, nearly everyone you know — are now so accustomed to them that low-fidelity simulations create too much cognitive dissonance. To the tech-savvy user, a wireframe is so different from real life that it’s impossible to evaluate the design on its own merits.
In our experience, there are two main reasons why designers still use sketchy prototypes in this day and age:
- to get client feedback at the right level of detail
- because they don’t have the tools to iterate rapidly at high fidelity
The answer to the first reason is to learn how to talk to your clients— it’s a fundamental part of the modern design skillset.
The second is what drove us to create Noodl.
Live data, instant updates
The main purpose of Noodl is to shorten the distance between a concept and a convincing prototype. So besides generating visual output that’s nearly indistinguishable from a market-ready product, it also handles updates and external data in a rapid, seamless way.
Noodl is designed to refresh without needing to recompile: it updates immediately when you change or add to your prototype. This might sound like a small detail, but in practice it means there’s nothing to prevent you from tweaking the location of a button or the speed of a transition a dozen times in rapid succession, just to see how that shifts the experience.
Noodl prototypes can also take live data as an input: real-time flight data, live weather or traffic information, feeds from a light or motion sensor, or just about anything else that can be accessed through the internet. All this happens without writing code, so real data is as quick to plug in as static (i.e. old or faked) data. This effectively turns data into a design material — as malleable as text, state or time.
If you noticed a recurring theme of fast, fast, fast iteration, you’re correct, and not just because we want to get to our deliverables more rapidly. One of the hard truths of modern UX design is that good user experience correlates strongly with rapid iteration: the quicker you can try out alternate approaches, the more likely you are to find something truly great — and to go through the rounds of testing, feedback and trial-and-error it takes to make it really work.
All of the platforms
Beyond iterative design, UX prototypes serve two essential functions outside of the studio: testing and communication. When we test out designs, we’re asking target users to play with the prototype so we can watch how they use it, and ask them questions about their experience. This works OK on a simulated interface (on the designer’s laptop, for example), but it’s far more accurate and useful in a real world context.
This is why we designed Noodl to work on any platform that supports a modern web browser — smartphones and tablets obviously, but also wearable devices, connected home devices, and most of what falls under the heading of Internet of Things (IoT). Wearables and IoT in particular gain much of their complexity from the physical circumstances in which they’re used, so testing on your wrist or in your kitchen (as opposed to in a lab) can make a huge difference in how reliable your results are.
This also helps get us away from the assumption that UX needs to be screen-based. Noodl plays well with physical computing platforms like Arduino Cloud and AWS IoT, and messaging protocols like MQTT, making it relatively easy to prototype interactions based on gesture, light, motion or sound. This may sound esoteric, but in practice it means that it’s just as easy to make a Noodl prototype glow, vibrate, ping or activate a servo as to make it display some text on a smartphone.
Shareable prototypes can also completely transform the process of communicating design solutions to clients. The “black box” model of innovation — client hands down a brief, then waits for smart people wearing interesting eyewear to come back with a World-Changing Innovation — remains seductive despite the fact that it hardly ever works. Instead, we’ve found that design is most effective when stakeholders are kept tightly in the loop, and that means sharing prototypes. So we designed Noodl in such a way that clients can start playing with a live prototype just by clicking a link.
This has the obvious benefits of tightening the feedback loop and building trust, but an even bigger advantage is how it helps a solution within the organization. The biggest threat to a new design isn’t that it fails to work, but that it fails to get the necessary buy-in from those who weren’t involved in the design process. Explaining the value of an unfamiliar concept is supremely difficult; a working prototype that can be quickly shared and experienced makes the case for you.
We built it, we can expand it
There’s a wide gap between a new feature that’s good enough for private experimentation and one that’s ready for the entire world, and a lot of great design work can happen in that gap. One of the great advantages to working with a tool you built is the ability change the tool to fit your current project. In the past few months, we’ve tweaked Noodl to incorporate HTML, and to package multiple prototypes into a single interface for comparative review, and it’s almost certain we’ll tweak it again for the next project.
If you download the Community Version of Noodl (new release coming soon!), you’ll notice that some of these features aren’t in there, and that’s by design. We’re thrilled that so many have embraced it as a tool, and we love seeing what they build with it — but we’ve also made a conscious decision to focus on Noodl as a platform that expands what we can do for our clients, rather than support it as a standalone product.
Some short videos of different Noodl integrations:
- Combining Noodl with VR to test an in-car UI
- Using Noodl to modify chatbots
- Combining Noodl with Unity3D and Amazon Alexa to control 3D animations using voice
Recent client projects that used Noodl for prototyping and design development:
- A UX platform for Samsung’s Gear Fit line of wearables
- A more universal, accessible travel app for the Stockholm Public Transportation Authority (SL)
- An integrated vision of the future home kitchen experience for Miele
If you’re interested in learning more:
- The case for making your own design tools, an essay by by Roger Andersson Reimer, our Head of Design, explaining the philosophy of tool-making that underlies Noodl, and has helped define Topp as a studio since it was founded in 2013
