Prototyping 101: Coalescing uhms into substance

A little while ago we started a marketing campaign urging our potential clients to open up about their project ideas and get a free prototype from us in return. The initiative is yet to unleash itself ?

However, it got me thinking, is it even an alluring offer for a startup owner or a beginner online entrepreneur to snatch a prototype? In fact, how many of them know what a prototype is and what it’s for? And what is the best way to educate them and get them into a design thinking mode while maintaining their business perspective?

Why prototype ?

In the previous part, I wrote about wireframing as an integral part of the design process where projects tend to be a heap of ideas, assumptions, and predictions of various degrees of certainty and with different shades of comprehension. In that case, the designer’s task will be putting all the concepts and ideas into a string, see what’s there, ask endless questions, throw curve balls, and ultimately, result in a solid full-blown research of the matter, and more importantly, a design ideation of a fix or a killer solution that will sell.

Prototyping 101: Coalescing uhms into substance | Shakuro

Image credit: Sof Andrade

This process of unearthing knowledge is an essential part of a project that is ran from A to Z by one production team. Ideation to design to development, however, it is a rare project that comes like this.

In most cases, what you end up with is a disrupted chain of product development stages where design is often caught in between.

Five out of ten projects we are approached with, have some design to them. Either a complete wireframe (might even be a prototype) that a client has grown accustomed to or a bunch of visuals that they also want to keep. The problem is, you can’t tune into someone else’s vision. I mean you can inherit their logic in terms of UX and reuse their design systems for UI, but there won’t be much harmony and the experience will be far from seamless. Just like engineers hate legacy code, designers are much more prone to creating their own system rather than adapt to an existing one.

If you end up in a situation where your research did not come to a logical conclusion, chances are, something was not done right and a gap between ideation and prototyping appeared to the demise of the entire design stage. So, it’s clear why you need ideation — you can’t design something you don’t know. As for the prototyping, why even bother? Noone says the ideas you come to and the assumptions you come up with are correct in the first place.

Prototyping 101: Coalescing uhms into substance | Shakuro

Image credit: Michael Pons

Prototyping allows you to test your ideas, emulate user flow and basically see if the design will even work visually and feel right emotionally. All of these without summoning the heavy artillery in the face of your developers that do what they do best and that is implement whatever is implementable.

A prototype is a designer’s playground, the successor of the surgical table that is a wireframe.

A prototype can evolve with a designer’s understanding of the problem and become more nuanced parallel with the deepening of the research. This takes us to the point that prototyping is not a succession of a complete and finished research. They are co-pilots.

A quick lyrical digression

When I was 22, I used to work as a tech writer/business process visualizer for a large trading company. The team I was in was young and had little to no knowledge of what we were doing so we pretty much researching things through bumps and bruises. However, you know when some solutions you logically come to seem freshly minted and oh so unique to you up until the point you realize they had already been invented ages ago?

Well, that’s what happened to us. The project we were on was warehouse automation system and my particular task was writing the user manuals for the few employees diluting the automation. Kind of a big deal right? Having teamed up with a process manager and engineers, we started off with a detailed description of tiny specific tasks which got us nowhere in terms of a comprehensive BP manual. Fast forward a couple weeks of useless iterations, and we find ourselves in a room full of cardboard building a model of a warehouse, heart and hand like 8-graders working on our scientific project tri-folds. Little did I know, we were building a low-key prototype. Something to help us see where we stood so far and something to try to model our ideas on.

Apart from the sheer fun doing it, it gave us a huge boost in productivity. The notions we had about our process were far from being complete and the prototype revealed the holes in our assumptions. The work kicked off like shit through a goose. In a month, I had a complete manual and more importantly, I had an understanding and a projection of the process in my mind which was in-sync with the rest of the team’s. I attribute that to the prototype and the process of making it which helped us evolve with the project and go all the way from our assumptions and uhms to a thick book which I hope is still around somewhere.

Prototyping 101: Coalescing uhms into substance | Shakuro

Unfortunately, I don’t have a photo of our model, but we wanted it to look like this. I would also like to keep it a secret how close our paper model was to this one.

Narratives ?

Everything starts with a narration about what the product is supposed to be, why it has to exist, and what it might bring to its owners, employees, and users. These notions all instrumental in the future research and they come in the most natural way possible — as stories.

Stories are  the eldest and the most pristine way to share human experience. And this is where natural disposition to the captivating experiences meets the availability the technology has given us.

Some time ago we published an article on narrative wireframes with more concepts broken down. So now, let’s look at how stories told by the interface can be vocalized in a prototype. The reason why a lot of design project don’t end up in a prototype is either we don’t respect this stage enough to give it a shot, in which case the design gets implemented right away. Nothing wrong with that if your skillset allows you to do that. The second option — we respect it too much and feel like we need a bunch of boxes checked before we move on to prototyping ?

Narratives help change that in a lot of ways. If we can create realistic scenarios of product usage, we can unveil the limitations they face, see how effective the product is and how lucrative. Furthermore, we can run more complicated scenarios over and over again, emulate life situations, and apply the corresponding changes to the product in the course of hours. This is a mental prototype, your first step to the real prototype.

Prototyping 101: Coalescing uhms into substance | Shakuro

Image credit: Benjamín Casanova

How prototyping works  ?

Narratives give you context, wireframes give you system state structures. Microframes give you meaningful transitions between the states. Prototype allows you to bridge the proverbial gap between the islands of ideation, experience design, and functionality.

Prototyping 101: Coalescing uhms into substance | Shakuro

Image credit: Ilya Burakov

Prototype is a bridge

At this point you have to start actually tapping into reality. All the previous stages utilize abstract and hypothetical data which is good for the general understanding of the concepts but is useless in terms of the actual experience. At the stage of prototyping, you can finally unleash your creative demons and get going with the actual data and visual elements.

In other words, prototyping means putting meat on the bones of your digital product.

Prototyping 101: Coalescing uhms into substance | Shakuro

Image credit: Alexander Bickov

On top of that, a prototype is your zoom in and out tool essential for your ability to see how features and states work in conjunction and with multiple variables applied. Often times features seem obvious and go to production right away without ever being played around with as part of the set.

Prototype is a route

Add to that a situation where you have multiple designers working on the project. A prototype is their base of operations  — it helps everybody stay in-tune with the project without digressing too much into the specifics, or

digressing controllably.

Prototyping 101: Coalescing uhms into substance | Shakuro

Image credit: Yegor Mytrofanov

Prototype is an ecosystem

You might say, verbal communication can provide that. Fair enough, if you are good with words, metaphors, and your team is focused, clear communication is a great asset, however,

fidelity matters

and a lot can depend on the levels of details you are able to go to. The more prolific data and detailed process you come up with, the more prepared your product will end up being. However, it all depends on the circumstance and the aims of prototyping. If you’re up to mingling ideas with your partners, a napkin sketch can get the job done. In a way, that is your mental executive prototype. But if you are up for a seed investments, selling the product, or pitching the idea to your potential customers, a napkin sketch or a low-fi wireframe might not be the right way to go about it. A good prototype can save you here.

Prototyping 101: Coalescing uhms into substance | Shakuro

Image credit: Christophe Zidler

How prototyping doesn’t work  ?

Though being highly interactive and intricate, a prototype can’t be pursued as a final product. Often times, clients see a prototype as a visual constant of their product and because of the care they have for it, prototyping can become misleading.

A lot of designers get caught in the middle between perfecting the prototype by the demand of a client and by this, postponing the implementation which results in a client’s frustration because again, a prototype is not a customer-facing product and should never be treated like one.

Instead, it’s a production tool that allows us to reiterate our concepts and assumptions and test the UX, including the bad one. If you are looking for growth in the development of a single product and your design team proficiency overall, some form of prototyping has to be in place. As for the tools and instruments, there is an abundance of resources now capable of catering to any designer with any preferences.

Prototyping 101: Coalescing uhms into substance | Shakuro

Image credit: AR Ehsan

It’s totally up to you to decide which workflow and platform to use as well as how to prototype, more so, you’ll help the industry get to another level by inventing your own techniques, because prototyping is not a ceremony, it’s a mindset.