case • 12 min

fivestart

Customer feedback interface design + MVP launch. Performed research, designed a service for business and achieved Transaction Cost decrease • fivestart.ru

×2 times

minimized onbarding steps to start working

35%

accelerated the key interface tasks solution

100%

respondents are ready to choose a product

Abous

Research

Wireframe

Low fidelity prototype

Moderated UX tests

Design

References, moodboard

Final Design

Customer app

Dashboard + Corner cases

🔥 Launch

Results

About

Client and targer

Fivestart is a service for working with the feedback, helps businesses to increase their rating in Yandex, Google, 2GIS. The main feature is a QR code for collecting reviews with analytics and filtering out negativity.

The target is to design a service interface: from zero → to one. Design a personal area, an application for customers and a product page

Tasks

Design research

Talk to potential users. Understand needs and pains

Make CJM and JTBD

In order to close the pains and make a useful product

Low fidelity, UX tests

Test the interactive prototype to catch problem areas in advance

Interface design

Think through possible states. Build a UI-kit for development

★

Launch MVP

Show clients the β-version and get the first results

Roadmap

Divided the project into sub-tasks so I wouldn’t get lost and get the work to the final stage

Research

Competitive analysis, benchmarking

Collected all known products and, where possible, went through the client’s path: from landing to work with the product

→

Product
Myreviews
Hotmaps
Winlocal
Dailygrow
Goodvice
Pointer
Revvy
Pinbox
Rang
RocketData

Cost, mo	Sign up	Trial	Onboarding	Start	Analitycs	QR-codes	Mobile	Screenshots	Demo
255 ₽	✅	7 days	✅	8 steps	✅	✅	⨉	✅	⨉
990 ₽	✅	⨉	✅	9 steps	✅	⨉	✅	⨉	⨉
1000 ₽	✅	14 days	✅	6 steps	✅	✅	⨉	✅	⨉
1000 ₽	⨉ closed	7 days	⨉	⨉	✅	⨉	✅	✅	⨉
500 ₽	⨉	7 days	⨉	⨉	✅	⨉	⨉	✅	⨉
1000 ₽	⨉	⨉	⨉	⨉	✅	⨉	⨉	✅	⨉
2990 ₽	⨉	⨉	⨉	⨉	✅	⨉	⨉	⨉	⨉
5000 ₽	⨉	⨉	⨉	⨉	✅	⨉	⨉	✅	⨉
19 000 ₽	⨉	⨉	⨉	⨉	⨉	⨉	⨉	⨉	⨉
⨉	⨉	⨉	⨉	⨉	⨉	⨉	⨉	⨉	⨉

~~Problems~~
Growth points and why they’re important

No onboarding, it’s hard to get started

After registration you get to an empty personal account with no instructions. Most services have «manual» registration through the manager

A lot of clicks to solve problems

The average is 3.4 clicks. There is great potential to speed up the work and reduce the number of required clicks

Confusing analytics

It is difficult to make conclusions when the data are spread out in different places. It can be done more efficiently

Poor interface design

Product pages hide screenshots. This can cause mistrust both at the stage of getting to know the product and in the process of using it

Personas

This is to avoid getting overwhelmed by the design and forgetting who we’re creating the interface for. I have fixed the main categories we are aiming at

Persona 1

Small entrepreneur with 1 office. Runs a business on his own or with a small team

Persona 2

Entrepreneur with multiple offices: 2 to 5. Relies on a team, but still solves things on his/her own

Persona 3

Manager, entrepreneur’s assistant. Does not make a decision, but compares offers and presents the conclusions

User interview

I conducted 7 interviews with potential users. Since the product combines two interfaces: one for business and one for clients, I talked to each category separately.

30 minute interviews with open-ended questions to understand the current environment, how people are solving problems now, create scenarios and get the maximum new information. From the non-obvious, I found out that sometimes customers only want to submit a complaint and they don’t need to solve the problem

Jobs to be Done

Based on user interviews, I identified 3 segments for each audience. JTBD is convenient for quick pain search and generation of accurate hypotheses.

In addition to «make a good design», I’ve thought about useful features that will help make the service more comfortable in everyday use

CJM as is

Mapped out the customer journey based on competitors’ float. The key point is to capture the points of contact with the product and the tasks/motivations for what purpose the customer is on the page.

For example, the purpose of a product page is to sell. At the same time, none of the existing products give a demo version. To improve sales and get closer to the user, we can add a demo with a QR code to our landing page, let them «feel» the product

Hypotheses

Generated hypotheses on how to close the pains and make a useful product

🤔

Decrease Transaction Cost

Simplify onboarding, reduce the complexity of connecting to the product

🤔

Speed up the work

Reduce the number of clicks required to solve key tasks in the interface

🤔

Make a nice UI

Use aesthetic-usability effect — the aesthetic interface is experienced as more intuitive

Wireframe

User flow

I designed a flow of two parts of the service: for customers and for business. Since the goal is to reduce Transaction Cost (to speed up all processes), I tried to reduce the number of required steps to achieve the result

Screen map

In order not to miss anything, I created a map of all pages of the service with their content. This helped to determine the overall structure of the project and the scope of work

Low fidelity prototype

In 3 iterations I created a prototype of the service. With the help of quick corridor tests I managed to make it quite detailed. This saved resources at the following stages

The Baymard Institute research, 2024 showed that the summary of the rating distribution was more important than the content of the reviews themselves. That’s why on the dashboard I’ve allocated this block the 2nd place, right after the reviews chart.

Identified and solved new problems that are not solved in any way in other products. For example:

How can I see the dynamics of growth?

→ We need a useful table to see the rating increase in a more explicit way

How can I download all QR codes at once?

→ It is worth putting QR codes in a separate area. After all, it is difficult to look for the required QR code every time you go to the company’s settings

How do you split statistics across different companies when there are multiple ones?

→ Separate the concepts of «company» and «branches», separate them visually

Moderated UX tests

Conducted some UX tests on an interactive prototype: gave a person to do interface tasks, watched carefully and noted down. Examples of tasks: register and start working, find a QR code, add a branch office

Research and good preparation helped to pass this stage perfectly. In the tests, people were only sometimes confused by the wording in the interface. I did a UX-edit and fixed everything quickly.

What barriers I found and how I solved them

During the onboarding step, it’s important for the client to realize that they don’t have to add all branches at once

→ Explicitly stated that you can do it later

The «To Stats» button at the end of the onboarding was problematic because the client had just connected

→ Replaced it with «To Dashboard»

The phrase «enter the real name of the company» is not scary. People still type in «aasdasdasdasdasd» to get through anyway

→ «This title will be seen by customers» helped

The avatar in the account caused questions. Why do you need it in such a product?

→ deleted it, for real

Design

References, moodboard

The design concept is minimalism with a peculiarity. Feedback is about people, about their mood, about something alive and bright in all forms. And there is not too much data in the product, so it is possible to make them larger and more expressive

Result

Designed 20+ layouts: all sections + registration flow and onboarding

Customer app

A public interface for reactions that opens by QR code or link. I started with it to «feel» the style and decide on the atoms of the whole design

Dashboard

Start screen with visual widgets. It is convenient to study the figures, understand what they are made up of, and see the growth in the format «was and became». This helps to numerically measure the benefit of the product and motivates you to renew your subscription to the product

Companies

A user-friendly table with addresses for each company. The service tells you which platforms a specific branch is connected to and gives the business an understanding of coverage

App settings

Some can give a discount for feedback, while others only have the option to ask. In the product, you can quickly edit text and smiles to match your goals and your Tone-of-Voice

Onboarding

The product offers automatic search of the organization by address. If there are other branches with the same name, you can add them immediately with one button

If the search fails (things happen on the tech side), there is an option to add a company via a direct link. There is a hint where to find this link

UI-kit

The whole design is assembled from a small number of simple components that can be easily edited and easily delivered to development

Parameters are carefully signed and placed on the main panel using Nested Instances

Launch

Product page

To promote the service, I developed and launched a product page. With a prepared style and UI components, it was done quickly.

At the MVP stage, only the customer app will be developed, so the marketing focus is on the QR code. Landing explains how the app works, shows a demo and invites to request for connection

MVP App

I have developed an MVP-version of the client app. While a personal account has not been developed yet, the finalized app gives a great opportunity to get real clients connected now and get the first results

Current MPV targets:

test, find more growth points
get the first business results
collect success cases for the product page to make sales more powerful

Results

Transaction Cost has decreased. 100% of respondents are ready to choose a product by comparing it with competitors. The result is due to clear navigation, sections with higher information density and good UX-editing