Let's Talk

Why we built Noodl

Building prototypes, more than any other single activity, is what defines design in the digital age. One of Topp’s deepest beliefs — which we share with many others — is that rapidly iterated prototypes are essential to designing products and services with real impact.

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 designer’s preference for prototypes over theories is probably the main reason why so many 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, which means it’s 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 looksketchy, 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 the level of finish they’ve come to expect from their own daily digital interactions 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 feedback from their clients 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; in other words, 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.

‍LEFT: Noodl’s node-based interface. RIGHT: Updates are reflected immediately in the prototype app.

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 it’s 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.

‍Hacking an Ikea nightlight to control color and brightness using a custom smartphone app.

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.

‍Using Noodl to prototype an in-dash touchscreen UI for Ford.

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: 

Recent client projects that used Noodl for prototyping and design development:

h1

h2

h3

h4

h5
h6

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

  • hej
  • dig
I am a block quote

Thank you! Your download should begin shortly.
Oops! Something went wrong while submitting the form
Thank you! Your download should begin shortly.
Oops! Something went wrong while submitting the form
When you enter your email address you become a friend of Topp. A group we send occasional emails to. We won't be offended if you unsubscribe, but love if you stuck around.

Topp

Swedish design & innovation studio

To learn more about how we use Noodl to make our clients more innovative, drop us a line:

hello@topp.se
Thank you! Your submission has been received!