Test Drive: The Importance of Prototyping

web development tips

For a certain segment of the population, this September is proving to be quite a month as in the 19th of this month; early impressions for a certain car began to trickle in all over the internet. That car is none other than the legendary Supra, a name that during the dying days of the 20th century represents a line of high-performance sports car from the Japanese giant Toyota. After production for the 4th generation Supra, dubbed the Mark IV, ended in 2002, that name has laid dormant for almost two decades, until recently.

Of course, if you’re expecting to see the actual car together with all of the necessary specifications, you’d be disappointed. When I used the word early in my opening statement, I meant it. The first drive reviews we’ve seen so far are for the prototypes, which are still camouflaged and where the looks and specifications still haven’t been finalized. For every important project, including in web development, prototyping is a necessary step in making sure you’re on the right track.

How prototyping works

Prototypes are essentially a functional mock-up; they act as the midpoint between a simple proof-of-concept and an actual working product. In the example above, the new Toyota Supra prototype has all the necessary elements in place, complete interior and exterior and an actual powertrain, but it was still lacking in the actual details with the exterior still camouflaged and spec sheets that aren’t finalized. Functionally though, the prototype accurately represents how the production version is going to be like.

Translating this idea into the world of web development, a website prototype is one where all of the navigation elements and functionalities are expected to be working as intended but where the visual design is still left in the air although a final prototype should closely mirror what the actual website is going to look like. Website prototype focuses more on the user experience and how the website works, instead of just how it looks. In web development, it’s usually one of the final stages, right before testing.

Do you need a website prototype?

Well technically, you don’t actually need it, but as prototypes act as the bridge between ideas and the actual product, they are quite effective in making sure that nothing gets lost in translation. In fact, for client-based web development firm, prototypes are usually a necessity as it’s your client’s way of appraising your work. This evaluation is just one way how prototyping can be useful and I’ll outline several other things that exemplify the importance of prototyping.

For the purpose of testing and generating feedback

It’s important to note that prototyping isn’t a one-off process, unless your developers somehow managed to nail everything in their first try in which case I salute them. No, prototyping is for the most part an iterative process. Once you’ve finished your first prototype, test it out yourself and send it out to the non-technical members of your company and/or the clients.

At this point, it’s quite likely that they’ll have some opinions of their own on where things are falling short and where they could be improved. Now, incorporate those feedbacks into your second prototype and repeat the above process once again until all of the testers are satisfied. During testing, it’s also useful to evaluate your prototypes with other websites that you’re using as a benchmark. In fact, using competitors’ car as a benchmark is normal practice in developing a car.

To evaluate novel design choices before they’re implemented

In the automotive world, they have a tradition of concept cars. Half the time, these concept cars are simple mockups, meant to preview what a future production car would look like to gauge public opinions. In the other half however, car manufacturers use concept cars as a testbed for crazy, exciting ideas that are deemed too impractical or even simply impossible to use in the today’s world.

In web development, prototype can also be used as the middle ground between those two ideas. If for example your team has a novel idea about a website, use the prototype as a proof of concept and see just how that idea might work in an actual HTML page. Even if the idea sounds crazy in the first place, prototyping might allow you to soften that idea and transform it into something worthwhile. Always keep an open mind when prototyping, you can always discard the crazier ideas afterward.

To work out the bugs and other kinks on the website

There’s a trend now in video games where bugs, glitches and other issues are identified and fixed after the game was released instead of the other way around. Needless to say, this is a highly disconcerting practice as the paying customers are essentially acting as beta testers for the video game company, which implies either a lack of effort and/or attention from their side.

The same thing applies on web development. A half-baked website full of broken links tends to not inspire much confidence and these kinds of issues can easily be remedied by ironing out those same issues during the prototyping phase. Even if you’re fully confident on the abilities of your developers, mistakes are a part of the human psyche and as long as our A.I. overlords haven’t completely taken over the world, prototyping is always going to be important.

Prototyping in web development

Yes, embedding a prototyping phase in your development schedule would mean having to push back the deadline, with the question of how long depends on how much time are you going to spend on the three issues above. Ask yourself this though, would you prefer a food that takes a while to prepare or one that is quick but turns out to be inadequately prepared? If I were a paying customer, I’d definitely prefer the former.