Low-fidelity vs. high-fidelity prototyping

How many of you recognise this scenario? You’ve been briefed by the client. You’ve conducted market research and competitor analysis. You’ve created personas, user journeys and even one or two experience maps. You’ve got a good idea of what needs to be built…

You’ve installed the latest version of Adobe XD on your MacBook. You’re looking forward to delivering a shiny interactive prototype ahead of schedule that will amaze your client, colleagues and friends. The Programme Manager is not on your case. The sun is out. Life is good…

You spend the next week crafting a prototype that, in your humble opinion, could be developed without a graphic designer even needing to touch it…

You’re presenting to the client this afternoon. You’ve put on your best shirt. You’re going to smash this one…

The moment arrives. You give a bit preamble about the 10 heuristics for UI design, cognitive load and hierarchy models. Drumroll…

Client: Is this the final version?

You: Er, no.

Client: I’m not sure about the colour. Our brand team won’t be happy.

You: Don’t worry about that – it can change.

Client: Why have you used Latin?

You: Um, it’s not real Latin.

Client: It’s not real Latin? What is it then?

You: It’s just placeholder text. Let me navigate to the Sign-Up screen.

Client: We can’t ask customers their age. Have you seen our GDPR policy?

You: Er, no. What did you think about the navigation mechanism? 

Client: I’m more concerned that you haven’t spoken with our data protection people.

You: We’ll take that as feedback… 

Client: I’m not sure about the colour…

You: Um…

And so, it continues…

Personally, I have been guilty of creating prototypes that demonstrate my layout and UI skills rather than actually understanding what User Experience the client, and more importantly, their customers, want. With the rise of superb high-fidelity tools like Adobe XD, InVision, Axure and Sketch, it is easy to get carried away with creating functional prototypes before spending time understanding what is actually required.

OK, I’m putting it out there. UXers don’t always know best. Sometimes, our clients and their customers know better than us. Maybe they just need an opportunity to tell us what they want.

Enter black Sharpies, squared paper and Post Its…

Why not run a workshop where the project stakeholders help create low-fidelity prototypes? When I say stakeholders I mean the client, people who are going to use the product and the development team – anyone that can give insight on how the product needs to be used.

The workshop will need to have some structure – I suggest concentrating on a few key user journeys. Each person should be given the kit outlined above and asked to sketch out each screen in the way they think works best, bearing in mind how the customer will use the product in the context of their user journey, i.e. the overarching customer need.

They should be quick, dirty and ugly (the sketches not the stakeholders). This process is about conveying requirements, ideas and process, not design or finesse. Use thick Sharpies so that the sketches don’t get too detailed. Use the Post Its to explain specific functionality if required.

Once the screens have been sketched, ask each person to explain their thinking to the group. The insight that you’ll get from a broad range of stakeholders will be invaluable. Concepts will be challenged. Potential pain points will come to the fore quickly. You might even solve a few usability problems along the way.

The great thing about sketching screens using Sharpies, squared paper and Posts It is that anyone can do it and it’s cheap. Furthermore, holding workshops like these will bring your stakeholders on the development journey with you – you’re more likely to get buy in and support later in the project. Sure, some of the ideas that you’ll get from stakeholders will be nonsensical, bad practice or too difficult to deliver, but at least you’ll have this feedback early so that you, as the expert, can consider, use or discount the feedback as you see fit.

Now you’ve got the feedback you need, you can then start to create some higher-fidelity prototypes for further testing and feedback. Personally, I would either re-sketch the screens using pen and paper based on what you’ve learnt, or, if you want to utilise a UI library, use something like Balsamiq Mockups in Sketch mode. Either way, make sure that it is clear to the client that the prototype is work in progress and not the final thing.

Once you’ve presented and got feedback on the higher-fidelity prototypes, you can knock yourself out on some high-fidelity greatness. By the time you present these to the client they’ll have bought into the product and how it will improve the UX for them and their customers. That’s the theory anyway.