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 product’s usability. 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 lengthy, exhausting, and 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 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.

Two people sitting side by side working on a laptop with website screens in the viewport

5 Top Benefits of Prototyping

A high-fidelity prototype has countless benefits throughout the product life cycle. In the interest of brevity, here are our top five.

  • 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 nearly 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 had a clear understanding of the product they are paying for, and we had 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.

icon for figma software in puckered square shape

Figma

Figma combines powerful design tools with seamless cloud-based collaboration features, making it a go-to tool for modern design teams. Figma is platform-independent (web-based) and offers flexibility and efficiency to handle all phases of the design process, from wireframes to high-fidelity prototypes. The learning curve on Figma tends to be low, which allowing for designers and other stakeholders to learn the interface quickly.

icon for xd software in puckered square shape

Adobe XD

Adobe XD features a robust kit of tools for designing digital experiences, with an emphasis on prototyping, collaboration, and integration with other Adobe apps. XD is deeply integrated into the Adobe ecosystem, making it a good choice for teams already using Adobe tools. XD also requires desktop apps for full functionality, although it does support cloud sharing and collaboration.

icon for sketch software in puckered square shape

Sketch

Sketch is another option with a low learning curve. Its 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.

icon for axure software in puckered square shape

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 willing to walk you through the steps of understanding how your users think, someone who will create user personas, user flows, content maps, and 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 and help you understand when your vision needs 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 to do to get the best prototype. We have a process for developing great digital products based on decades of experience. Each step in our process is integral to getting the best end product. We always look for engaged and invested clients 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 need 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 them 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, and 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

Creative Strategy Director

Jake Trunk is our Creative Strategy Director. 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.