Prototyping is great for nailing down ideas fast - but how can it be used help your website achieve better conversion rates?
In this article:
- What is prototyping?
- Why is prototyping useful?
- The prototyping process
- Collaboration tools
Once upon a time, web designers had a limited set of tools. Heavy-duty software like Photoshop and Illustrator made design a laborious process. And when it came to sketching basic ideas, they were at a disadvantage, lacking suitable resources.
Nowadays, the process of designing a website is much more methodical. The best digital experiences are the result of well-planned research. Based on this info, designers will spend time coming up with rough ideas in a process known as prototyping.
In this guide, we’re going to talk about how rapid prototyping can help you optimise conversion rates by finding the optimal version of your website or app before the development stage.
What is prototyping?
In the world of website and application design, prototyping is a way of creating an interactive demo of a website or application.
In fact, it doesn’t always have to be interactive - many prototypes start with the humble pen & paper. But increasingly UX designers use tools that allow them quickly create something resembling a functioning website.
It’s the same thing car manufacturers do when creating a new car. They start with sketches, then build several prototypes, see how they all look, test them for drivability and safety - and most importantly they find out what customers think.
Why is prototyping useful?
Beyond the obvious fact that prototyping helps you come up with ideas, there are several benefits to using this initial process compared with diving straight in and designing the finished product.
- Focus on functionality over look & feel - you can decide how everything should work without letting the visual design influence your decisions
- Saves time and money - getting your rough ideas down early can help you avoid making bad design decisions later, which can be expensive to fix
- Helps you involve other people in the process - stakeholders often like to have a say in the design, and may think of something you haven’t.
The prototyping process
1) Start with user research
All good websites and app designers understand their audience. A little bit of research can go a long way.
You don’t have to know every last thing about your users, but at the very least you should have an idea of:
- Who they are (age, location, gender, interests, etc.)
- What they are doing on your site or app
This knowledge can help you to really focus your efforts on the people who matter most to your business.
If you’re redesigning or updating an existing product, you can use Analytics tools (such as Google Analytics, or click mapping tools) to identify popular actions and behaviours of your users. This will help you to prioritise the tasks your users want to complete, or what they are struggling with.
There’s also no substitute for reaching out directly to users. You can do this through surveys, or face-to-face. Better still, watching people use your website or app can uncover problems and opportunities you may not have otherwise spotted.
2) Top task analysis
From your research, you can create a simple list of ‘top tasks’ for the page or section you are prototyping. Organising the top tasks helps you focus on what’s important to users.
A simple example is a banking app: your research might conclude that in a typical session, most users either want to check their balance, make a payment or move money into another account. So you’ll want to make sure those actions are A) easy to find and B) easy to do.
But there will be other smaller tasks that are still important in the scheme of things: for example, users might want to download or share the page. You may want to group related actions like this into their own menu (e.g. ‘Export’).
So organising your users’ core tasks, as well as their less frequent but equally useful tasks, will help you to create a logical order for your navigation and user interface.
3) Building the prototypes
Now you know what your users want to do, it’s time to start creating ideas.
Often called scamping. Scribbling ideas down on paper I would argue should always be the first step of a prototype. You will quickly start to form some good ideas that can be used in the next step.
Wireframes are exactly that - basic boxes laid out on a page to help a UX designer piece together the layout and functions of the page. At this stage, designers can seek early feedback and test their ideas on a small group of users or stakeholders to catch any early issues.
These are more advanced stages of a wireframes process, often resembling a finished product. The beauty of making an interactive prototype is that a designer can build a design with no development expertise required.
There are various tools you can use to build these prototypes. We use Figma, but Adobe XD and Sketch are also popular.
4) User testing
Once you have a few prototypes you’re happy with, testing them on users can help you to uncover any potential problems with your design.
It’s best to test on real customers if you can - but if that’s not possible, there are remote testing services that can help.
By testing how users get on with your prototypes, you will quickly identify any areas for improvement, as well as any clear successes.
According to UX guru Jakob Nielsen, you only need around 5 users (per test) to identify the main problems. You are unlikely to uncover many new issues after this point. So it’s better to run several different tests with small groups than one big test.
If you have a prototype that users love (and understand first time), then great!
On the other hand, if you’ve identified any issues, it’s time to repeat steps 2-4. Make changes that address the problems and, if possible, test again.
Remember, the aim is not to have the perfect website - that’s not possible. But you can be fairly certain of higher user satisfaction and conversion rates if you have ironed out some of the kinks early in the design stage.
6) Collaboration (optional but recommended)
With tools such as Figma, Adobe XD and Invision you can invite your clients into the concept stage. This will help you learn key aspects of their business you may have missed.
Collaboration also helps start a conversation about who their users are, what they need to achieve and how you should engage with them high up in your design.
The beauty of prototyping is that you don’t have to spend days on designs and weeks on development to see a working model of a product (website or application). This allows for more resources to be dedicated into perfecting the prototype.
Design Sprints are created for this purpose.
The concept of inviting numerous minds from various departments is a practice that has been done for years. In the world of UX this has become almost the norm in the creation process of an app. Design sprints can be run relatively quickly too. For instance you could take certain elements of a design sprint such as Crazy 8's - which involves sketching out concepts for mobile or desktop layouts. Asking everyone to vote on their favourite and using that to inform your prototype.
“Design sprint prototyping means you have collaborative decision-making, not gut feel decisions.“
Collaboration & Prototyping tools
Figma Collaboration & Prototyping
Miro - Free Online Collaborative Whiteboard Platform
This article was written by Higher Ground UX Agency. If you need help prototyping an idea, talk to our team today.