If you’re a designer working on a project and you face aproblem that you want to solve, you most likely will spend some time ideatingand, after a while, come up with a potential solution. Without any doubt,you’ll then put some effort into building this idea. But what happens if yoursolution is wrong? A well-executed bad idea is a big waste of time and energy.With so much at stake, it’s critical to reveal a bad idea as early as possible.So, how do you distinguish a good idea from a bad one?
Fortunately, we have a tool that allows us to do that — aprototype. A prototype is an experimental model of an idea that allows you to testit before fully building the solution. In this article, I’ll review the conceptof rapid prototyping and provide a few recommendations on how to do it.
Rapid Prototype Definition
The definition of rapid prototyping is an analogy for proof of concept — it’s a process of quickly creating the future state of a product, be it a website or an app, and validating it with a group of users, stakeholders, developers, and other designers. The ‘rapid’ part of rapid prototyping implies this type of prototyping is quicker and cheaper than creating a full-blown version of your idea in code.
The whole concept of rapid prototyping is based on the ideathat by setting a direction for a design team and iterating rapidly it’spossible to get to a product that will present the maximum value for people whowill use it.
A prototype often starts small by designing a few core partsof a product (e.g. key user flows) and grows in breadth and depth over multipleiterations as required areas are built out. The finalized version of aprototype is handed off for development. The process of rapid prototyping canbe presented as a cycle with three stages.
- Prototyping. Creating a solution that can be reviewed and tested.
- Reviewing. Giving your prototype to users/stakeholders and gathering feedback that helps you understand what’s working well and what’s not.
- Refining. Based on feedback, identify areas that need to be refined or clarified. The list of refinements will form a scope of work for your next design iteration.
What is rapid prototyping? Rapid prototyping is an iterativeapproach to user interface design that includes prototyping, reviewing, andrefinement stages. Designers move through each step and, when they reach theend, they return to the beginning (over and over again) until they have theresult that satisfies initial expectations.
Why is rapid protoyping important?
There are many advantages of rapid prototyping over otherdesign approaches.
- Communicate design decisions better. In comparison to a static specification, a prototype ismuch easier to understand. It’s also much easier to get feedback on designdecisions if everyone can see how things might work with their own eyes. Thisis the best way to ensure everyone shares a common understanding of how theupcoming product should look and behave.
- Save time by writing less documentation. Developers can use prototypes to understand how thingswork. Even when engineering needs documentation for specific user flows orinteractions, designers will need to write much less description text for aprototype than for a set of wireframes.
- Allowsfor experimentation.Rapid prototyping helps teams experiment with multiple approaches and ideas. Itfacilitates discussion through visuals — presenting information in a visualformat is the fastest way to get them to engage with that information. Thisleads to better, faster design.
Prototyping techniques
To prototype successfully, designers have to revise quicklybased on feedback gathered during testing sessions and use an appropriateprototyping approach. Prototypes range from rough sketches on a piece of paperto interactive simulations that look and function like a real product.Depending on the stage of the design process and the goals of the prototype,you need to select the appropriate prototyping technique.
Paper prototyping
We have a lot of digital prototyping tools today that allow you to create prototypes with the least possible amount of effort but sketching on paper still remains the most important tool for any UX designer. Sketching allows designers to quickly explore lots of different design alternatives without investing too much time and energy in each one. It forces designers to concentrate on the essence of a product’s design (what it does), rather than its aesthetics (how it looks). And what’s especially great about sketching is that it opens up design to everyone — anyone can sketch, and no special tools are required. The fact that anyone can participate in the design process makes sketching an ideal tool during brainstorming sessions.
Many people believe sketching can be used only during theearly stages of a design cycle — that’s not true. Sketching can be helpfulduring development and even post-launch when you need to rethink your designand visualize your ideas. You might even use pen and paper when you alreadyhave high-fidelity digital prototype, simply because it’ll be faster tocommunicate your new ideas through sketches.
Tips
- Don’t get stuck with the first solution that comes intoyour head.In most cases, your first ideas won’t be good enough because, at theearly stage of ideation, you won’t have a good understanding of the problemyou’re trying to solve. You want to use rapid prototyping to generate as manydifferent designs as possible instead of focusing solely on your firstsolution.
- Establisha clear purpose for each prototype. Before starting to sketch, it’s good to have a clearunderstanding of what pages/layouts you’ll need and why. For example, you cancreate a series of sketches representing certain screens in a user flow thatyou want to demonstrate to stakeholders.
- Usea stencil when sketching. When you sketch on paper, it can sometimes be hard to imagine howcertain UI elements will look like in the real size. Using a stencil will helpyou to draw elements for the actual size of the device you’re designing for.This is especially great when you need to understand whether UI elements you’vejust drawn are large enough for interaction.
- Don’t worry about making your sketch look pretty. When creating sketches, it’s often tempting to spend sometime making them look beautiful, but it’s better to avoid that temptation.Don’t focus too much on polishing your sketches, instead focus on getting theessence of the design right.
- Take photos of your sketches. During the active phase of sketching it’s far too easy tolose some important sketches in a pile of paper on your desk, or evenaccidentally throw them in the trash can. Take photos of your sketches as soonas possible so that you have a digital copy. Digital copies will help you avoidcarrying a paper prototype from meeting to meeting. Instead, you’ll haveeverything you need on your phone. A digital copy is a good design artifactthat you can reuse, make a copy of, or send to other people.
- Share your sketches with your team. Feedback from colleagues is a perfect way to filter yourideas before showing anything to your stakeholders. Thus, share your sketcheswith your team and ask for their opinions.
- Makesketching a team sport. If you’re working in a team, then you should get everyone on the team to sketchout ideas. After each person sketches their ideas, you can then discuss andcritique them as a group afterward.
Digital Prototyping
With paper prototyping, explaining complex interactions inwords can be tough. When designers need to explain a complex design detail suchas an animation to a developer or want to run a user research session tovalidate a design, they usually use digital interactive prototypes.
Digital prototyping is the process of creating aninteractive design that other people can experience themselves. Just a decadeago, in order to build a high-fidelity prototype, you actually had to code thesolution using programming language. These days, prototyping tools allownon-technical users to create high-fidelity prototypes that simulate thefunctionality of a final product in just a few clicks.
Digital prototypes are well suited to defining dynamicon-page interactions, such as expanding content and animations.
Tips
- Know your technical limitations. Avoid prototyping features or functionality that cannotbe implemented. When in doubt, ask developers whether or not something istechnically feasible before starting any rapid prototyping.
- Avoid dummy text.Dummy text like lorem ipsum should be avoided in early stages of digitalprototyping. Use real content to understand how it affects the overall design.
- Usedigital prototypes as an up-to-date specification for developers.
Native prototyping
When you prototype natively, you write code and build aprototype to test on real devices. Native prototyping has a goal ofunderstanding how your product works in the real world — it’s often used tovalidate your ideas with real users.
While native prototypes often look like fully functioningversions of a product, it’s important to remember that a coded prototype isn’tthe same thing as a final product. The point of rapid prototyping is toshowcase how something will work without building the entire product.
You should have solid development skills if you’re going tobuild native prototypes. Without good development skills, creating a nativeprototype might take too long. You should be able to prepare an effectiveprototype in just a few hours, rather than days or weeks.
Tips
- Use real devices and data. Since the goal of native prototyping is to understand how an app willwork in real world, you’ll need a realistic experience that you can put in thehands of your users to collect valuable feedback. As much as possible, use realdevices and real data to validate your design decisions.
- Don’t worry if some of the parts of your prototype aren’tfunctioning. If you use the prototype foruser testing, make sure that people who interact with it understand this it isjust a prototype, not a final solution.
- Reusecode. It’srecommended to develop prototypes, when possible, with the intention of reusingcode from the prototype in the finished product. While this may add additionalcosts at the rapid prototyping stage, it should save money over the lifecycleof the product’s development.
Conclusion
Rapid prototyping can put you and your team on the fasttrack to success. By investing in prototyping early on in the design process,before you get locked into the engineering phase, you’ll save a lot of time andmoney down the road. When designing your next project keep the following simplerule in mind: the more prototypes you build (and test), the better yoursolution will be.
Prototyping
