Why Prototypes Will Transform Your Web Project’s Results 

What’s a Prototype in the World of Websites?

The world of prototypes is a big one, and depending on the industry you’re in, “prototype” can mean different things. In UX and web design, there are a couple of different types of prototypes that you might use, but today we’re focusing on the use of digital prototypes. Digital prototypes are digital “products” built to test ideas and changes until it resembles the final version. Prototypes are made up of a grouping of connected wireframes to show proof of concept and validate assumptions made at the beginning of a design project. When you incorporate prototypes into the design process, they will transform your web project’s results.

How the Use of a Prototype Increases Productivity

Picture this: Your team is working on a really cool website design and everything is going smoothly until a low fidelity static wireframe, for something that should include a custom animation, slides across the developer’s desk. He works with what he’s been given and guesses what the content is supposed to look like based on the elements throughout the rest of the site. Quality assurance gives feedback that visually, the design is off and the super cool animation desired isn’t there. The developer goes back in and spends hours changing it, only for it to come back once again, with further feedback that the animation still isn’t “quite what I pictured.” The developer repeats this frustrating, repetitive and wasteful cycle until they guess what’s “right”.

It’s something that happens quite often in our industry unfortunately but luckily has quite a simple fix. So many teams work with just static wireframes, and while that may be enough for some projects, introducing the use of prototypes into your design process can save your team time and money, not to mention actual headaches.  

 

Prototypes Are Priceless

You’ve probably heard the term “A picture is worth a thousand words”. In this case, a prototype is worth a million words! Looking back at the scenario outlined above, all of that unnecessary time and effort could have been avoided if the budget had allowed the designer to utilize a prototype when the design first hit the developer’s desk. The back and forth would have been eliminated, and the developer’s time could have been spent progressing different areas of that project, or on a different project altogether, rather than fixing an issue that could have been completely avoided.

 

When to Incorporate a Prototype

Is a prototype always necessary? In short, yes! The long answer is that the type of prototyping you do depends on the type of project you’re working on. If your project involves conditional logic, custom loading screens, or animations (or is just on the complicated side of the spectrum), then yes – absolutely use a prototype to show that you understand what was described. These are called proof of concept prototypes (more on that later) and are very useful for more complicated projects. 

Utilizing a prototype will remove most of the potential confusion involved with project development, whereas if the team only had wireframes, there could be a ton of questions and confusion. For projects on the simpler side, a full-blown prototype isn’t always necessary, but in these cases, the use of interactive components is helpful to the development team, as they can show button or menu states, dropdown options, and more – all without having to leave the wireframe. This saves the designer time during prototyping since the different states are created when the components are made at the beginning of the design phase and the designer isn’t having to go in and duplicate frames to show all the different states of a button or menu.

Using the interactive components in conjunction with a prototype gives the best reflection of what the final product will look like, along with ensuring that the overall usability and UX are what they are meant to be.

The Benefit of Prototypes in User Testing

Another significant benefit of utilizing a prototype in your projects is that you can do real user testing before ever going into development. Two birds, one stone, much?  And in doing so, the production team saves time and money before the product even launches. When a team only uses static wireframes, you don’t get the opportunity to see how the end product would function in the real world. Using a prototype allows us to identify any issues or problems with navigation or UX before it hits the development floor. Utilizing user testing at this stage can ensure that you’re sending out a quality product the first time, which will only need minor tweaks and changes throughout its life cycle.

Proof of Concept Prototypes

Incorporating prototypes into your projects also gives the stakeholders involved something tangible to sign off on. When imagination must be used to picture what the final outcome of a project will look like, it’s much more likely that there will be a miscommunication on at least one piece of the project. While explaining how a hover or loading screen will work can be beneficial, people will interpret functionality differently and some may end up disappointed that the final result isn’t exactly what they had envisioned. Seeing the intended result in action takes that miscommunication out of the picture, and people know exactly what they’re getting. This is considered a proof of concept and ensures that both the stakeholders and production team are on the same page throughout the project.

Budgeting Prototyping into your Design Process

For projects involving prototypes, we like to budget 50+ hours. The first 35 hours are spent creating the initial prototype, and the last 15 or so are spent on edits and tweaks. The hours budgeted are, of course, dependent on the complexity of the build, but keep in mind that connecting the different frames and overlays will take quite a bit of time and it’s better to over-estimate than under-estimate.

When building a prototype for a web application, we estimate between 8-15 hours per page. This includes the design as well as creating any additional copies of that page to ensure the prototype functions as intended. For example, if you were to make a loading screen animation, depending on the complexity, you could have upwards of 5 frames all just slightly different to show how the animation would progress. All of these screens would fall within that single 8-15 hour estimation since the end product would still be one page. This can get tricky with projects that involve forms with conditional logic since technically they are one page but can have upwards of a dozen options. 

The initial page may take 4 hours to create, but 36 hours could be spent making small changes and showing every possible combination that someone could select. This makes it challenging to know exactly how long it will take to create these prototypes. We recommend anywhere between 70-100 hours for this type of project. Estimating those projects at a higher number of hours allows for edits to the form, and new connections between the frames to be made if necessary.

 

Not Just Hype

You may be thinking, “How does this save my team time and money if we’re adding extra time into the design process?” Think of it this way: the problem outlined earlier in this blog could have taken the developer an extra 20 hours to correct, and let’s say there were 3 OTHER times where that was the case during the development cycle. That’s 80 hours of time that could have been spent elsewhere. By increasing the design budget by 15-30 hours to include time for prototyping those features, you are freeing up a significant amount of the developer’s time.

Something else to remember is that the prototyping process is done in addition to the wireframing process, and adds that extra clarification needed. If your design workflow hasn’t involved prototyping, try it out and see how your development team’s productivity improves. 

And if you need guidance, you know where to come find us!