fbpx
Uxlicious logo

Why UX prototype is essential for a successful product

August 12, 2021 ・8 min read

User experience is a decisive factor for any product. A UX prototype can help you develop a successful software product, even those destined for the most complex systems.

What is a UX prototype?

A clickable UX prototype is an interactive, high-fidelity version of the product mockup that allows you to demonstrate its functionalities and the user’s navigation flow in practice. Using the visual design, you can see how a given functionality works in the context of the entire product and decide whether it is ready to be sent to developers for coding. UX prototype can be a standalone project or a step in the overall development process.

Why do you use UX prototype?

Although the UX prototype is not a working product, it offers a close-to-real product experience and thus allows you to validate it if your product idea performs well in real-life scenarios. In software development, releasing a product to the market requires a considerable investment of time and money. A clickable mock-up of such a product prepared by the UX team could save you time, money and a lot of frayed nerves when you use it to verify your ideas, to improve or simply discard them without running up unnecessary costs. 

 

With the prototype you can checkout how the designed user flow of a feature works in practice. There is no coding needed and if you want, you can use tools such as AppSheet and Bubble to create functional prototypes that allow complicated interaction with a little bit more time. By simply clicking through different features, you can check if the designed navigation flow is intuitive and also uncover the gaps that were not visible in the initial product requirements.

 

Last but not least, a picture is worth a thousand words. A shiny UX prototype makes investor pitch much easier and get your idea across. In fact, it helps to facilitate your conversation internally too, especially to the marketing and software development team.

What is the UX prototype process?

To design a successful UX prototype, you need a proper process in place to get things done. Here’s an example of one:

Product/market fit alignment

We want to start the design process by understanding the key questions: what is the customer problem the product is solving; who are the target audience and what are the primary KPI of the product. Throughout the user research process, we conduct interviews and benchmark alternative solutions to find out the key customer pain points that are underserved by other products and services and customers are happy to “pay” to get them resolved. We align the user needs with the business goals.

User flow mapping

Once we have a high level idea what the solution is going to be. We will create the reference navigation and the step-by-step flow. Working as a team, we evaluate different options and identify the possible pitfalls and drop-off points. We anticipate users’ emotions and come out with remedies to make sure the users can navigate through with confidence and ease. A seamless user experience remains critical to the design process.

Low-fidelity Wireframes

We then go on to visualize the shortlisted solutions and score them again the user pain points. Low-fidelity wireframes make it possible to test the different approaches quickly and provide first-hand qualitative and quantitative data for us to decide the best one(s). It has a good balance between giving enough details to get users’ quality feedback and leaving enough open space for people to discuss and brainstorm.

High-fidelity graphic design

With the insights obtained from the low-fidelity design, we focus on the visual side of the solution. The use case of the product determines the look and feel we need to create, for example, a productivity application requires a clean and minimum UI to get users focused on completing tasks while a fashion eCommerce application wants to create a sharp and cool experience for its shoppers. We also make sure we never compromise usability over fancy but cumbersome designs.

Clickable UX prototype

Then we create a high-fidelity clickable mockup which gives a close-to-real experience of how the product will look and work. With the modern interactive prototyping tools, we can even simulate logics, perform calculation and decision-based flows. At this level, the prototype allows us and the clients to iron out all the details that have been missed in the previous stages. It is also beneficial for the development team as they know exactly what needs to go on each screen and how the transition experience needs to be.

Is UX prototype only for 2C products?

It is obvious how important it is to use a prototype to validate a solution and identify usability issues for a customer-facing application such as mobile banking or shopping. But what about 2B products such as CRM, accounting etc.

 

These are for very sophisticated users who already have a good knowledge of the tasks they need to perform, so can we skip the step and go straight into development? Well as these tasks are mission critical and making mistakes have serious business implications, the prototype step is even more important as it allows you to talk to your end users with a common language and observe how they interact with your product.

 

And the same goes for technology and engineering softwares, these systems produce a large quantity of data, collect various performance metrics and have many advanced functionalities. Navigating in such an information-intensive environment is very challenging and tiring. A sound UX design is even more important as the tasks are already very overwhelming by themselves. 

When designing graphs and widgets, we need to make sure the information architecture is aligned with the users expectations, the data presented is relevant and give users the flexibility to customize based on their level of sophistication. These improve readability, and will definitely bring usability to a new level.

 

We have recently engaged with R2C2, a PropTech company that builds a universal robotic software package with a web-based management platform to add advanced sensing and AI technologies to robots in the construction and agriculture industries.

 

When R2C2 team started their project, the investors wanted the application released to the market as early as possible. R2C2 therefore opted to forego the UX prototype phase, as teh process would take an additional 1.5 month. R2C2 believed that it would prolong the entire process needlessly and insisted on starting coding immediately. They saw no reason to involve a UX team in the product design stage.

 

12 months later, the software application was ready to be released to the market. Yet when the engineers tried out the product, they were not at all satisfied with the results, especially those related to navigation, user flow and data visualisation. The engineers told R2C2 the way the dashboard is not user-friendly and the functions are impossible to find. The key data they need to make real-time decisions are hidden on the secondary pages and it took extra time to get to them. The operating panel is too narrow and so difficult to use when they are moving on the construction site. 

 

R2C2 realized something is wrong about the design but they do not know how to change it. So they found UXlicious to help come out with a new design. Understanding the issue, we decided to go back to the drawing board. We created a low-fidelity prototype with some key pages that have the most serious usability issue and asked the engineers to try them out.

 

Then a clickable UX prototype was created which gives the real feel of how the end-product would look provided considerable benefits. It allowed R2C2 to verify if product requirements related to navigation, user flow and data visualization were correct and iron out all the details and fill in the gaps before the proper coding started.

 

R2C2 then went to code the new dashboard, navigation and operating panel, which took them about 2 more months. If R2C2 had started with a prototype, these problems could not have been spotted earlier.

Conclusion
Creating a clickable UX prototype is the right approach to product design and development for any software product, in both simple use cases and complex systems as it:

 

  • ⏱️ Reduces the time and resource you need on the development process

  •  
  • 💁🏻‍♂️ Allows you to avoid usability issues at an early stage of development

  •  

  • Makes it possible for you to validate if your product solve user pain points

  •  
  • 🗣️ Allows your stakeholders to give quality feedbacks

  •  
  • ⚙️ Helps to align expectation with your development team

Get in touch

Whether you want to learn about UX Design or need product design services, feel free to get in touch. We love a good challenge.

Get in touch