Web Platform & Mobile Application Prototyping

What:

Prototypes are a close replica of what the end result of a product will look like, usually, the aim is to launch it very quickly and no-code solutions are implemented if possible. These incorporate most of the final UI design and interactions that the finished product will have. Building a prototype is one of the best ways to create a powerful UX design.

The point of a prototype is to help you experiment and test out assumptions without them erupting into costly mistakes later down in production. This is particularly true in the digital space where things like colors, themes, and various designs can be easily switched.

They help you communicate functionality, interaction, and UI design to all your team and your customers. This kind of communication is called the “iterative cycle”, the point is to gather feedback on your prototype, implement that feedback and ask again for possible improvements until both you and the customer agree on the final product.

Prototypes in the web & mobile app space exist in 3 forms:

• Paper prototypes

The idea is to sketch out the different parts of your applications and figure out where things are going to go. Each sheet of paper represents a screen and you can simulate button clicks by switching papers. This is a fast and easy way of illustrating concepts.

• Low fidelity

This is a digital bare-bone version of your final product. It has all the screen layouts, element outlines, sizing, spacing, basic clickability, and navigation. The aim is to keep the focus on fundamental screen layouts, general architecture, and navigation. Pictures and content are removed.

• High fidelity

With a high fidelity prototype, you should be close to having designed all but the finished product, it contains all that a low fidelity prototype would have but with a lot of extra details. The shapes of your windows, the colors, the animations, and some sample content.

Why:

Prototypes are preliminary visualizations of a complete product, they build an understanding of the product. It helps you know are customers use and respond to your overall UX design.

Another great advantage is the ability to make changes and test out ideas before these changes become too costly as you progress towards a final product.

One of the most challenging aspects of getting an app built for organizations is to achieve an alignment between the stakeholders. With several parties with decision-making influence, it’s never easy to get everyone to agree. A prototype makes it easier to convince everyone by demonstrating the value of your product. It’s easier to convince many people to spend a certain amount of dollars on an app after showing them precisely what it does.

How:

Let’s go through a couple of things to do before starting a prototype:

• Carry out user research

Prototyping is always done for someones else, it’s therefore important to carry out your research and find out who your user is and what they look for in your app. This will guide you on your design and functionalities. Most importantly you will understand if there really is a market need for your app.

• Gather requirements

This is all about defining the direction your product will take. This means spending time with your client to figure out the main features. Combining this with your research will give you the best way to design your product.

• Devise an information architecture

Before moving on to more refined prototypes, you should figure out the basic click-through navigation in a lo-fi prototype. Once that’s done, you can move on to more complex interactions like scrolling, tabs, dropdowns in a high fidelity stage.

The steps to designing your prototype should be as follows:

1. Start with a lo-fi prototype

Once you’ve spoken with your client, nailed down some research, and devised all your requirements. You should start creating a lo-fi prototype.

2. Interaction design

Once that’s done, move on to more complex interactions, try and show the more profound functionalities. What distinguishes hi-fi from less detailed prototypes is the addition of numerical and text data. This could be the ability to create an account or change a profile picture.

Along with more data comes interactions between screens and the different elements.

3. Advanced UI design

This is all about the UI, figure out what colors you want to use, the palette, the typography, the different spacing and positioning, the images, and the text.

4. Prototyping forms

Forms have an interaction cost on the part of the user, if too long or complicated, users can abandon them along with your product. Some of your product’s UX should reflect on your form design.

A possibility is to keep the form as simple as possible and add a section for more comments. You can always contact the people who choose to add more details later and question them further if they’re available.

5. Data visualization

In this section you’re finishing up your app, consider adding realistic data to it like a list of employee names, roles, or contact details to showcase the last details of your app. At this stage, your data should be visible in lists, cards, and grids.

Consider adding features to sort your data or apply filters. This will help demonstrate the functionality of your product to stakeholders and developers, while also providing an opportunity for your user to tell you if your interaction makes sense.

        As the demand for web & mobile apps keeps increasing exponentially, quick prototyping and knowing where to start and what direction to take will greatly help you develop your business. The benefits are numerous and can be achieved quite quickly with today’s many no-code options.