Where a Prototype Can Really Take You

Sign up to get exclusive news, product release news, tutorials, best practices and more — exclusive for Adobe business customers.

When it comes to the practice of design, it pretty much comes down to those who do, and those who don’t. With a prototype — that first glimpse into the usability of the product — designers can bridge that communication gap, where words fail and explanations just produce blank expressions.

“If a picture speaks 1,000 words, a prototype speaks 10,000,” says Chris Gallello, founder of Purple, a project and process management tool. “They promote an emotional reaction in the viewer in a way that words generally don’t.”

Here at Adobe, the prototype drives innovation. As XD product manager Demian Borba wrote for Medium, “We build prototypes to learn, solve conflicting ideas, start conversations, and manage the building process. It helps teams to build empathy, to collaborate, to explore options (and barriers) that only become visible when you build something, to test and to be inspired.”[1]

But even seasoned designers sometimes need help getting on the same page of how best to use a prototype to iron out UX challenges and, most importantly, to communicate their idea with the information gathered. Every prototype process, just like every product and user, is new and unique in some way. Read on to see what industry experts have to say about how to smooth out the process, create the best product version, and communicate the idea’s worth to investors and non-designers more efficiently.

The best prototypes show the vision and the steps.

On the Adobe web team, UX expert Ben Jordan and his team had to demonstrate a long-scrolling, animated page for stakeholders. The prototype, a link that they could pull up on their phones, made the difference in being able to even just roughly show the different pieces and transitions, communicate responsive design, and show the mobile setup.

“If you’re creating multiple page flows, things that need to communicate motion, or connections between pages, prototypes can be very helpful communicating more than a static comp can,” says Jordan. “Interactions are easier to communicate. This includes links, buttons, hover states, etc.

“They got to instantly see how it worked on mobile, interact with it, and see how the animations played,” he says of that stakeholder group. “It was very effective.”

The empathy map to the user’s heart.

“As user experience professionals, we face two significant challenges,” wrote UX designer and coach Paul Boag. “Getting our colleagues to think about the needs of users and ensuring they don’t forget about them.”[2]

The stages before, during, and after of every prototype keep the users in focus to get the answers to not just the question “what do they want?” but more importantly, “why do they want it?” The key to this answer can lie in testing out the right questions — the ones that lead to understanding users’ needs, desires, fears, and everyday lives. This is where an empathy map can come in to guide the process and get to the emotions behind the actions.

Boag started his empathy map focusing on the senses — what is the user hearing, seeing, thinking, and feeling, and what are their fears, frustrations, and hopes? As he struggled with results, he realized that his questions were too generic for his purposes, and he eventually tweaked them to get more specific, asking about pain points, goals, and thoughts about the tasks being completed during the prototype session. He found that the more specific he made the questions, the easier it was for the users to answer them. When a question is too vague, trying to respond with the right words can feel nebulous, and communication fogs up.

Boag also realized that empathy maps are a waste of time if the information isn’t maintained. He saw that workshop attendees would gain a better understanding of the user from them, but there was no long-term impact or extensive influence if that information didn’t travel and last outside the prototype process. To keep the user front-of-mind, he converted user questions and thoughts into posters that he hung up as a visual reminder.

So, starting and ending with the empathy maps can make sure that the right questions and answers feed the prototype what it needs and help the designer keep the user in mind at all times. Always being cognizant of various user needs and limitations, whether it’s a weaker Wi-Fi signal or accessibility difficulties, will help avoid creating something that’s not useful or that’s too complicated. And all this information can then be used to communicate a better design to your non-designer counterparts, giving you the persuasive edge.[3]

Don’t knock low-fidelity — especially when there’s a football involved.

Since prototypes can come to life through anything from sketches and digital apps to software and HTML, there’s no excuse for not working through the model as soon as you have the first opportunity and as many times as it’s needed — embracing the trial and error process.

If your goal is to get users and stakeholders involved early in the process, then even the paper prototype, while not fancy, can get your ideas across before investing in design and development. And the simplicity of not being technology-bound can work in your favor with those who aren’t as savvy.[4]

Gallello remembers when a low-fidelity prototype helped his team get clearer on the next phase. “When designing Kitten Cannon VR, [we] literally used a long pillow as a fake cannon and a football [standing in for] a kitten — it was a crude prototype, but it was still a prototype,” he says. “This helped us brainstorm ideas for what you would be shooting at, because we could physically act out swiveling and tilting the cannon.”

In Ben Jordan’s experience, demonstrating his scrolling-page prototype earlier in a lower fidelity made it easier in the long run. “It helped sell the idea because it was easy to see the vision, but it was also easier to make changes early on, rather than down the road when they are more expensive,” he says. “I would say [in general] keep the fidelity low but the format as close as possible to the final product — it will help give you the feel that you need to communicate and start having conversations about what to do next.”

And what to do next might be completely different. “In UI design, one of the most common pitfalls for the designer is to fall in love with your first ideas and not explore enough options and concepts at an early stage in the design process,” UI designer Ole Lie wrote for Prototypr. “I think one of the reasons why this is happening is because it may be tempting to go ‘high fidelity’ too early.”[5]

Author Kathryn McElroy has the same advice. “Early on, you should try out as many variations that you can think of, instead of sticking with your first original idea,” she wrote in Prototyping for Designers. “You’ll find that you make…fewer [prototypes] as your idea becomes more refined. It’s necessary to be flexible and to decide which fidelity is right for each assumption you’re testing along the way.”[6]

Author and General Assembly faculty member Todd Zaki Warfel is also less concerned about getting the fidelity perfect. “Prototype fidelity is a sliding scale,” he wrote in Prototyping: A Practitioner’s Guide. “The level of fidelity that matters is whatever is needed to help you accomplish your goal with the audience for your prototype.”[7]

Warfel’s philosophy guides you away from the worry of getting the fidelity perfect and brings the focus back to the user. It also helps you ask the right questions to identify goals (yours and theirs) and both present and future wants and needs. These questions can parse out the necessary steps and levels, uncover next discoveries, and change the course of the product.

When it comes to best understanding the user and communicating the design to surrounding teams, the exploring and testing of prototyping make your idea visual and interactive while leading to new options and discoveries. And as Adobe XD gets ready to launch the next wave of digital prototyping, the process will speed up exponentially with online, in-app, real-time sharing and collaborative feedback via Creative Cloud. The seamless integration of this workflow gives hours back to the best part of prototyping — creation.

Adobe can help.

Adobe XD brings you prototyping best practices with half the time and effort. See how.

(Link to Creative Best Practices for Prototyping on XD: https://landing.adobe.com/content/dam/offer-manager/en/na/marketing/CCE/CreativeBestPractices_Prototyping.pdf)

[1] Demian Borba, “Prototyping for Success,” Medium, August 31, 2016, https://medium.com/@demianborba/prototyping-for-success-4bf3649fddff.

[2] Peter Boag, “Adapting Empathy Maps for UX Design,” Boagworld, November 3, 2015, https://boagworld.com/usability/adapting-empathy-maps-for-ux-design/.

[3] “5 Mistakes to Avoid When Prototyping Your New Product,” Home Business, October 24, 2016, https://homebusinessmag.com/businesses/special-types/5-mistakes-avoid-prototyping-new-product/.

[4] Justin Mifsud, “Paper Prototyping as a Usability Testing Technique,” Usability Geek, July 23, 2012, http://usabilitygeek.com/paper-prototyping-as-a-usability-testing-technique/.

[5] Ole Fredrik Lie, “Adobe XD — Your New Favorite Design Tool?,” Prototypr, January 4, 2017, https://blog.prototypr.io/adobe-xd-your-new-favorite-design-tool-f03e45ee3f3c.

[6] Kathryn McElroy, Prototyping for Designers (Sebastopol, CA: O’Reilly Media, 2016) 18, 39.

[7] Todd Zaki Warfel, Prototyping: A Practitioner’s Guide (Brooklyn, NY: Rosenfeld Media, 2009), v.