Get Started

December 14, 2016

Rapid Prototyping for Outside the Box Web Design

Continue Reading

Brandon Swonger  /  Design  /  Development  /  UX Dec 14, 2016

Prototyping has been used in engineering and industrial design to validate concepts and build better products for decades. Today’s web designers are using prototypes to create better user experiences and it’s pushing the envelope of how we use the internet in exciting new ways.

Whenever we set out to create something, we tend to have a pretty specific idea of what that thing is going to look like, how it’s going to work and how it will be used. If you’re designing a chair for example, you can rely on some basic assumptions as to the general form it should take and how someone is going to sit in it. While this approach works well for established conventions like furniture, it doesn’t always work out as neatly in the digital realm. Intuitive as it may seem, rarely does our own, personal perspective do a very thorough job of considering how others will instinctively interact with such a product.

Anytime you design something for others to use, your decisions along the way are likely based off of certain assumptions you make about how your users will interact with it. These assumptions aren’t bad or wrong but they can be based on limited information and in some cases, personal bias. The natural tendency is to think about how a product will be used based primarily on the way you, yourself would use it. It’s not wrong, it’s just not necessarily right for everyone.

What’s missing here is the user. Who else can better speak to how they will interact than the very one doing the interacting? This idea isn’t new. We as designers have always sought feedback on how to improve and optimize what we create and often go to great lengths to do just that. It’s just that before, we weren’t seeking that feedback until after we’d finished building. Conceive, analyze, design, construct, test, maintain – this was the way things were done for a long, looooooong time.

Anyone can see that this approach is slow, frustrating, and expensive. Valuable time and money are spent in the laborious pursuit of incrementally improving upon completed products that are difficult to evolve. If the key to improving on the conventional wisdom is faster access to feedback, how then can one tap into those powerful insights earlier in the process? The answer is prototyping and it’s changing the way designers and developers alike approach building digital products.

The better way.

Prototyping allows new features and elements to be quickly validated or abandoned by creating simulated versions that can be put in front of users before they are completely developed. This iterative process ultimately shortens the feedback loop, allowing products to evolve faster and be more refined.

Prototyping allows you to test the assumptions you make about your users by putting low fidelity versions of your product in front of those very users to observe their behavior and elicit feedback. The prevailing wisdom is to do so early and often, building prototypes that merely resemble what you ultimately hope to release and discovering how users actually interact with it. What results is a continual loop of design, user testing and refining until something very near perfection is reached.

In rapid prototyping this process is performed quickly with little concern for the level of detail involved. The faster an idea can be tested and either proven or disproven, the faster the ideal version will be revealed. Anything from simple HTML mock-ups to downright prehistoric paper models will suffice as long as it is testable. At UpTrending, we use programs like InVision and UXPin to create fully interactive, high fidelity prototypes that give us early insight into how users are interacting with our sites and apps.

UXPin menu prototyping example
Source: UXPin.com

The bennies.

So why go through all the trouble of creating simulations of a final product only to throw them out at the end of the day? So glad you asked.

1. Prototyping is efficient.

Errors or usability issues can be detected far earlier in the process saving time and money in the long run. Why wait until you’ve finished building something to see if users respond the way you expect them to when you can find out sooner and make adjustments along the way? Rejecting false assumptions and eliminating features that don’t work earlier in the process minimizes waste.

2. Prototyping improves user experience.

When the end product is designed for (and in some ways, by) users with their direct input rather than expecting them to conform to a designer or developer’s idea of how things should work, a more intuitive experience arises organically. Since it focuses primarily on the user, guess what? The user experience is just plain better! You are, after all, building this almost exclusively for them, so why not let them tell you how best to get them to do what you want them to do?

UX illustratration
Source: Shutterstock.com
3. Prototyping is the future.

Rapid prototyping allows designers to take risks they might not otherwise take if doing so means committing time and resources to building something out completely. Because prototypes are merely simulations, their cost is low but the reward can be significant. What results may be quite different from that which you initially sought to create, but it could be all the better for it. By throwing out personal bias and preconception, we can design outside the box to create better digital products that achieve their intended goals.

Yay, prototyping!

Many traditional approaches to web design fail to give due consideration to the most important element in the design process – the end user. But as you can see, there is a better way. Through prototyping, designers are able to glean valuable insights directly from users which they can then use to adapt and evolve products into their most fully realized selves. And through rapid prototyping, we can shed the conventions and traditions that hold us back to discover new and better ways to improve user experience.