Are Prototypes Worth the Effort?

Picture this: a designer sketches 20 attempts to solve a design problem. None of them hold the answer, but one might start a path that leads to the final product.

The sketch becomes a wireframe. The wireframe becomes a prototype. The prototype becomes a product. And the product wins loyal customers — or so we hope.

The process of churning through lesser concepts is like groping in the dark. What makes sense on paper isn’t always obvious to people new to the project. And while the advice of “test early, test often” resonates within many design teams, implementing ideas is easier sketched than done.

Thinking in Flows

Everyone we’ve talked to has a different approach — but all share a similar goal. Beyond “what will it look like?” UX designers ask “what happens next?”

As we outlined in the ebook The Guide to UX Design Process and Documentation, User flows tell the story of how people traverse pages in a site, literally the users’ experience. They help designers imagine what users are thinking at each point, and what may compel them to continue.

For example, a user may visit a product marketing site after following a link from another site. Already we know they’re curious about the product. After skimming over the home page, what do they do next? Designers need to decide what steps users should take that will persuade them to buy the product. Each step must compel the user to move to the next until they reach the all-important “buy now” button.

A good prototyping tool lets designers link elements in a user interface to other pages or views so the team can explore the user’s journey, prune steps that don’t make sense, and reinforce those that do.

Start and End With Users

When constructing user flows, designers should start with the obvious: their users. Knowing who they are is crucial to tailoring the experience to their needs.

“Personas” are brief descriptions of who those users are likely to be. Granted, we can’t know every user who visits a website or app, but we can take some educated guesses.

For example, people visiting a furniture website are either looking to buy or saw something that piqued their curiosity. Both types are important, and require different flows. The first type is likely to need fewer steps to purchasing. They’re on the hunt for something with specific requirements. Giving them the tools they need to search and maybe customize their order is paramount.

The second type need more persuasion. Great photos and great text may accompany persistent — yet unobtrusive — opportunities to buy what they see.

User flows must account for both cases. But how designers reach that point is as varied as the users for whom they design.

Prototyping Processes Vary

In our latest Twitter chat, we asked people how they work.

Sketching

Many designers start with pen (or Sharpie) and paper, hashing out rough ideas in minutes before they settle on ideas to mock up.

Pros: fast and easily disposable.

Cons: may not get the idea across.

Straight to (digital tool of choice)

Other designers are more comfortable with their digital tools than their sketching skills. They can jump straight into their tool of choice (ahem) and knock out prototypes to share with their team and clients.

Pros: wireframes can look sharp when presenting to the team or clients.

Cons: can take longer than quick sketches, and requires familiarity with the tools.

Straight to code

Code-savvy designers may choose to dig into the ones and zeroes as they work. With or without a HTML/CSS framework, this approach is the most technically sound, but can lead to troubleshooting bugs before the ideas are even refined.

Pros: if you get it right, you know it’s technically viable

Cons: that’s a big “if.”

Conclusion

There’s a funny assumption that one’s tools are critical to one’s design. And while they certainly influence a designer’s workflow, it’s the idea of prototyping that really matters. The process of developing a site that works requires us to think about how users walk through it. Whether that process takes place on paper or code, or somewhere in between, is up for grabs.

In the end, it’s designers’ responsibility to test their work by whatever means they choose. Failing to do risks success by chance rather than by design. Prototyping tools don’t solve problems. Designers do.

Join us next week for another #uxpinchat!

In this week’s chat

.@uxpin Whiteboard sketches to code has been my go-to process of late #uxpinchat

— Michelle Matthews (@michematthews) April 8, 2016

@uxpin We always start sketching our brainstormed ideas, then we lo-fi prototype & then we drink coffee! #uxpinchat

— CastilvzDSGN (@CastilvzDSGN) April 8, 2016

I always start with a pencil and paper. Then move on to different methods depending on project. #uxpinchat

— Leon Baham (@leon_rising) April 8, 2016

@whtmnk Sure, but you've not seen my sad, sad sketches :( #uxpinchat #twolefthandsbutimrighthanded

— Michelle Matthews (@michematthews) April 8, 2016

@uxpin I had a bad habit of just breaking open Photoshop and start on mockups. But now I start with sketches and tree structures #uxpinchat

— Aaron Jackson (@jaxxthedesigner) April 8, 2016

@aduszkiewicz @uxpin Have an arsenal of tools and I pick the ones best suited for the client's comfort. Pivot if it doesn't work #uxpinchat

— Michelle Matthews (@michematthews) April 8, 2016

@uxpin Mockups and prototypes begin w/ a goal: what message is sent or product sold? Whiteboard brainstorm, then blueprints. #uxpinchat

— IselianGaming (@IselianGaming) April 8, 2016

A2. Sure thing! it's cheaper than dev's work and helps avoiding potential flaws in initial assumptions.#uxpinchat

— Krzysztof Stryjewski (@whtmnk) April 8, 2016

@whtmnk yasssss post it notes