How metrics make your product successful
Hello everyone, my name is Alexander and I do design that is based on metrics. We can probably start our little circle on digital product design with this phrase.
When it comes to creating IT products, it is important for a designer not only to make the product beautiful and convenient, but also to base his decisions on real data. This is where metrics come to the rescue. They show how users interact with a product, what works well and what doesn't. Without metrics, we can only guess what needs to be improved. But when you have data, you see what is really happening and can make targeted improvements to the product.
Metrics provide answers to the following questions:
How do users behave in your product?
Which screens or features are generating the most interest?
Where are users most likely to make mistakes or leave the product?
When we begin to understand user behavior, it is easier for us to make decisions; design becomes not just creative, but based on real facts.
Metrics as a basis for decision making
Metrics are not just numbers and graphs, they are data that allows you to make the right decisions at every stage of development.
How do metrics help us understand user behavior?
Let's imagine that you have a product, and we want to understand why users did not complete the purchase or left some screen. Metrics will help answer questions such as:
Which screens do users visit most often?
At what steps do they leave the product?
What features or elements of the product are being ignored?
For example, if metrics show that users are leaving a page or screen in droves, there may be something inconvenient there. It could be a form that is too long or a button that isn't visible. And when we know the problem, you can start solving it, starting with design.
Why is data important at every stage?
Using data helps you not just “guess” what needs to be changed, but helps you know exactly which areas need improvement.
Working with existing metrics
When the client already has a product with established metrics, this is a real treasure for the designer.
Пример 1: Продукт с установленными метрикамиПредположим, клиент использует аналитические платформы, такие как Firebase, Google Analytics, или Mixpanel. Получив доступ к этим данным, мы можем сразу увидеть поведение пользователей. Вот несколько практических шагов, которые помогут эффективно поработать с данными.
Look for drop-off points
For example, if users are abandoning their cart en masse during the checkout phase, this could indicate an issue with form length, complex navigation, or something else.
What to do:
Check how many steps the user needs to go through to complete the action.
Reduce unnecessary fields and screens.
Analyze popular screens and elements
Use heatmap data or click maps to understand which screens and elements attract the most attention.
What to do:
If users are actively interacting with a certain element, think about how you can increase its impact.
If important elements go unnoticed, try changing their location, size or color. For example, the CTA button “Place an order” should stand out from the background of other interface elements.
Monitor screen loading speeds
Sometimes users leave a product simply because pages take too long to load. Metrics allow you to see the average screen loading time and understand where you need to optimize performance.
What to do:
If loading is slow, ask engineers to optimize resources (images, scripts, etc.)
Check to see if you can improve the app's performance on weak devices or slow connections.
Create hypotheses and test changes
After analyzing the metrics, you can formulate hypotheses for improvements. It is important to check every time how changes affect the metrics – whether conversion is increasing, whether failure points are decreasing.
What to do:
Implement changes gradually, not all at once.
Use A/B testing to compare multiple options.
Work together with a team of engineers
Metrics often reveal problems that a designer cannot solve alone. This may relate to performance or complex processes on the backend. Therefore, close cooperation with developers will help to quickly implement changes and optimize the product.
What to do:
Hold regular sessions with engineers to discuss data and improvements.
Engage your team in the process by showing how metrics help you find and fix problems.
What to do if there are no metrics?
It is not always the case that a product has data collected. But even in such a situation, a designer can and should work with data—you just need to create it.
Продукт без аналитики. Если у клиента еще нет метрик, первым делом я прошу команду разработки добавить Custom events (пользовательские события) для интерактивных зон. Эти события помогут отслеживать, как пользователи взаимодействуют с продуктом: какие кнопки они нажимают, как двигаются по экранам, где бросают задачу. Пока метрики собираются, можно начать работу над улучшением UI/UX на основе гипотез.
How to work without metrics:
Add Custom events (using a simple example)
Custom events allow you to track specific user actions, such as clicking a button, going to a new screen, filling out a form, etc. Usually requires working with developers.
Example:
Let's say you have a “Place an order” button, and you want to find out how many users click on it, you need to add a Custom event that fires every time this button is clicked.
button.addEventListener('click', function() { analytics.track('Order Button Clicked');});
After adding such an event, the metrics will begin to flow, and we will be able to see how many users clicked the button.
What to do:
Identify key activities that are important to track
Add Custom events for these actions.
Start collecting data and using it in your work.
Formulate hypotheses for improvement
While the data has not yet begun to arrive, it is important not to waste time. Use common sense to formulate hypotheses for improving the interface.
Example:
If you have a long registration form, we can assume that users are not reaching the end due to its length. In this case, the hypothesis could be: “Shortening the form will increase the number of completed registrations.” Then, when the metrics start coming in, we can check if the hypothesis was correct.
What to do:
Formulate hypotheses that we can test once the data becomes available.
Start working on improvements based on these hypotheses.
Set goals and keep track of them
Once developers implement Custom events and we begin to receive the first data, it is important to immediately identify key success indicators (KPIs). For example, this could be the percentage of registrations completed, the number of clicks on the “Checkout” button, or the time spent on key screens.
What to do:
Determine the main goals (for example, increasing conversions, reducing the number of failures).
Set up a dashboard where we can track metrics in real time.
Monitor how changes affect metrics and make further changes to the design.
Adapt as data comes in
As soon as we start receiving the first metrics, immediately begin analysis. It's important to remain flexible and continue to optimize the interface based on new data.
What to do:
Regularly analyze collected metrics and adapt your design based on the data.
Experiment and test new hypotheses.
Designing a new product from scratch
When we are tasked with creating a new product from scratch, the process is very different. Here it is important not only to think through every detail, but also to lay the foundation for future data analysis.
Design begins with sketches (scratch versions), and already at this stage it is possible to envisage the use of metrics in the future.
Стартап или новый проект. Когда я начинаю работать над новым проектом, мой процесс всегда включает несколько этапов: исследование, создание набросков, дизайн низкой точности (low-fidelity), а затем — финальный дизайн.
Here are some practical steps to help you:
Start with audience and competitor research
It's important to do your research before you start designing. You need to understand who will use the product, what problems they want to solve, and what products are already on the market. This will help avoid mistakes at the design stage.
What to do:
Collect data about the target audience: their age, interests, typical problems. This data can be obtained through interviews, questionnaires or competitor analysis.
Analyze competitors' products.
Create draft versions and wireframes
Don't start with high-fidelity mockups right away, make wireframes to quickly test ideas and understand what the product structure will look like. This stage allows you to quickly make changes without spending a lot of time.
What to do:
Start with simple sketches (paper or digital) to determine the overall structure of the product.
Test the sketches. This will help you quickly identify problems in the early stages.
Lay the foundation for analytics from the start.
Even if you don’t have a finished product, it’s important to think about what metrics you’ll need in the future already at the design stage.
What to do:
Identify key events that will be important to measure user experience (for example, clicks on key buttons, completion of processes).
Agree with the developers what will need to be tracked.
Test low-fidelity design with real users
Once the early prototypes are ready (for example, wireframes or low-fidelity mockups), start testing them with real users. Even at this stage, testing can help identify major problems, such as difficult navigation or awkward processes.
What to do:
Test with a group of users: have them perform several tasks in the prototype and observe their behavior.
Gather feedback to make changes before creating the final design.
Move to high-fidelity and final design
Once all the major problems have been identified and corrected in the early stages, you can move on to creating the final design.
What to do:
Create final layouts, adding all visual elements and animations.
Implement all necessary Custom events and other analytics tools based on the previously discussed metrics.
Metrics and teamwork
Working with metrics is not just a designer's task. To create a truly successful product, it is important to establish effective communication with the client, engineers and analysts.
Metrics allow all team members to better understand user behavior and make informed decisions. It is important that metrics influence every stage of product development, and this requires close coordination between all participants in the process.
Regular meetings to discuss data
Once metrics start flowing in, analyzing them should become a regular practice for the entire team. It is important that the team meets regularly to discuss the data.
What to do:
Schedule weekly or bi-weekly meetings with the team.
Analyze which hypotheses were confirmed and which were not.
Use dashboards to visualize data for all participants.
Collaborative data-driven decision making
Sometimes data can show unexpected results. It is important that decisions about what to change in a product are made not only by the designer, but also with the participation of engineers and analysts.
What to do:
Involve engineers in the metrics analysis process.
Offer deeper insights, such as how users behave on different platforms or in different countries, and how this can influence design.
Come up with solutions and test them together.
Developers as key partners in working with metrics
Often the designer may not know the technical nuances, and in such cases engineers come to the rescue.
What to do:
Work with developers to implement metrics from the beginning.
Check what can be improved at the code level (load optimization, reducing file size, etc.).
Customers and stakeholders need to understand metrics too
Often clients or stakeholders are not deeply immersed in the technical aspects of the product, but they want to see how the work is progressing and what the results are.
What to do:
Show metrics and explain how they affect the product.
Prepare presentations with visual data so that clients can easily understand what changes have had an impact.
Regular analysis and iteration
Data is a living process. It is important not to stop after the first successful improvement, but to constantly monitor changes and make adjustments as necessary.
What to do:
Implement changes step by step so that you can see the effect each time and not overload the product with too many changes.
Conduct retrospectives: Regularly evaluate what worked well and what could be improved in teamwork and the metrics process.
Conclusion
Metrics are not just numbers, but a powerful tool that allows the designer to make informed decisions at every stage of the product.
Working with metrics is important not only at the stage of improving existing products, but also when creating new ones. Metrics allow you to set the right direction and help you avoid mistakes that can scare users away.
Conclusions:
1. Metrics as a basis for UI/UX improvements
Analyzing user behavior through metrics helps not only improve interfaces, but also solve specific business problems.
2. Working with products without metrics
Even if the client doesn't have metrics ready, you can always request the addition of Custom events to start collecting data and building hypotheses for improvements.
3. Design from scratch
For new products, it is important to build in the ability to collect metrics at the earliest stages so that in the future the designer and the entire team can analyze and improve the product based on real data.
4. Teamwork
Metrics are a team effort. Only the collaborative efforts of everyone involved in the process, from designers to engineers to analysts, can lead to successful implementation of data-driven change.
The importance of constant analysis
Work on a product does not end after its launch. Metrics allow you to see how users continue to interact with the product, which changes work and which don’t. Constant data analysis and iteration are the key to a successful product that will always meet user needs and business objectives.
