Prototypes: An integral part of UI & UX design

What is Prototyping?

If you think that developers or designers working in some big companies like Facebook, Twitter, Pinterest, Zomato, Netflix, etc start writing the code immediately to build some features then you’re totally wrong. This is not how things work in the industries. Designers have to first go through the steps of prototyping before they move to the actual coding part.?

Basically, prototyping is the reflection of the final product. It’s not an exact application but it’s like moreover photos of the app which can be designed using the tools such as photoshop, illustrator, and maybe sketch. These photos are put into the mobile phone or on a website and users are allowed to click on the places where it is meant to be clicked.?

You might have learned something about prototyping in your computer science degree but do you know how it works on an industrial scale? In big industries, everyone uses the concept of prototyping. It is used to test the flow of the product, whether it is smooth or not.?

Prototyping showcase the sample version of the product to the users through interactive and engaging products. Designers can test their ideas and designs before investing the time and money into developing the final product.?

Being a UX designer you can use some online tools to build the prototype and showcase it to the users for a better understanding of the product.?

Benefits of the UX prototype

UX design prototyping as a process is supposed to take place after you create wireframes (basic structure of the product interface) and before you’ve got the final product.?

Making prototypes a part of the design process allows designers to:

• Save budget. Receiving customer feedback at early stages and making improvements to the prototype takes almost no cost as opposed to making changes to the already implemented product.?
• Save time. A well-developed structure and arrangement of blocks in the future will help the designer not to make great changes to the finished layout since the main part of the project will be coordinated.
• Simplify the workflow. When directly creating a page design, the developer acts according to the plan. They don’t need to think about how to correctly arrange blocks and calculate the distance to individual elements.
• Facilitate interaction with the customer and other team members. When developing a design, a prototype is a kind of technical requirement, which has already been agreed upon with the customer and other project participants.
• Help the business owner increase conversion. UX prototyping means not only designing individual pages/screens of a product from a usability point of view but also drawing up a business strategy. The correct placement of the CTA and navigation elements, banners with promotions, and so on affects the conversion.Types of PrototypesWe’re going to explore prototypes in three types of prototypes: paper, digital, and HTML.

Types of Prototypes

• Paper prototyping
• Digital prototyping
• HTML prototyping

Paper Prototypes

A paper prototype is a prototype that is drawn on a paper or a digital whitebaord. Such a prototype is used during the early design stages, like a design thinking workshop while designers still brainstorm ideas.

Paper prototyping works best during early design stages where design teams collaborate to explore many concepts fast. Team members sketch ideas by hand using simple lines, shapes, and text. The emphasis is on lots of ideas and speed, not aesthetics.

UX Teams lay paper screens on the floor, table, or pinned to a board to simulate user flows. A common practice for testing these prototypes is to have one person play “the product,” switching the sketches according to how the real user behaves.

A low visual/low functional paper prototype.

Advantages of Paper Prototypes

• Fast — You can sketch a prototype in minutes, which is why paper works so well for testing lots of ideas. You can draw a prototype quickly (even during a brainstorming meeting), so you haven’t wasted more than a few minutes if an idea falls flat.?
• Inexpensive — You only need a maker pen and paper to create prototypes, making the process cheap and accessible.
• Team-building — Paper prototyping is a collaborative effort, and often teams have fun coming up with fresh ideas. It’s a fantastic team-building exercise, and these free-thinking sessions often inspire creativity.
• Documentation — Team members can keep physical copies of paper prototypes, notes, and todos for quick reference during future iterations.?

Disadvantages

• Unrealistic — No matter how skilled the art or craftsmanship, paper prototypes will never be more than hand-drawn representations of a digital product. So, while they’re quick to draw, paper prototypes produce little or no results when doing user testing.
• False positives — Sometimes, paper prototypes don’t validate ideas properly. What seems like a good idea on paper might not work effectively in a digital wireframe.
• No gut reactions — Paper prototypes rely on the user’s imagination, adding a break between seeing the stimulus and responding to it. That “gut” reaction is crucial for a successful UX.

Considering these advantages and disadvantages, we recommend paper prototyping only during early-stage design. Once you move from paper to digital, there shouldn’t be any reason to revisit hand-sketched prototypes for the same designs or user flows.

For more information on paper prototyping, check out these helpful resources:

• Paper Prototyping as a Usability Testing Technique by Justin Mifsud
• Better Use of Paper in UX Design by Marcin Treder
• iPhone User Interface Design, Paper Prototype Design (video)
• Printable Paper Prototyping Templates courtesy of Tripwire Magazine

Digital Prototyping

Digital prototyping is an exciting part of the design process. Prototypes start to resemble the final product allowing teams to test and validate ideas.

There are two types of digital prototypes:

• Low-fidelity prototypes: a user flow using wireframes
• High-fidelity prototypes: a user flow using mockups

Low-fidelity prototypes allow research teams to outline basic user flows and information architecture. High-fidelity prototypes go into more detail, testing user interfaces, interactions, and how usability participants interact with a product.

Designers build prototypes using design tools like Figma, Adobe XD, and others. Sometimes non-designers, from product teams use Powerpoint or Google Slides to simulate user flows.

UXPin is unique because it allows designers to create prototypes that look and function exactly like the final product—something you cannot achieve with other popular design tools!

Advantages of Digital Prototyping

• Realistic interactions — Testing with high-fidelity digital prototypes lets UX teams see how users interact with the final product, thus effectively iron out any usability issues.
• Flexibility — Test early and test often! You can start with lo-fi prototypes that become progressively more advanced as the product design process moves forward.
• Speed — While paper prototypes might be the fastest way to test ideas, digital prototypes are the quickest way to test usability issues. Once a product gets to the engineering stage, changes cost significantly more time and money.

Disadvantages

• Learning curve — Before you can build a prototype, you’ll need to learn and understand the software—which is why product teams often use Powerpoint instead of a specialized design tool. The good news is that most design software incorporates the same tools, so it’s relatively easy to switch between them.
• Cost — As you move from low-fidelity to high-fidelity prototyping, time and labor costs increase.

A prototype’s success depends on teams outlining clear objectives and KPIs for each usability study. Without a proper plan, designers can get side-tracked, adding unnecessary features and interactions!

Here are some helpful resources for creating digital prototypes:

• A 10-Minute Rapid Prototyping Lesson by Marek Bowers

HTML & JavaScript Prototyping

On rare occasions, teams might build HTML & JavaScript prototypes to get more accurate results. The downside to this approach is that coding comes with considerable time and technical costs.

But with UXPin Merge, that isn’t the case!

Product designers (and non-designers) can create code-based high-fidelity prototypes that look and function like the final product.

For example, with UXPin’s Merge technology, teams can use React components pulled from a Git repository or Storybook components to create fully functional high-fidelity prototypes. With UXPin Merge, participants never have to “imagine” what a button or dropdown will do because the prototype functions like the final product!

Low Visual/High Functional Prototype built-in HTML. (Image credit: Mike Hill)

Advantages

• Final product functionality — HTML prototypes provide participants with an accurate model of the final product.
• The technical foundation for the final product — Building an HTML prototype provides researchers with a valuable research tool and provides developers with the foundations for building the final product.
• Platform agnostic — You can test your prototype on virtually any operating system or device, and the user won’t need to run outside software.

Disadvantages

• Dependent on designer skill level — Your HTML prototype is only as good as your ability to code. Poorly coded prototypes could introduce usability issues that don’t have anything to do with UX design!
• Inhibits creativity — Coding takes time and focus to build a usable prototype. Designers might not achieve the same level of innovation or creativity as using a familiar design tool.

Here are some helpful resources on HTML prototyping:

• Designing with Code by Andy Fitzgerald
• The Advantage of Rapid Prototyping by ZURB
• UXPin Merge for interactive prototyping by Robert Kirkman

How to Approach UX Prototyping

Irrespective of whether you are building an app or a website prototype, there are several steps you need to take before creating one:

Step 1: Develop and perfect your idea

The first step before bringing your idea to life is tofigure out what problem it is going to solve for real users. For example, if you are trying to build a mobile app that lets them create a to-do-list, you need to ensure your app is unique in terms of solving this problem. It might seem like a basic idea at best, but most successful apps always pay attention to this step before moving forward with the prototype and design phase.

Your idea may seem revolutionary to you, but for the end-user it must offer real functionality - they will be downloading, sharing, and using your app regularly. Questions like “how different is your app compared to similar ones?”, “does it offer extra functionalities or integrations with other apps?” or “does it provide an appealing interface?” should be addressed beforehand.

Step 2: Come up with product requirements

Once you have identified the problems your product or app will solve; it is time to create a list of the cover features and prioritize them. Start by writing down the main features that your app should have and then move on to shortlisting those that will form the core of your app.

Prioritization of features should be addressed next. aligned with the needs and preferences of your target audience. It would be best if you divide the features into “must-haves” and “nice-to-haves”. Take the first 3-4 features at the top of your priority list and begin crafting your prototype with them in mind.

Step 3: Draw sketches of your app or web primary screens

This step is all about the user experience. To keep the features of your app visually organized, start by sketching its primary screens. Once the sketches are ready, you can start adding details and keep building the screens further. The initial sketch should already consist of one potential user flow that you can keep refining as you continue developing your app.

Step 4: Build wireframes based on your sketches

Wireframing is the next step in developing your prototype. A wireframe is a basic outline of your product that is normally based on elements like boxes, words, and lines. It is wise to add a few descriptions to those elements in order to communicate your concept better. The idea behind wireframing is to not create the final look for your app, but to create a framework that sets it in the right direction.

Step 5: Build a prototype

Now it is time to employ your wireframes to create a prototype. You can either put them together to create a basic prototype, or help transform the initial ideas into interactive prototypes by using specialized tools. Such tools build high-fidelity prototypes that have the look and feel of real apps by using fake instead of real content.

Conclusion

Regardless of any method you use, prototyping during any product development lifecycle is no longer just a nice-to-have thing, but a must in my opinion. When you start creating a prototype, start with a rough idea and a pen/pencil and paper. Initially, it can feel overwhelming but don’t stop. Sketch your ideas, test them, get the feedback, and work to improve the flaws. Keep making amendments to your prototype designs until you reach what you are looking for!