Following on from our article on product conception (you might want to read that first), this article is about bridging the next gap in the development process.
That gap is the one between having a solidly documented idea and knowing what to build. This is where prototyping takes place.
When you’re prototyping you want to choose the methods and the tools that let you move the fastest, explore the most alternatives, and make the best decisions in the limited time available.
Read on as we cover the prototyping process.
Who are you prototyping for?
From the Lean Canvas that you would have completed as part of your product conception, you will know who your audience is, and within that audience, who your early adopters are.
Your early adopters are the group you’re prototyping for. And who are they? That’s where personas come in.
A persona represents the ideal member of your audience and is based on data gathered by interviewing your potential customers. It is used to direct high level decision making on product features. Instead of asking “What do we do next?”, personas enable you to ask “What would this customer want us to do next?”, reinforcing a focus on delivering value.
You can read more about personas and how to build them in this article and this article.
Personas are a mix of demographics — age, gender, socio-economic status, etc — and needs. Those needs are the ones your product is being built to meet. How your product fulfils those needs are customer journeys.
Customer journeys – trips through your app
A customer journey can be at its simplest the steps a customer goes through to use a feature of your app. For them, it might be finding their dream holiday. For your app, this might involve performing a search, scrolling through options, and tapping a heart icon.
Customer journeys map transactions, transactions that might be essential or emotionally important to your users, to the functional features of your app. This resonance, this emotional value, that is inherent and intrinsic to the use of your app can become invisible to you as cast it into interface elements and interactions. But it is vital to keep your user personas in focus and the needs that drive them to use your app.
From customer journey to screen flow
Finally the sketching can begin! Screen flows are paths touching multiple screens that users will take to complete their journeys. Each required screen needs to be sketched, considered, and re-sketched. The interface elements — displaying information and providing interaction — need to be selected and arranged. It is an iterative cycle of refinement and feedback. You don’t need to invent a new visual language. The more you follow best practices the faster you can move forward.
Finding best practices for your UX
Dribbble.com is a creative community where top designers from around the world share their work. You can check out current trends and best practices in product design and UX for inspiration right here.
A portion of your customer journey, and thus your screen flows, is going to be product hygiene — the basic features common across apps and expected by users. This includes things like authentication, notifications, etc. We discuss product hygiene in more detail in our article How thinking like Frankenstein will help your MVP.
Don’t be afraid to save time and headspace by finding designs that lay out these standard features and cribbing from them. Definitely don’t waste time “re-imagining” them. Save that for your core features.
Building your screen flows
Don’t jump onto the computer too fast. You can move faster sketching wireframes using pen and paper. It’s called paper prototyping. You can do it with blank paper and a pen or you can sketch in device templates you’ve printed out. But don’t go too far down the path of paper kits and cut-outs, etc. You want to sketch enough that you have stopped scratching your head when you think about how a particular feature will operate.
The bonus is that these paper sketches can be used as part of your initial user testing. Grab anyone unfamiliar with your screen layouts. Ask them to point where they would click, get them to tell you what they would do and what they think would happen. Use these tests to iterate on your sketches — you can redraw on the spot — and improve your design before taking it to the computer.
From paper to screen to interactive
Our tool of choice for building wireframes is Figma. It is a web-based, collaborative design and prototyping tool. The way it enables a fluid conversation between designers, users and programmers makes it an essential part of our recommended process.
Figma provides features that allow you to iterate on your UX. You can quickly throw together wireframes with active elements to create a clickable prototype. You use these along with your test users to refine the screen flows that represent your customer journeys.
At the same time, Figma provides the detailed control your designers need to create the branding and polish that will make new users want to download your app.
The design details — sizes, positions, colours — are all communicated cleanly by Figma from the designers to your developers. So when you’re ready to start coding your app it can happen as quickly as possibly.
Iterate, then iterate, then iterate some more
Figma’s ease of use and shareable prototypes means you can be reaching out for feedback as often as your users can stand it.
You’ve already chosen the key feature set your MVP will be launching with. You’ve got your product hygiene features locked down. The more you can test and troubleshoot and streamline your key features before launch the more you reduce the risk at launch.
Time to start building
You’ll know when your customer journeys are ready for the next step. There will be a shared clarity between you, the designers and the users you introduce to your clickable prototypes.
It’s an exciting point to reach. The end feels so close. You can see how your app will look. You have a taste of how it will function. You have users that want it. All that needs to be done now is the coding.
That’s a big step. Too big for this article. We’ll cover it next when we look at Agile development and the MVP.
Until then, if you have some napkin sketches of an idea you want to turn into a prototype, contact us to have a chat.
If you’re not at that stage yet, but you have a business idea, you might like to check out our article on product conception.
