Prototyping the User Experience
What is prototyping?
Prototyping is an explorative process in which project teams turn ideas into tangible designs. It has been around for many centuries and has been used in design, technology and architecture to develop countless innovations from iconic buildings, to the telephone, sports cars and even the Wright Brothers’ first aeroplane.
Two examples of Leonardo da Vinci’s famous prototype sketches. Left: Aerial Screw resembling a modern-day helicopter. Right: Armoured vehicle resembling a modern-day tank. (Source: History Lists)
User experience prototypes can be built to different levels of fidelity, from simple wireframe sketches on a whiteboard or paper, to fully interactive digital prototypes that allow users to visualise and experience the potential end result ahead of development. The end goal is to envision design concepts, gather feedback, test ideas, features and performance, and to collaboratively arrive at the best possible design solution.
Prototypes allow you to quickly create, validate and refine ideas, making sure the concept is sound before proceeding to development. The main commercial benefit is reduced risk: spending a (relatively) small amount of time to get it right in an early prototype reduces the potential for expensive mistakes based on assumptions later during commercial production.
“If a picture is worth 1,000 words, a prototype is worth 1,000 meetings” – Tom & David Kelley (Founders of IDEO)
Why are prototypes important?
Prototyping is central to both the Design Thinking and Design Sprint processes. It’s an integral part of User Experience Design, acting as a catalyst that converts ideas into realistic layouts and designs. As designers, we are used to visualising and creating images and layouts as part of our daily work, but many people are unable to fully visualise an end result, so prototypes play an important role in the formation and definition of digital products and services. It’s such an effective process that gov.uk now includes prototyping as part of their required approach in the creation of new public services.
There are two reasons why prototyping is vital to a design-led project:
- Visualisation – Prototypes allow designers to represent their ideas in a tangible way and allow all stakeholders to easily understand (and ultimately agree) how the product is likely going to look and feel. Having a visual representation of the concept acts as a source of truth for everyone involved in a project and removes the need for stakeholders to try and imagine what something might look like based on documentation and informal discussion (which often results in everyone having a different idea on how things ‘should’ look).
- Testing – Prototypes provide the opportunity for stakeholders to test designs in a (close to) real-world scenario and provide feedback on something that looks and feels like a final product. It allows designers working on the prototype to collect feedback in real-time, making our jobs easier and aiding the iterative process for all stakeholders in the project. It’s also wonderfully democratic as non-designers can take part in the creative refinement process too – indeed some of the best ideas and innovations happen this way.
The benefits of a great prototype
- Creates a clear picture for all stakeholders, helping them to identify strengths, weaknesses, opportunities and threats to the project, and providing a good base to work and iterate from.
- Helps prevent pursuing a flawed concept and spending time/money developing something that ‘won’t fly’. Prototyping can delay the production process initially but forces stakeholders to evaluate the product, so that the rest of the project is de-risked and can run more efficiently.
- Provides something that can be shown to users and stakeholders early in the process, so negatives can be resolved and positives can be highlighted and evolved further, all in a collaborative way.
- Act as a fantastic tool to get stakeholders from all areas involved in the design process, not just those from the design team. This can’t be understated, for all stakeholders to feel an emotional connection to and responsibility for a prototype can make a huge different to the ultimate outcome of a project.
Low-fidelity vs. high-fidelity prototypes
“Fidelity refers to the level of detail and functionality you include in your prototype. Usually, this will depend on your product’s development stage”. Source: Interaction Design Foundation)
Whether you opt for low-fidelity, high-fidelity or a mix of the two really depends on what you deem is most appropriate to get the result you want from the prototype.
For extremely fast and cost-effective prototypes, sometimes sketching wireframes on a piece of paper or whiteboard can be enough to demonstrate an idea and gain feedback about the general concept and layouts. These low-fidelity prototypes can be iterated on quickly and improved in minutes during a meeting or workshop.
A typical wireframing sketch from a workshop
For more comprehensive (albeit more costly) prototypes, software like Adobe XD or Figma can be used to create high-fidelity and interactive options. These allow for more detailed feedback and a more realistic experience for stakeholders conducting testing. Iterating on high-fidelity prototypes can take longer, however, and often feedback can come from stakeholders taking the prototype as a final product (which in some ways is testament to the detail the design software allows for).
“They provide an accurate, full user experience, with fully developed transition animations, button interactions, and dynamic data.” Source – UX Matters
A few examples of high-fidelity prototypes we developed in 2021
How PDMS utilises prototyping
PDMS uses a mixture of low-fidelity and high-fidelity prototyping across most of our projects. We often begin our design phase with a series of low-fidelity wireframes that act as a foundation for user feedback and the agile methodology most of our projects follow. From there, we elaborate on these wireframes by translating them into digital format on Adobe XD. This allows us to share interactive links with clients and stakeholders to gain more feedback in the form of highlighting and comments. The feedback received acts as a catalyst to turn these initial digital prototypes into comprehensive and detailed prototypes that for all intents and purposes work as a blueprint for the finished system.
When a prototype is finalised, Adobe XD allows us to create a development handover link that includes all the styling attributes and assets included in the design, making the design-development handover a lot more efficient!
Our team working with low and medium fidelity prototypes during a recent design sprint
Having been involved in design sprints and dozens of projects that use prototypes ranging from simple sketches scribbled on paper through to detailed digital prototypes with 100’s of screens, I can confidently say that building prototypes is both great fun and regularly plays a pivotal role in getting everyone on the same page and feeling excited about a project.
There are plenty of software options available (Figma, Sketch, InVision just to name a few), but Adobe XD is the most useful from beginning to end in my opinion. I enjoy being able to rapidly create wireframes or design screens, generate a design review link that can be shared with stakeholders to collect feedback remotely in no time at all. It makes my job as a UX Designer easier, involves stakeholders right from the beginning, and makes the whole design phase of a project run a whole lot smoother. What’s not to like?
A streamlined design review process with Adobe XD. Source: Adobe