How Prototyping Can Save Your Project Scope.

According to the Oxford Dictionary, a prototype is a typical or preliminary model of something, especially a machine, from which other forms are developed or copied. While this is an accurate definition, the term has some nuance depending on the context or industry you are referring to it.

In terms of web design, prototyping is a way to mock-up, or demo, how different components, animations, interactions, etc will exist throughout your final product. In other words, prototypes are an early rendering of a proposed product.

We have designated four main reasons why prototyping is beneficial early in the design and development process.

  • Generate Support (or Investment) from the Client (or Donors)
  • Gain Agreement on What is in and Out of Scope
  • Test Ideas and Possibilities Regarding Layout, User Journey and Structure
  • Gather Feedback Through Usability Testing

When dedicating time and space for prototyping, you are setting yourself up for success further down the road by maximizing the time and energy of your team in order to execute the project within scope.

Generate Support (Possibly Investment) from the Client (or Donors)

Prototyping can be very encouraging for clients or other stakeholders who are invested and eager about the project at hand.

During the prototyping phase, a client can expect to see a wireframe of their site with some existing animations and functionality. While the full details and styles may not be set at this point, the site begins to look like a final product and this can be very encouraging for clients and stakeholders.

Additionally, this is often a point in the project where critical decisions can be made regarding functionality or other custom features that may affect the scope of the project. If something is looking to be more costly than anticipated, it can be discovered in this phase. In doing so, the client can decide whether they want to spend the additional money in creating the functionality. The other option is to reconsider less costly options at an earlier and less expensive phase of the project.

This leads into our next reason for prototyping…

Gain Agreement

Prototyping allows you to improve any areas which initially receive negative feedback or perhaps bring up undiscovered ideas. This step provides a chance for discussion about what is really needed in the final build, and what could be removed or improved.

Oftentimes, different ideas about the layout of components or the influenced actions of your target market begin to shift as you get into the prototyping phase. If a certain functionality is desired, it’s during this time that design and development come together and hone in on the reality of what it would take to make that happen.

For this reason, gaining agreement during prototyping can save time and money during development later on in the project.

Test Ideas and Possibilities Regarding Layout, User Journey and Structure

Oftentimes, the vision for a website, how it will animate and interact, is a work in progress. Building out a wireframe with different prototyping features allows the designer, developer and client to see different options for how the product will function. As you begin to design, the initial thought process may not work out how you thought, or you might discover a more efficient way of laying it out. It is at this time of the project where you can explore some different options and find what might work best for the final product.

It’s easier to use an eraser on the drafting board, than a sledgehammer at a construction site.

– Frank Lloyd Wright

Gather Feedback Through Usability Testing

Furthermore, beyond considering adjustments based on interactions and how they affect the scope, this is also a great time to practice some usability testing. Whether it be internal or external, setting up different ways to navigate through the site, such as Call-to-Action (CTA) location or main navigation design, allows the design and development team to uncover designs that may be more effective than another.

Be sure to consider these decisions across different devices and demographics. If you move a CTA on the desktop design, how does it affect where it will go on a mobile device? Is the decision to tuck away your navigation something that will feel ordinary to an older demographic? Does this relate with your target audience?

It’s important to consider as many questions as possible during this phase – revisit your discovery, how can that process guide different options about layout and interaction? It’s better to uncover pain points at this point than further down the road in development.

Prototyping Will Save Your Project Scope

In conclusion, there are many reasons to spend time in the prototyping phase of web design. For the reasons above, this step can make or break your project scope.

You may not see results in each of these areas we touched on, but even if you take the time to uncover one potential issue in the layout or generate additional hours for one desired custom functionality, that can be a huge win for the overall project. With the ultimate goal of delivering a successful and functional product on time and within budget, taking time to explore different ideas and pain points through prototyping will certainly put you on track for meeting that goal.

Adobe XD is one of the most popular and advanced Prototyping tools in the industry.

Do you need help with a web design project? Get in touch with our team.

Share.