/
Design process

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

0

mins to read

Unless you're doing something exceptionally innovative aiming to disrupt the market, you are not the only one in the industry. But that’s actually not as bad as it sounds. There is a widespread delusion that you must offer customers a brand-new exclusive solution packed with the latest technology and modern design to outrun your market rivals. In most cases, what you really need is to fit market demand and perform a bit better than competitors.

Understanding the landscape of existing UX design solutions is critical for building a product people truly need and will be excited to use. You should know who those other guys are and what good they bring to the market, and for this purpose, competitive analysis is an indispensable tool. A competitive landscape overview will help you get valuable insights, identify your product’s strengths and weaknesses, and develop effective product strategies that win. 

In this blog post, we’ll talk about how to conduct UX competitive analysis and make the most out of it to skyrocket your product.

What is UX competitive analysis? 

In its essence, a UX competitive analysis is a part of the research process when you investigate all relevant design solutions in your domain performed by direct and indirect competitors. As a SaaS design agency, we at Eleken are positive that competitive research is a valuable source of insights, which may urge you to reconsider the product’s features, change a user flow, or even revamp your product for the sake of a better user experience. That’s why a thorough UX competitive analysis precedes every project our designers start to work on.

The competition analysis includes two important stages, each of which you can’t skip if you want your investigation to be not just a formal process but an insightful UX research.

Stage 1 requires a clear understanding of the research process, methodology, and the information you want to find.

Stage 2 implies a combination of all findings into the action plan.

You can take heuristics evaluation principles as guidance for your competitive analysis or extend the analysis scope with whatever you think will be relevant to achieve your ultimate goal.

Why should you conduct UX competitive analysis?

Because you aren’t alone in the market. Unless you’re operating in the blue ocean, more likely your product has quite a bit of alternative, and some other solutions may be pretty decent to attract users’ attention. To stand out in a crowded SaaS market, you should clearly understand your product’s positioning and competitors’ strengths and weaknesses to think over how to win the battle for customers. 

The truth is, in a fast-paced world, people don’t want to waste their time figuring out how to interact with a product to achieve their goals. If their user experience is not what they expect to get, users will move to a competitor’s offering with no regret. The UX competitive analysis helps businesses identify what they do better than competitors (and amplify it) and where they, let’s say, miss some important features that can be crucial to fulfill the underserved market’s needs.

Also, researching more about the market competition will help:

  • Nail your go-to-market strategy
  • Detach from competitors by a clear understanding of a product’s unique values
  • Find proof of concept for your design idea
  • Improve the product’s usability
  • Learn more about target customers’ needs 

However, it’s important to mention that all the efforts may be in vain if you fail to properly define your real competitive landscape. What do I mean by “real”? I’ll explain right away.

Say, you’ve launched a VoIP (Voice over Internet Protocol) caller targeting SMBs. Is it correct to consider big UCaaS market players as, for example, RingCentral, your competitors? From one side, you are both operating in one industry and theoretically share the same customer pool. But if you dive deeper, RingCentral is covering not only SMBs but also huge enterprises with more advanced needs as the system’s scalability, HIPAA compliance, or SD-WAN. Forgive me for not digging into the explanation of these concepts; just believe me, it’s complicated technical stuff. 

If you realize that you won’t target enterprise customers and you’re pretty happy providing services to small companies, it would be appropriate to look at the competitors of comparatively similar scope. This way, you can assume what worked well for them may deserve your attention as well.

When is the time to conduct the analysis?

As my ex-manager said: “It’s always a high season”. Though this phrase concerned the sales process, it is also relevant to competitive research. There is no such thing as the right moment for the analysis as the market is ever changing, and you should always keep your radar high to make timely decisions. But, if to set up some milestones, the UX competitive research and analysis should be one of the earliest stages of the product design process when you start working on a new project. Then, as the project develops, it would be reasonable to regularly check the competitive updates to stay on track. 

How to do the UX competitive analysis?

Based on my solid background (eleven years of hands-on experience can be considered “solid”, eh?) in competitive intelligence and product marketing, I’d like to list some pieces of advice which are worth taking into account before you start your competitive analysis.

Here they are.

General advice

  • Create a shortlist of main competitors (from three to five companies are more than enough) and criteria to set up defined research frames
  • Don’t forget to add the product you design to the list to compare with the competitive solutions
  • There is always a temptation to copy the design ideas of your market rivals. Before applying such practice, make sure they’re using the best practices you will benefit from inheriting
  • Mind indirect competitors (for example those, who operate in a vertical market which you don’t plan to enter so far)
  • Be inspired by your competitors’ UX design solutions but put your users and business goals first 

And with the last phrase, we’re smoothly coming to the main steps you need to take when conducting your UX competitive analysis.

Process steps

If this is the first time you will be conducting competitive analysis, you can use these steps to blueprint future research. They are logically organized, starting from the preparation stage up to the presentation of findings.

Set your goals and adhere to them 

Ideally, the goals should be assessable and as specific as possible. It will make it easier for you to evaluate the results and decide whether to proceed with the analysis to achieve the desired outcome.

Build a competitors’ shortlist

As I’ve already mentioned above, it is okay to start with three to five direct (and indirect, if appropriate) competitors. Although some sources advise having at least ten competitors on the list to gather more information, first, make sure you did a good job for the main ones. You can extend your list any time; it’s not set in stone.

Find what you have in common with competitors

We often think about differentiating our product from similar market offerings and highlighting the unique selling points. However, if some industry-recognized best practices in building a user journey exist, you shouldn’t overlook them when working on UX design. Check yourself referring to the UI usability principles and see what competitors are doing regarding key product features, tone, voice, page loading time, and user interface.

Create a feature comparison chart 

Put down all UX elements and other features of your competitors that you think are the most important for your product’s users. 

On the image below, such features are:

  • UI design
  • Sorting
  • Filters
  • Images
  • Load time
  • Responsiveness
A feature comparison chart comparing competitive companies by UI design, filters, images, load time, responsiveness, and sorting
Image credit: kabhishek.com

Compare your product to competitors 

As you already have a feature comparison chart from the step above, it’s time to figure out what makes your product stand out among other market players. 

A comparison table comparing a product to its competitors in terms of strengths, weaknesses, price, social media presence, and onboarding experience

This exercise is very useful to quickly understand where you’re obviously losing to competitors and where you’re performing much better.

Analyze your findings

You’ve conducted thorough research, which, let’s hope, gave you an idea of how you can improve your UX design. Now you know competitors’ strengths and weaknesses and imagine what design opportunities you have to speak your own voice.

Present your UX competitive analysis

In my competitive intelligence past, I learned one universal truth - whatever valuable information you found during your research, all precious insights will have no meaning if you can’t properly present them. Prepare a concise slide deck with the main points, backed up with persuasive proofs. Describe the impact of your research and propose an action plan.

Research methods

Even though we’re talking about the design here, fundamental marketing research methods can serve well when doing UX competitive analysis. 

Here are some marketing techniques you can use to conduct your research.

SWOT analysis

SWOT analysis example that lists a company's strengths, weaknesses, opportunities, and threats

The classics of marketing. The method helps evaluate external and internal factors that can influence a product (in our case, a design). The simplicity and comprehensiveness made the SWOT framework widely used in strategic marketing. It helps determine the product’s strengths and weaknesses and figure out market opportunities and threats. 

Conducting UX competitive analysis, researchers examine these factors in terms of design. Even though the SWOT matrix is a useful tool, it has its weak sides. The SWOT covers four aspects only, and there is a risk of overlooking other important points that may be crucial for the decision-making process. Thus, it’s recommended to complement this method with other marketing tools.

Porter’s Five Forces

ct substitutes, and new market entrants influence the product's market position

Porter’s model tells us that we should keep an eye not only on competition but also on other market forces that, to a greater or lesser extent, influence our market position. Buyers, suppliers, substitutes, and new entrants can dictate their rules and change your product’s market. Again, being super helpful, the Porter’s Five Forces model doesn’t provide a 360-degree market overview considering external factors only. Thus, it should be used along with other competitive analysis methods to get deeper insights.

Perceptual mapping

The tool’s main idea is to visualize customers’ perception of your product compared to the competition in a “price-quality” frame. A perceptual map is a helpful tool to understand what customers think about your product’s quality and if they consider the correlation between price and quality is fair enough.

Perceptual mapping helps identify customers' perception of a product in terms of quality-price ratio

The data represented on the perceptual map are gathered through surveys sent to actual and potential customers. The apparent disadvantage of this competitive research tool is that it boils down customers’ purchase decisions to two factors only - quality and price, whereas in reality, purchasing is a multi-faceted process.

So, as you can see from the above, whatever great competitive analysis method is, it can hardly be used alone without complementing it with other research tools. To have an entire picture, the combination of research techniques is what a thorough designer (in Eleken all our designers are like that) should use for UX competitive analysis. 

UX competitive analysis pitfalls

What can be wrong with competitive analysis, you think? One of the most significant problems is that you actually can be much better than the competition. “But that’s great!” you can say. Not really. Healthy market competition is a powerful driver to accelerate innovations. The desire to outrun other players in your industry pushes you to create outstanding solutions and change the world for the better. Understanding that you are already doing good and nobody can compete with you can lead to business stagnation. 

One more worth-mentioned point. Being absorbed with the analysis process, we can be easily drawn away from the actionable steps, craving to find “one more interesting stuff that will definitely help us stand out”.

The analysis is good, but actions decide.

Also, the outcome of the analysis fully depends on the ability of the researcher to correctly interpret the information. To avoid biased opinions, it’s a good idea to share the findings with other people, especially those who regularly work with data analysis.

In conclusion

In a world where restless creative minds invent something new all the time, it’s crucial to study the competitive landscape before starting to work on a product’s design. The thoughtful UX competitive analysis can give you valuable insights that will nudge you to implement successful design solutions. Be aware of pitfalls to make the best of your UX competitive research. And if you need any help with it - drop us a line

Share this blog post to social media if you find it helpful and worth reading.

Natalia Borysko

Author

Table of contents

Top Stories

Design process
/
0
min read

What is a UX Prototype? Learn the Value of Iterative Design

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 prototype example
Image credit: interaction-design.org

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

paper prototype example
Image credit: medium.com

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.

digital prototype made in Figma example

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

PowerPoint/Keynote

PowerPoint prototype example
UX prototype example made in PowerPoint. Image credit: youtube.com

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

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

prototype example made in Invision
Image credit: invisionapp.com

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

prototype example made in Sketch
Image credit: youtube.com

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 prototype example
Image credit: uxdesign.cc

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 XD prototype example
Image credit: www.sitepoint.com

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

HTML prototype example

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.

Design process
/
0
min read

Demo, Prototype, MVP, Full Product: What's Different in Your Approach to Design?

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.
demo design approach

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.

when to design a demo? demo example
Interactive demo of property management software Ajar

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.

prototype design example

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.

types of prototypes with design examples

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.

MVP design example

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.

design methods we use to design an MVP

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.

turning a wireframe into full scale design

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.
design thinking approach to full scale product design

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.

Don't want to miss anything?

Get weekly updates on the newest design stories, case studies and tips right in your mailbox.

Success!

Your email has been submitted successfully. Check your email for first article we’ve sent you.

Oops! Something went wrong while submitting the form.
Don't want to miss anything?

Get weekly updates on the newest design stories, case studies and tips right in your mailbox.

Success!

Your email has been submitted successfully. Check your email for first article we’ve sent you.

Oops! Something went wrong while submitting the form.