That Epiphany Moment: The Exponential Value of Prototypes

That Inevitable Moment

Whether it’s a website, web application, or mobile app, every business relies on its digital products in the same way they rely on real world assets like its building, vehicles or staff. Smart businesses know that just like physical assets, digital products require regular attention and maintenance and occasionally replacement. The process of building or rebuilding a vital digital asset requires a significant commitment of mental capacity, time spent, and often money. There are a lot of steps in the process but we’re here today to talk about the exponential value of prototypes.

I have a phrase I say so often I feel like I get kind of abrasive about it, but it’s important. If you don’t do design work upfront, then you’re turning your developers into designers. A job that, at least in my experience, every developer will vehemently deny that they are doing. Every experience with a digital product begins as a visual one. In placing little to no value in what the product looks like, and how the product users interact with it, you’ll learn quickly that hundreds or even thousands of individual design decisions were made with little to no care about how those choices will affect the usability of the product. If you have an internal development team you’ll face coworkers who can’t understand why what they built isn’t approved, and if you are developing software for a client you’ll face a frustrated dev team who have poured their heart and soul into a project that never launches, or worse yet, shouldn’t launch. I have seen both of these scenarios play out in my career and there’s always a moment sitting around the table where someone finally says “we really should have spent more time designing this before we moved into development.”

Design, the Easiest and Worst Step to Skip

Getting a new product from idea to launch day is a long, exhausting, and an investment-critical process. During the early conversations the concept of “trimming the fat” from the task list inevitably comes up. There’s conversations about specific features, what is a must for the initial launch (MVP – Minimum Viable Product) and what can be moved to version 2, and so on. There’s talk about how often we meet, what the expectations are of who needs to be there, and how we keep the project on track. We go through the process of understanding the product users by creating user personas and user flows. We organize content through card sorting exercises and the creation of detailed site maps. Then someone always asks if we can cut the design prototype. As a career long attendee of those meetings I know the sweaty palmed defenses folks like me make for not only leaving the prototype time in the budget, often I’ll ask to increase it, and let me explain why.

How Developers are Wired… Maybe

By default everyone looks at a digital project from their own perspective. The person paying for the work is likely going to approach most decision making from a cost/benefit perspective. A client services professional will want to argue to ensure the client is happy. Developers tend to be very pragmatic people, and because of this they will almost always approach a project in terms of technical functionality. Development is a complex and ever-changing discipline that requires constant study. The vast proliferation over the past 10 years of code languages and frameworks has made full stack development an ever moving target. Congruently, there has also been a massive increase in the functionality expectations of web applications and software. In general, we’re asking too much of our development teams on a given day and it’s their specific mandate to “make it function”, not to “make it functional for the user”. Without a designer you will get a highly functional product with the assumption that you already know how to use it, but if you give a talented designer ample time to design a high fidelity prototype not only will you remove that responsibility from your developers, you will also cut their development time significantly.

5 Top Benefits of Prototyping

A high fidelity prototype has countless benefits throughout the product life cycle. In the interest of brevity here is our top 5.

Remove guesswork from what development will be delivering (know what you’re getting sooner)
Support and positively influence ability to receive funding from investors (internal or external)
Substantially cut development costs
Align Key Performance Indicators (KPIs) to the product that are trackable and agreeable across departments
Minimize exposure to risk of the product not being aligned with target audiences that leads to failure

Function Before Form

Recently we built a web application for which we produced a near complete high fidelity prototype. During the design process the client, product owner, and product designer met regularly to review user scenarios and functionality in the prototype. The ability to adapt and change things quickly in the prototype allowed the client not only to see and get excited about the project as it was taking shape, it also helped them realize some of the problems in the business logic that needed to be filled. The process of defining every aspect of the product both visually and functionally made writing user stories much easier for the product owner and in a total of 4 agile sprints we knew exactly what we were building, the client has a clear understanding of the product they are paying for, and we have a fully developed sprint backlog and timeline.

Recommended Tools for Prototyping

Let’s take a quick and very high-level overview of what tools we’re using and recommend as part of the Prototyping process.

Adobe XD

We love Adobe XD. It features a robust kit of design and prototyping tools. Multi-state component capability allows us to build components in your prototype like interactive photo galleries, tabbed content sections, product configurators, and complex drop down menus. When a prototype is built in XD a designer can provide all stakeholders with a link with which they can view and interact with the prototype, place pins to which they can attach questions and comments, and tag other users.

Figma

Figma offers many of the same features as XD and, with the news this year that Adobe has acquired Figma, we expect that to only increase. The learning curve on Figma does tend to be pretty shallow, which allows for designers and other stakeholders to learn the interface quickly. Figma is browser-based so it’s use does require you to have an internet connection, and, depending on your machine and connection speed, it can be slow.

Sketch

Sketch is another option with a low learning curve. It’s native functionality is not as robust as XD or Figma, so you can’t really expect prototypes created in Sketch to give an experience that mimics a live product. Sketch is only available for Mac users, so if your design team uses windows or ever collaborates with other teams or freelancers who do, this isn’t the option for you.

Axure

Axure is next level prototype software. All of the previous options offer roughly the same level of functionality but Axure offers exponentially more features. The multi-state component capabilities allow a user to create forms that users can fill in and the data they enter can appear in other locations in the prototype. With Axure, your prototype can be nearly indistinguishable from the live product. The functionality can almost perfectly mimic what the developers will create in a live environment.

Finding the Right Design Partner

While looking for a design partner it’s important to find someone who understands the value of a strong prototype, both for the purposes of working out product functionality and deeply understanding how your users think and act. Make sure you find someone who is willing to walk you through the steps of understanding how your users think, someone who’s going to create user personas, user flows, content maps, as well as a high fidelity prototype. The best looking designs aren’t going to do you any good if they don’t serve your user. A good design partner is responsive and involves you in decision making, they listen to you closely, but also help you understand when your vision may need adjusting to best serve your clients.

Who are the “Right Kind”of Clients?

In our industry we often talk about what our ideal client looks like. I can’t tell you what every design agency is looking for in a client but I can tell you the traits of clients we like working with.

Trust

A good client knows their industry, and trusts us to know ours. Our best client relationships are with people who trust that the advice we are giving is in good faith and is informed by our extensive knowledge.

Belief in the process

When a project begins it’s easy to want to start seeing work on the design prototype immediately, but for us we have a lot of work we need to do to get the best prototype. We have a process for developing great digital products informed by decades of experience. Each step in our process is integral to getting the best end product. We always look for clients who are engaged and invested in each step in the process.

Flexibility

Every scope, and project plan is created based on how a project “should” go, but the first step in the timeline is called “strategy” for a reason. We learn so much through the process of product strategy that we often find the project plan and timeline needs adjustment before we begin work on the prototype. This is a feature not a bug.

Prototypes are a Return on Investment

A good high fidelity prototype is a product in itself. With a good prototype you can create presentations for funding, present it to potential users during user interviews, and work out kinks in your business logic. It also provides a definitive proof of concept for your software. So when it’s time to build or rebuild one of your digital products remember the value of the prototype. Think of it as an investment today in reducing your frustration later. Stay engaged in the prototyping phase of your project, pay attention, ask questions, the more you put into your prototype the more you’ll get out of your product on launch day and throughout the life of the product.

Jake Trunk

Senior Product Designer

Jake Trunk is our Senior Product Designer. He brings a passion for creativity, sound design principles, and a desire to provide delightful digital experiences. Jake is always eager to walk our clients through the process of understanding their users, identifying the users’ needs, and creating digital products that help them accomplish their goals. His aim is to always provide innovative and intuitive solutions to digital problems. Jake brings skills in all kinds of creative mediums from digital illustration to website prototyping, and he believes that the muscles of creativity grow stronger not only with repetition but with stretching. Outside of work, Jake can be found in his art studio working on his latest paintings, or spending time with his wife and two small kids.