A prototype is an early iteration of a solution that can take multiple forms and that is used to test concepts and gather learnings. In this post, I will be covering how we use prototypes at TAB – and how they benefit us, and our clients.
A lot of our projects come from companies that are approaching their mobile transformation for the first time. So, it is important for us to use prototyping to help reduce risk and to test early solutions against user needs.
With this in mind, we embed prototyping at the core of our design process. This consists of five main phases: Empathise, Ideate, Create, Evaluate and Build. Check out more on our design process in this post.
While we use prototyping in each phase of the process, we believe it plays a particularly key role during the Create and Evaluate phases. Prototyping at these stages provides a way of quickly getting to an interactive solution that we, our clients, and prospective users can play with and give direct feedback on. This helps us to understand if we are building the right thing, but prototyping also has yet another role to play, here.
App stores for both iOS and Android are a crowded marketplace, with over 1.5 million apps as of July 2015 alone on Apple’s App Store. This means it is not enough to just have something that functionally works: it has to delight, and it has to reflect users’ increasingly high digital expectations – hopefully even surpassing them with detailed, original design.
With this in mind, prototyping is a really useful way for us to push and test innovative design solutions, with visually appealing feedback animations that can engage users from their very first session.
Creating valuable, effective prototypes
Before launching into creating prototypes, it is important to define first what we want to build for each, in accordance with what needs to be tested. We like to prototype across each phase of the products we design where applicable, but we do it in stages – defining at each point the appropriate fidelity and what features should take priority.
It is also important to think about where you want to focus attention in order to get the data/feedback you need. For example, it is common to use low fidelity sketches to test basic navigation and the information hierarchy of a product early. These simple, diagrammatic forms keep us focused on the structure and logic of a project, and prevent us from focusing on other, and at that point irrelevant, aspects – like colour, or font. On the other hand, it is important to use higher fidelity prototypes when learnings are to be gathered on emotional feedback – these can include branding or choice of visual elements, like photography and colour usage.
Depending on the fidelity needed, we use a variety of tools to create the right prototype.
The most common ones being:
- Paper sketches + POP app for low fidelity prototypes.
- Marvel and Invision for interactive medium to high fidelity prototypes.
- Flinto, Framer and After Effects for interactions and custom animations.
- Custom: Sometimes you just need to do something unique that requires our development team to get involved and help create a custom prototype coded in the native platform we are targeting.
The list above isn’t set in stone. We do swap and adjust our tools regularly, depending on what we need and what is available. The design team at TAB takes an active role in the wider design community, trying to improve and evolve the tools at our disposal. As a result, we are constantly looking for the best options in the market, and our list of tools is continually updated to reflect this. We are also involved with a number early access communities, where we get to test and shape the future of existing and upcoming tools.
Validation and quick iteration
By quickly creating multiple prototypes of varying fidelity, we begin to get a feel for what works and what doesn’t. This gives us the opportunity to discard some concepts, and iterate on others. It also provides us with a chance to innovate, by pushing animations and playing with new interactions.
We then use the more promising prototypes and set out to test them with real users – preferably in the wild, or ‘real world’ as opposed to a lab environment. This is because we like to test our products in conditions as close to ‘live’ as possible so that feedback is the most accurate. We recruit users from relevant target groups, or by tapping into existing user panels that clients have access to.
Before we start, we outline what we want to test. This includes an approach for how we will run user sessions, including a technical set up, a set of questions to ask consistently, and who is in attendance to conduct the interviews and take notes on observations. Our assumptions are then tested and data is collected. This data can consist of a variety of outputs, from notes to video recordings, and we then digest and interpret the findings to discover the most relevant user insights.
Working according to our Agile methodology ensures we keep and maintain a short feedback loop that we repeat as often as we need to efficiently inform the design and define the next set of business and interface changes. Cumulatively, this allows our team and the client to have a shared understanding that facilitates faster, leaner decision-making and a far better quality product over all.
From our experience
We have been using prototypes across our projects since we first opened our doors. Along the way, we have gathered many valuable stories on how prototypes can best be used to inform important business decisions and guide teams to build the right thing for both companies and their users.
Without these prototypes – tested out in the wild with users – it would have been easy to miss pain points and overlook opportunities, particularly if we had simply stopped at static requirement documents.
A pitfall to avoid, however, is becoming too attached to specific visual styles, or anything that is not part of the core features of a prototype. As we test it with users, especially during the first couple of rounds, it is common for a lot of things to be moved around, and for entire features to be completely redesigned. If you are too attached to a style or a feature, you will fail to really listen to what your users are telling you.
Therefore, keeping a clean visual design that allows users to focus on completing tasks is vitally important. With later prototypes, where you might be testing a more emotional response to a product’s brand, then – and only then – should the visual design take centre stage.
Prototypes are highly effective communication tools. They provide a cost effective way of transforming theory into practice so that features and interactions can be put into people’s hands and iterated on, at a low cost. Product Owners can then make informed decisions on what should be prioritised for a product’s first release or MVP (see our article on that).
As a user testing tool, we have observed time after time the powerful reactions we get from people who are able to use their own phones, and interact with early concepts. In fact, when using high fidelity prototypes, we are able to simulate entire ecosystems leaving some users thinking they were using ‘the real thing’.
And don’t forget that not only are prototypes critical for gathering user insight, they can also be used highly effectively to align expectations across the business, and inform stakeholders of why a certain decision on a project is the better option, moving forward.
—
If you are thinking about creating a new product, or moving to the next iteration of your current one, then prototyping hopefully is – and definitely should – play a big part. Let us know how your own process is developing by dropping us a line, or you can tweet me directly @h1brd.
