Prototyping Method
A prototype is a draft version of a product, site, or service that allows you to explore your ideas and show the intention behind a feature or concept to others before investing in development. Prototyping allows you to gather feedback from users while you are still planning and designing your solution.
Prototypes enable direct examination of a design concept’s viability with a number of other methods such as usability testing or a cognitive walkthrough. Static prototypes (e.g. paper prototypes) are helpful for gaining feedback on users’ intentions and various design elements. Functional prototypes (e.g. in Figma, InVision, or HTML) are helpful for observing how users interact with the product.
Consider starting to build prototypes as soon as possible in a project. It is much cheaper to change a product early in the design process than to make changes after development has begun.
Preparation
Prototyping is often more effective when it is informed by these complementary methods.
-
Navigation Design
The system of links that allows users to move between pages of a website.
-
Task Analysis
Observe users in action to understand how they perform tasks to achieve goals
-
Stakeholder Interviewing
Understanding the perspective and influence of those invested in a project's success
-
Wireframing
Interface illustration that focuses on prioritization, functionality, and behavior
-
Contextual Interviewing
Observation of users performing tasks in their own environment
-
User Interviewing
Understand the tasks and motivations of the user group for whom you are designing
Steps
- Determine what you need your prototype to accomplish. What moments in the experience or design do you need to gather more information on or explore?
- Determine the modality of your prototype. Can you answer your product and experience questions with a simple paper prototype, or do you need to be able to click through scenarios on a device? If the latter, can you click through PDFs or a Figma file, or will you need to mock up your prototype in HTML?
- Determine the fidelity of your prototype based on what you need to learn. Fidelity ranges from low-fidelity (often inexpensive), to high-fidelity, which simulates a greater range of functionality, but often takes more time (and more money) to create.
- Build your prototype according to the modality and fidelity you've established and integrate it into your discovery, usability testing, and iteration process.
Outcomes
Prototyping typically produces insight and solutions focused on these areas:
-
Navigation Effectiveness
A measure of how effective site or application navigation is relative to business and user goals.
-
User Preference
Elements, arrangements, or qualities of experience design that user state or show are valuable to them.
Next Steps
-
Category Design
Creating structures and schemes that make the location and use of content clear.
-
Taxonomy Design
Define a system for labeling and classifying content to make it easier to find, understand, and use
-
Style Tile Creation
Communicate the use of fonts, colors, and interface elements in a design system
Prototyping Method details last edited on 2021-02-01