How prototyping can help improve UX
Prototyping plays a crucial role in the proof of concept (POC) process by providing a tangible and visual representation of the proposed idea or product. We're going to explain how prototyping contributes to the success of a proof of concept.
Written by
Robert Hufton
How UX helps with prototyping a concept
Making any website or front end application requires careful planning, great team-work and excellent production processes.
Scoping is crucial, but:
- How do you scope out layouts and user journey scenarios no-one has seen yet?
- How do you accurately allocate resources for development through to the final platform based on a lengthy written project document?
This is where User Experience design prototyping becomes essential. Designed to help you save time and money in the long run, prototyping is a cost effective way of ensuring problems are solved at the beginning of your design journey, rather than finding major challenges at the end of your project.
The main benefits of UX design prototyping are that you can test design and interaction before a project goes into development, helping stakeholders to experiment with what is possible in terms of layout and interaction. You can also present essentially ‘built’ designs to developers to scope out front end components.
To show the significant impact of using prototyping, I’ve included statements from highly experienced seniors and digital collaborators within the industry.
“When starting new development work, prototypes are essential for our team's clarity and understanding. They provide the vision and roadmap we need to navigate the projects effectively, while also empowering the clients to visualise and actively participate in shaping their ideas.”
Milen Nedev - MTR Design
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.
{{pop-up-component}}
3) Building the prototypes
Now you know what your users want to do, it’s time to start creating ideas.
Paper sketching
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.
Basic wireframes
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.
Interactive prototypes
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.
5) Iteration
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
https://www.figma.com/
Lean Canvas for rapid business plans and product direction
https://leanstack.com/leancanvas
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.
