IxDA @ TAB: Building intuitive products through prototyping

Joe Watts
By Joe Watts under Design 24 July 2017

The Interaction Design Association (IxDA) is a member-supported organisation dedicated to the discipline of interaction design. They host meetups globally, including a monthly London event focused on discussing interaction within design.

Having hosted an IxDA meetup in the past, we were honoured to host another at TAB HQ this July. In addition, we were excited to have our Head of Design, Iain McConchie, present his point of view on prototyping and the role it plays within TAB.

Along with Iain, Jay Meissner from Adobe XD, presented an incredibly exciting new design/prototyping tool from Adobe which could change the way we design and prototype our products.

Below, I share my key highlights from the evening.

What is a prototype and why do we use them?

Simply put, a prototype is a tool that helps to simulate a desired final outcome. Prototypes come in all shapes, sizes, and fidelities, from a paper sketch to a coded proof of concept. They are powerful because they allow us to learn fast, make changes and then create a new one to test again. In order for us to learn what’s working and what isn’t as quickly as possible, they need to be lightweight and fast to make.

Prototypes aim to remove questions about interactions, flow, and behaviour by allowing the whole team to experience an approximation of the final product. Even more importantly, prototypes allow us to test our assumptions with real users and make sure our designs are intuitive.

Apple's Chief Design Officer, Jony Ive, best describes why prototypes are important when he says “...a remarkable thing happens in the process... It’s when we give form to an abstract idea... it really galvanises and provides a focus to an entire team. It won’t become the final design... but what it does do is describe what we are trying to do.”

You can read up on how we approach prototyping at TAB in more detail in this useful post.

The tools of the trade: if you only have a hammer, everything is a nail.

There are several core prototyping tools and methods we use here at TAB, to get our designs into the hands of users as soon as possible to start improving them.

When exploring large flows and wanting to move quickly, we typically use Marvel. It’s incredibly fast and you can create a prototype in a matter of minutes using a plugin for Sketch.

Marvel does, however, lack subtlety, interaction, and animation. When we want to dig a little deeper into a specific detail, we often jump into Flinto or Principle. These tools allow for more specific interactions: for example if you wanted to finesse a screen transition or explore how an animated illustration might look.

Iain McConchie prototyping talk

Iain shared a number of questions you should ask yourself when considering the right prototyping tool to use, which include:

Two further questions could be:

Each of these questions and constraints logically lends themselves to a different tool.

When should you prototype? Introducing Shakira’s Law

You can probably remember Shakira’s catchy song ‘Whenever, Wherever’. Iain likens prototyping to the smash hit, and advises that there is no right or wrong time to prototype.

Iain’s final point is to ensure you are not looking at prototyping as an arbitrary item on an imagined checklist. Your aim is to learn something and make the appropriate changes. Leaving it too long between testing prototypes can allow you to become too attached to your product and resistant to feedback. As designers we need to be keeping feedback loops short, testing and learning incrementally to keep you close to what users want.

Adobe XD: takeaways from Jay Meissner’s talk

Adobe XD is positioned to change the way we not only design, but how we build prototypes. Currently, we design in Sketch and then upload to a prototyping tool like Marvel, whilst assets are exported to Zeplin. The ambition for Adobe XD it to empower us to do it all in one place.

Jay’s team started from scratch, looking at their favourite pieces of existing products. They wanted to build something modern, futureproof and allow people to design at the speed of thought. This means that the tool gets out of the designer's way, and allows them to instantly create what they are thinking, as opposed to wasting cognitive effort on how the tool works or waiting to share designs between several other tools.

Jay Meissner Adobe XD

I spoke with Iain after the event who’s spent some time using XD and he feels that it shows a lot of potential - it has a few new approaches to design tooling while still being intuitive and familiar. It’s fast to load and handles huge files extremely well, but it lacks some of the more compelling features from its competitors that has helped optimise our particular workflow over the last 12-18 months.

For quick iterations and low interaction prototypes it’s ideal, but, being part of our production process means it gets sidelined by Sketch and Zeplin. Aspects like collaboration and developer handoff are slated for inclusion, with the former being something that could really save time - so we’ll definitely continue to test it to see how it can fit into our main toolkit.

---

Like Joe, at The App Business, we want to ensure we are building the most intuitive products. It’s why we do what we do. To learn more about our approach to designing products people both trust and love,get in touch.