Effective Techniques For Rapid Prototyping

UsabilityGeek
Jun 8, 2020 · 7 min read

Written by Ekta Srivastava

The “Aardvark Theory” of product — “Fake it till you make it” could be well followed as a design guideline for organizations. To develop a successful product or an app, we first create a prototype and keep improving on it till the time we get what we expect. An idea has no value unless it can be communicated and the value of a prototype is the vision of what the final outcome would be. Eventually, the goal of effective rapid prototyping is to convince oneself and others of an idea.

As a designer, my job is not just to design beautiful applications, but also to analyze and experiment on different ways to do “effective” rapid prototyping. I am emphasizing more on the word “effective” since it’s not just about what prototypes we create, but how we create them and what techniques or processes we follow to create these prototypes. In this article, I am going to share some of the tools, tips and techniques that I have successfully applied on my projects. But before I go into the techniques, let’s throw some light in understanding the rapid prototyping process. Personally I call it the PR²I process.

The PR²I Process

Prototype → Review → Refine & Iterate

The process generally starts off with an initial rough sketch of the vital areas. With multiple iterations of the whole process, it then grows into a more detailed and refined prototype.

  • Step 1 — Prototype: In prototyping it is essential to understand the user requirements and expectations from the client in 2 to 3 meetings. After gathering all the requirements, convert them into mock ups. Mock ups could be in the form of sketches or low-fidelity wireframes depending on the project demand. While mocking up, it is important to take into account the user experience standards and the best practices.

The Proto‘types’ (Low, Medium & High Fidelity)

During design process, we always come across the terms, “wireframes” and “prototypes”. Unfortunately, many tend to substitute one with the other. But do both of them really mean the same? The answer is a straight ‘No’ and its explanation can be achieved in terms of ‘fidelity’.

Fidelity refers to how closely a wireframe or prototype resembles the final product. There are 3 dimensions of fidelity: low, medium and high. Both wireframes and prototypes lie on the fidelity spectrum. Depending on the stage of the design process, it is critical to choose the appropriate fidelity before staring to create the prototypes.

Wireframes (Low to Medium Fidelity)

A wireframe is a low fidelity representation of the product. It represents the layout of a webpage that demonstrates what interface elements will exist on key pages. It generally covers the 3 basic questions in the design process — What, Where & How.

  • What are the main key elements of the layout? e.g. carousel, widget, left nav, hero space.

Tools & Techniques

  • Sketching (Low Fidelity): The fastest and easiest way to start creating a wireframe is to sketch it out. Sketching is faster and is often done in the very early stages of a design process, particularly during brainstorming sessions to understand client requirements and get early feedback from them.

Prototypes (Medium to High Fidelity)

A prototype is a middle to high representation of the final product. It typically simulates the user interface interaction. A prototype allows the user to test the app for different interactions, which would be very similar to the interactions with the final product.

They could be very useful during usability testing of an application. The results of usability testing can help identify and resolve problem areas that may occur during the final stage of development. While it may be a little expensive and time-consuming to create such prototypes, it is always better to create them in such a way where the code could be reused during development stage.

Tools & Techniques

  • Design in the Browser: This technique generally starts as a medium fidelity and ends in a high fidelity prototype. Design in the browser is a technique where, after creating few sketches, you start coding straight into the browser by using CSS & HTML or frameworks like Bootstrap. The basic goal of this technique should be to start coding the basic layout with minimum functionalities and enhance it as and when you receive user feedback. If done correctly, this technique could save you a lot of time and effort since the code (CSS and HTML) could be reused during the actual development. See more benefits of this technique in this article.

Summing it up

There are several tools on the web that you can explore at your own ease. It is more a matter of trying out trials and choosing one that you think could be the best fit for your projects.

An important thing to keep in mind while doing rapid prototyping is to let your users / clients know the objective of the prototype. It is also very important to explain to them that ultimately, the prototype is not the actual solution. This avoids confusions and encourages feedback from the clients. The other thing to keep in mind is, it is not necessary to prototype every single feature of the application. Analyze the application carefully in breadth and depth and make a list of the features that you feel users will use the most and then prioritize the features that needs to be prototyped.

Want to learn more?

Want to get an industry-recognized Course Certificate in UX Design, Design Thinking, UI Design, or another related design topic? Online UX courses from the Interaction Design Foundation can provide you with industry-relevant skills to advance your UX career. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices are some of the most popular courses. Good luck on your learning journey!

(Lead image: Depositphotos)

Originally published at UsabilityGeek by Ekta Srivastava, who is a User Interface Specialist and UX Architect at McKinsey & Company. She designs user interfaces for mobile and desktop displays in an Agile environment and also has a knack at converting complex data to meaningful visualizations.

UsabilityGeek

Be a usability geek: Make better products, apps, websites…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store