Competitive Analysis in UX Design: Process, Methods, and Concerns

Prototyping is a widely used technique for testing and evaluating ideas at the earliest stage of product development. This is the best way to visualize the future product, demonstrate it to the client, and get valuable feedback.

Eleken is a team of product designers, and when developing a design solution we follow an iterative process which means we always test pieces and versions of the design solution and refine it along the way until, as the final result, our client gets an aesthetically pleasant and useful product that people love. 

We decided to share our experience and shed some light on the question “What is a UX prototype?”. To succeed in this intention, in this article, we are going to tell you about the UX prototype definition, its importance for the design process, and your business in general. Besides, we will analyze the main types of prototypes, methods, and tools we use to create them.

Definition and benefits of the UX prototype

A prototype is a rough version of a product that helps you understand what concept, user flow, and layout the design solution has, and how the future product is going to work.

‍

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 prototype 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.

UX prototyping methods

There are many ways you can create a prototype. We usually divide prototypes according to their level of fidelity (the level of similarity with the final product) and the designer chooses the needed one depending on the stage of the design process and the desired goal.

For example, in case we need to roughly explain to the client how the user will move from one task to another when interacting with the product, a UX low-fidelity prototype will work well but if we need to run usability testing with the focus group a high-fidelity prototype will be the right choice.

In this section, we are not going to discuss every type of prototype but we will talk about the three most widely used methods of user experience prototyping: 

• Paper prototyping
• Digital prototyping
• HTML prototyping

Paper prototyping

The easiest and fastest way to prototype is by hand drawing on paper or something else (whiteboard). This prototyping method is great to get a first impression of your product concept. 

Paper prototyping refers to the low-fidelity type, so don't worry about not being a designer, the implementation does not require any skills, just a pencil, paper, and your desire. But such prototypes, as a rule, have a low degree of elaboration, they contain only the most important information and have several restrictions (hard to interpret design, you can test paper prototypes only in person). Still, the lack of details in a paper prototype allows you to focus more on the idea of your product rather than how the interface looks. After all, at the very beginning of development, it is unlikely that you will need some feedback about color or design.

Creating paper prototypes is a collaborative process, that’s why it positively affects team communication and is a good starting point before interaction design prototyping.

Advantages:

• Fast
• Simple
• Affordable
• Facilitates team communication

Disadvantages:

• Difficult to make edits to an already finished drawing
• Users should have a good imagination to correctly understand how the product is going to work
• Can make complex issues look simple
• Not all elements are displayed on the prototype, a lot of details are missing
  

To sum up, paper prototyping is suitable for the early stages of product design, when the project vision is not that clear yet.

Digital prototyping

Digital prototypes refer to high-fidelity prototypes and are created with the help of special prototyping apps or software (we will talk about them a bit later).

This method is widely used, because digital prototypes look realistic, which allows you to properly test the majority of interface elements. Moreover, digital prototypes are easy to create in comparison to coding.

Our team uses this method of prototyping at the stage when we have a clear concept and a well-thought-out user flow of a product. For example, when we were working on Textmagic (customer experience platform) we designed our prototypes in Figma - a popular graphics editor and prototyping tool. Each piece of a prototype was then shown to users to get feedback and then passed back to us to make further improvements or develop new ideas.

Below you can see a piece of a prototype that Eleken created for this project. It shows the Search function.

Here is a list of basic prototyping tools you can use in your design process:

PowerPoint/Keynote

It's easy and simple to create a digital prototype using Microsoft Office PowerPoint or Keynote. If you are not a designer, we recommend starting with a program that you have already mastered and have on your desktop, without complicating your life with video tutorials for working with some professional apps.

Price:

• Keynote and Mac PowerPoint are free for Mac and iOS.

• Microsoft 365 subscription for Windows (that includes PowerPoint) has a 1-month free trial then the price is $12.50 per user/month (annual commitment).

Template with sketches of smartphone

If you need to visualize the idea of an application or other digital service, then sketches of smartphones will help you to get started. Similar templates with or without grid can be downloaded from Sneakpeekit. A great way to depict a screen design to test the future look of a product.

Price: Free

Download templates: https://sneakpeekit.com/ 

Invision

A simple and easy-to-use user interface makes Invision a perfect tool to get started. The intuitive software gives you the ability to download screenshots and link them to each other. As well, Invision has a function of shared prototyping, where you and your colleagues can work together to share comments and suggestions, full synchronization with other programs, and much more. In addition to its functionality, Invision has an excellent blog that provides tips for building your prototype.

Price: Freemium (free version with paid add-ons)

https://www.invisionapp.com/ 

Sketch

Sketch was created solely to transform your sketches into sleek designs. The program offers one of the simplest user interfaces on the market that sets it apart from other similar software. Sketch also has a variety of templates to speed up prototyping. Having a huge library of resources to use in your projects is just one of the many benefits of using Sketch. Not only is it extremely functional, but it also has a community of like-minded people who share their designs, helping each other speed up the design process. All available resources are located at www.sketchappsources.com. The only downside to Sketch is that it is only available on Mac computers

Price: 30 days free, then $ 99.00/year

Download: https://www.sketch.com 

Figma

Figma allows the team to collaborate on a project online. With Figma, you can create both simple and complex prototypes. Figma has over 1 million registered users from all over the world, so the service can be considered a serious competitor to traditional prototyping programs.

Price: basic plan - free, pro - from $ 12/month

Download: www.figma.com 

Adobe XD

Adobe Experience Design is an interface development program from Adobe Systems. Supports vector graphics and web layout, ideal for prototyping sites and applications. Wireframes, animations, storyboards, sitemaps and flowcharts, team collaboration, UX prototype testing right on mobile - these are all Adobe XD features.

Price: Free trial available for 7 days then starting at $ 9.99/month

Download: www.adobe.com 

And of course, the same as with paper prototyping digital prototyping has its benefits and drawbacks.

Advantages:

• You can change and transform digital prototypes as many times as you need and it won’t take long. Moreover, you can store multiple versions of a prototype in one place.
• Modern prototyping tools provide high accuracy, so you can visualize how the product will look and behave without actually building it.
• There are a lot of prototyping apps that let you share the project and work together with a team.

Disadvantages:

• It takes time to learn how to use a specific prototyping software

Digital prototypes look very similar to the final version of the product, they can be dynamic and animated. That’s why it is better to use them not at the initial stages of the product design process, but at the stage when you are sure about the user flow the product will have. 

However, a digital prototype doesn’t behave like a final product. At this point, it is worth moving on to discuss the final prototyping method - coding.

HTML prototyping

Image credit: medium.com

HTML prototyping is the most complex but the most precise method. This type of prototype looks the most similar to the final product (it also behaves like the final version) and that’s why it allows you to collect the most objective customer feedback. But, of course, to create it, you (or your designer) have to possess the required coding skills.

Advantages:

• HTML prototype is very realistic, that’s why testing it allows you to collect the most precise user feedback.
• It serves as a base for further coding of the future product which simplifies the work for developers.
• It is possible to test such a prototype on various platforms and devices.

Disadvantages:

• Requires a high skill level. HTML prototype will be good only if your knowledge of HTML is sufficient enough.
• Takes more time to create than a digital prototype.
  

HTML prototyping is great for usability testing and is typically used later in the design process. But as it takes more time and resources to create such prototypes, they are not always profitable and worth creating.

When choosing what kind of prototype to create, always pay attention to the project specifics and preferences of your designers.

Final tips for creating prototypes

The ease of use of the interface elements, the level of conversion, and the perception of the product as a whole depend on the quality of the created prototype. Here are some tips for those who are interested in developing a high-quality design solution.

1. When creating a prototype, consider the opinions of other specialists.

In the design process, not only one designer is involved, but specialists in different fields. Therefore, when prototyping, consider the involvement of other performers: a copywriter, a marketer, an SEO specialist, and other project participants.

2. Always have your target audience in mind

Despite the assumptions of even the most professional specialists, it often happens that some design elements just don’t work: there is no proper response from users, sales do not increase, customers do not notice functional elements. Therefore, after creating a prototype, test it on your target audience. This could be a focus group or some other people who would use the product for their purposes.

To sum up, each time we provide UI/UX design services to any kind of project we test and refine the design solution, so we know for sure that integrating prototyping into your design process is a smart and cost-effective decision as it allows you to understand the way customers perceive your product, therefore save your time and budget. So, drop us a line, in case you need some help in creating an effective UX prototype that will later become a usable product.

Our work as a product design agency for SaaS involves helping businesses at different stages of product lifecycles to visualize their ideas with the help of UI/UX design. Sometimes, clients come to us when they just make their first steps into the market. In such a situation, they usually ask for a demo, prototype, or a minimum viable product (MVP) design. Sometimes they want us to build a full product design right away. 

But it doesn’t mean they always understand what this or that word means in terms of design. All these terms may seem almost identical for aspiring startup founders, which is why they may build false expectations from the designers.

However, all of the above are different concepts that serve different purposes, and choosing the wrong one may cause a waste of valuable resources (which you just can’t let happen at the stage of an early startup). To figure out the difference between demo vs MVP vs prototype vs full product and define what approach to design you should expect from your UI/UX designers in each particular case, let’s analyze four real cases coming from our personal practice.

1. Cylynx that started its way in the market as a demo

Cylynx is a data analytics tool that helps businesses process valuable information by turning it into comprehensible graphs so that users can study data relationships, detect trends or discrepancies.

When they came to Eleken, Cylynx had a demo version of their platform and wanted to turn it into a minimum viable product. However, we won’t talk now about an MVP design (we’ll do it a bit later). Instead, let’s focus on the demo version and its role in Cylynx’s go-to-market strategy.

Their demo allowed potential users to perform two essential actions, while demonstrating the platform’s value:

1. Upload data from the computer (or choose a sample data).
2. Edit the visualization of it.

The demo version had limited functionality, and users could neither subscribe nor store their files in the software. But at that stage of Cylynx product development, it was not the goal.

What Cylynx wanted to achieve with building a demo was to help investors and potential customers imagine the value this platform could provide when fully-built.

• It, first of all, allowed the company to understand if they had enough customers willing to pay for their offer.
• Secondly, the demo let them raise money from investors to be able to move to the next stage of product development (an MVP).

So, after Cylynx proved that their idea is interesting for prospects and investors, they reached Eleken to help them improve the demo’s interface and turn it into an MVP to start getting real subscribers.

Now, let’s talk about what lessons we can take from this story.

In what situations you need a demo

Product demos usually depict a key feature or a certain flow users have when using software. They may come in various forms: a video, slide deck, clickable prototype, or else.

So, what is a demo, and when a startup founder may need it?

Businesses create demos to demonstrate other people the value that their product or service may offer if they bought it/if that product existed.

If we talk about a demo meaning a finished product, it usually serves the purpose of a walkthrough (or a tutorial) that illustrates to the viewer how the software works.

Duolingo shows all its features in a demo video to give the viewer a clear understanding of how the app works

In case it’s an early stage product, the demo helps people assume how beneficial a product would be for them once it’s available. It often comes in a form of a clickable design or a piece of code together with mockup designs.

In both variants, businesses use demos to close the deal. Their goal is to convince somebody (in most cases potential customers, or investors) that the concept is worth paying for.

So, as a startup founder, you should design a demo once you’ve validated your customer and problem assumptions, and want to 

• get enough early adopters that want to pay for your offer
• find investments for your further development. 

What to expect from demo design

As the purpose of demo solutions is to help businesses close the deal, their success depends not on the accurate and detailed feature representation, but on your ability to demonstrate how beneficial the product will be for those who use it. 

So, here’s what your design approach should be like:

1. Define the reason you want to design a demo (selling an existing product to customers, attracting investments, gaining first users). 
2. Research and define the target audience, and what they expect from your product. Consider if they have any previous knowledge of your company, or if you have to present yourself within software that has not yet been released.
3. Define what form of a demo design will best communicate the product’s value to your target audience (clickable prototype, Google slides, video, and so on). 
4. Create a visual asset. The design should be engaging and memorable as it’s intended to sell. But don’t focus on details too much: you need to build it fast, and it’s not the final version of your product.
5. Write a script that clearly communicates your mission and sells your idea well.
6. Run short tests before bringing your demo to the market.

And remember, all you need from design at this stage is to ensure it helps the viewer imagine what they could achieve if they had your product.

2. Tromzo that asked for the first prototype design of their product

Tromzo is a security app that helps developers find vulnerabilities in their code. As an early-stage startup, they had a great idea to develop a solution that would be both technically strong and easy to use. But to implement this product idea, they needed to find investment.

That’s why Tromzo hired Eleken to help them design a prototype that would convince potential investors that their product is both valuable and competitive.

Our scope of work on this project included designing a prototype from the ground up that would include all the key screens of the software and present complicated technical data in a comprehensive way. As Tromzo’s goal was to attract investors, our top priority was to make the prototype visually appealing and do it fast. 

We dedicated a lot of time to the research phase to better understand how the app is supposed to work, and in just one month, the prototype design was ready and Tromzo could start negotiating with potential investors.

As you may have noticed, the goals Tromzo wanted to achieve with its prototype are very similar to those that are achieved with the demo. So what’s the difference between a demo solution and a prototype?

In what situations you need a prototype

Prototypes and demos are often used to refer to one and the same thing, especially when we’re talking about early-stage products. And as you already know, demos may come in different forms, including a prototype. In its turn, a prototype may serve different goals.

Let’s try to be more specific. When talking about prototypes, most people would imagine a rough version of a product that you show to prospective customers for the proof of concept (it’s more internally oriented and may be anything, from a pencil drawing to HTML code). Demos, in their turn, are thought of as visually appealing and customer-ready assets.

So, a UX prototype is a rough version of a product that allows the viewer to understand what idea, user flow, and layout it has, and how the future product is going to work. A stratup founder may need it to

• Present the idea to investors and persuade them that it is feasible and worth putting money into full-fledged development.
• Test the idea before releasing to determine whether it’s actually going to work or not without busting the whole budget.
• Test the design to see if it needs any improvements, or if it meets your expectations at all.
• Collect user feedback to define if your potential users like what you build for them and reveal product shortcomings. 

What to expect from prototype design

Prototype design process is quite similar to the demo design. But while demos are not focused on accurate feature representation, when creating a prototype you’d probably want to showcase the functionality people would use in a full-scale product. 

So, when designing a prototype 

• Keep focused on its goal and audience.
• Choose an iterative design process as it’s important to deliver prototypes fast and often.
• You may start with low-fidelity mockups and improve them after receiving feedback.
• Make small adjustments each time you test the prototype on users.

3. Haven Diagnostics that needed an MVP design

Haven Diagnostics is helping corporate offices improve the teams' health and productivity by using mathematical models for projecting the infection risk. They came up with this idea when the COVID-19 pandemic burst out.

To begin with, Haven Diagnostics was making agent-based models for private clients. As they saw the first positive feedback from customers, they decided it was time to grow. Still, to minimize their own risk of spending too much money into developing something that their target audience wouldn't find valuable, they, first of all, wanted to start with an MVP.

The goal of an MVP was to understand users well before jumping into further development. That’s why our scope of work included the initial research that startups must conduct before launching. It involved defining the value proposition, understanding customer problems, brainstorming, competitor analysis, and more.

In what situations you need an MVP

We can define an MVP as the product with minimum functionality necessary to confirm or disprove your hypothesis. The main difference between a demo solution and an MVP is that, unlike a demo, an MVP solution is a fully-functional product that contains key features allowing real users to experience the product’s value on their own.

Businesses build MVPs to verify if customers are ready to use their products and pay for them a commercially viable price, before investing more in development.

Additional goals for building an MVP might include 

• A speedy launch.
• A low-budget market entry.
• Gathering as much high-quality feedback from early adopters as possible.
• Determining the product-market fit.

What to expect from MVP design

While designing demos and prototypes can take several days or weeks, with an MVP design you should be ready that it can take months.

Since MVP’s main goal is to test the concept and define how users will adopt it, your design approach should be focused on

• Researching the market, and competitors.
• Conducting interviews with potential/existing customers to define their problems and expectations.
• Creating user flows and customer journey maps
• Verifying all the ideas your team produces with real users.
• Designing core functionality only with the help of wireframing and prototyping.
• Organizing all the visual elements into a UI kit to be able to follow a consistent visual style across the whole product as you grow.

4. TendrX that requested to create a full first version of their product

TenderX is a freight tendering platform that connects global shippers and carriers so they can get to know each other.

When TendrX's founders came to Eleken for design help, they already had a freight tender platform that automates the entire tendering process, successfully operating on the market. TendrX was supposed to become a pre-step in this process.

So, taking into account the fact that the TendrX team had a great experience of working in a logistics industry and already knew their target audience with their pain points well, they decided to omit building MVP and jumped straight into full product development.

It took us about three months to design the first version of the TendrX platform. Our scope of work included working out the product details first by building wireframes and then turning them into mockups.

In what situations you need a full-fledged solution

A full product solution is the one that offers customers more than just basic features and this way exceeds their expectations.

A full product is the next step of a minimum viable product. If your MVP proved to be viable, and customer feedback shows that people like it and are willing to pay for your solution, it’s time to move further.

When you go beyond MVP it means that you'll have to constantly improve your offering by making iterative changes.

What to expect from full-product design

Once your MVP is adopted, you start receiving feedback from users that would give you many ideas on how to improve and evolve your product into a fully-fledged solution. 

Your design approach would probably look like this:

• Gathering customer feedback to define what challenges they face by conducting user interviews, analyzing support tickets, and so on.
• Ideating possible solutions to those problems with the help of brainstorming techniques.
• Creating a working prototype to embody your ideas.
• Test prototypes with users to reveal what works and what doesn’t.
• Repeat the whole process again.

‍

Summarizing key facts about demos, prototypes, MVPs, and full products

Despite a common belief, you don’t have to start implementing by building an MVP.

• First of all,  you should quickly create several variants of your idea with rough prototypes, show them to as many potential customers as you can to collect their feedback, and try to identify which version solves customer problems best.
• After it’s done, build a demo to present your commercial offer and prove its value to prospects to see if they are willing to pay for it, and to investors, if you need additional resources to continue working on the product.
• Next, when you know there’re enough people willing to buy your product, you can design an MVP to test how the market reacts to your idea. And by the way, Eleken can help with that.
• Finally, if everything goes well, and people buy your offer, you can continue with a fully-fledged product to meet the maximum of customers’ expectations.

After all, demos, prototypes, MVPs, and full products are all useful tools in the early stages of product development. But you should carefully choose which one you need to build first for your specific case.

And if you need a dedicated design partner to help you implement your product idea, contact Eleken for a consultation.