5 ways to deal with prototyping

Prototyping is impossible to avoid for todays designers. It is a skill that requires a certain knowledge, understanding and even a genuine interest in frontend development to pull it off. But what actually is it, and which skills to you need to get by?

The tools for prototyping are becoming better and better. New solutions arise every other day and they each come with their own set of features. Browser based tools like Webflow allow you to design in HTML and javascript code, without writing it. Others like Macaw (or Scarlet) – that recently became part of the InVision brand – has focused on a standalone app. The premise is the same: what you see is what you get (which is not true for the relationship between Photoshop/Sketch to finished frontend code). Either way it still has a learning curve, requiring some understanding of what is going on behind the wysiwyg interface.

With the right hacker-mentality this is possible, and to be an interaction designer today, you have to get your hands dirty.

The thing is: prototyping comes in a million different flavours, and how you choose to combine your dessert, depends on the project at hand. Lets look at 5 examples, and what the tasty delicious combo could be:

1. The Award seeker. Websites that require high level of graphic detail or high level of technical experiment to wow the audience. Could be launching a film, a game, a highly profiled product like a new car or a state of the art portfolio. The aim is to get recognized, awarded and profiled.

This would require a high detailed art direction, storyboarding, planning, sketching… The art director is king (backed by a team of loyal servants). Usability does not matter. Experience does. Can it go viral? The target is a show off, to egos, colleagues, award show judges and – if lucky – they also actually do something good for any client involved. The prototype could be a storyboard on paper, high fidelity sketches, designs, animations, rough movie sequences that conveys the idea, before production kicks in. Its a team effort, like creating a great movie is. It might go viral and be a success, but it will also quickly be forgotten, because we are used to seeing so much great stuff, that the competition is really hard here.

2. The webshop. Persuade and convert. A lot of complexity is often going on for the UX team here. Branding, flows for browsing, placement of persuasion data like comparables, pricing, discounts, delivery and more.

This is where data gurus and SEO sharks will tell you its their way or no way. If the product converts, everybody is happy and you cant argue against profit. Also: everybody is shopping on their mobile theses days, right? Prototyping therefore makes great sense: build something fast, and then rebuild it in x number of variations to test them all and see which one appeals. Then you actually develop two or three variations that go live, to A/B test and again measure conversion. Prototyping here actually never ends, as a commercial corporation in its nature will always have an interest in selling more, and the development in technology, design, and with the competition is ongoing. You have to keep optimizing, adjust and turn every screw a bit, both on desktop and mobile to stay competitive.

3. The public self service. Keeping the public happy, and the expensive phones quiet. Involves a broad audience, old and young that all need logical flows, where the designers has to put away their Cannes-Award-crawing egos, and let the UX-team do what it does best.

Requires a certain kind of team, that enjoys the nerdiness of finding the exact right word (“is home really saying what we are trying to convey here“). Prototyping starts early, long before any design. So maybe you paper prototype or use tools like Axure to get everybodys opinion in the public organization. And get it again and again, before you actually have to build or develop anything, because that could easily waste the entire budget for that organisation. Then everybody has been heard, and you can go ahead designing and developing, asking everybody to calm down, as we already agreed on it all.

4. Business and corporate. A very varied section indeed. But for the sake of this article, lets focus on the part where the big corporations need to report to stakeholders about financials etc. So the dot.com of the business, not the commercial part.

Nothing can fail here. Its the share price, the reputation, the branding and much more that is at stake. Both visuals, UX, UI, IA and all the other abbreviations matter here. Process therefore often involves several stages, and a large team of specialists working close together to succeed. You might have simple early stage prototyping like Axure, then more high fidelity versions like Webflow, combined with actual flat design mock-ups to convince the right people, and towards the end also prototypes in actual frontend coded environments but before the heavy backend. Failure is not an option, and everybody has to play it safe and trust each others expertise. Often projects end up in compromises between organization departments, management profiles, IT security guys and a little stench of UX if and when the budget allows.

5. The Webapp: Complex solutions, that are created to solve complex real life (business) problems. Health care apps, Travel search engines, chat or email apps and more. Serves as a tool, more than a platform for informing or entertaining.

This again requires a certain skillset from the team. Being able to perform tasks, easily, repeatedly and fast so they meet business criteria of course needs testing from the end users. At the same time, the integrations to systems out of the webapp environment, like flight booking, or inventory management are traditionally the most expensive part of any project, which is why it pays to be very sure what you are doing, before you ask the dev team to go ahead and burn your investment money. The prototyping effort here depends on the team. Paper prototyping can work, as long as things are thought well through. But also high fidelity tools like Webflow, can create pages that look and behave similar to the expected final product, and hence be tested again and again long before the expensive part of the project kicks in.

X. Bonus: The design agency. Oh don’t get us started. Simplicity? All-in show-off? Impress clients, or the buddies from design school? Can be categorized in any of the above depending on the target of the agency. And is a case of ‘you can’t not communicate’ - meaning, if you keep it simple you make a statement, and if you make it complex you make a statement.

Of course this is where we should take our own medicine. Prototype ideas according to our wishes, brand and personalities on board; test it with our CLIENTS, not our competition, whom we know from school or previous jobs, and see if our website fulfils our business purpose. This is what we are doing right now at Granyon.com, so please bear with us for just a little while more. And let us know if you want to help out testing… clients only ;)

Happy prototyping!

/Jesper, Granyon

Like what you read? Give Granyon a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.