Data-Driven Design: How Metrics Can Make Your Product Successful

When designing a digital product, it’s not enough anymore for designers to just make it look good or feel intuitive. For the best results, every decision needs to be backed by data, and that’s where metrics come in. Metrics show how users interact with your product, what’s working, and what’s not. Without them, you’re stuck guessing what needs improving. But when you have data to fall back on, you can pinpoint exactly what needs improvement and focus your efforts like a laser.

Why Metrics Matter

Metrics help answer key questions like:

• How are users behaving on your site or app?
• Which screen or features get the most interest?
• Where do users run into problems most and quit using the product?

When you finally understand user behavior, it makes your decision-making so much easier at every stage of product development. Using hard data makes the design process not just creative, but also data-driven (and much easier to discuss with the senior management!).

Data helps designers understand how users interact with the product.

---

Metrics: Your Decision-Making Foundation

Metrics aren’t just a bunch of numbers and graphs. They tell the story of how users engage with your product. The data you gather helps you make the smarter decision at every step of the development process, whether you’re refining an existing product or building something brand new.

How Do Metrics Reveal User Behavior?

Imagine that you have a product on your hands, and you want to figure out why users are abandoning their shopping carts or leaving the app at a certain screen. Metrics will help you answer questions like:

• Which screens do users visit the most?
• At what point in the user journey do they leave the app?
• What features or elements of the app are being ignored?

By spotting these pain points, you can make informed decisions on how to fix your design.

For example, if the metrics reveal that the users abandon the cart in large numbers, it might be that the last step of the check-out process isn’t clear or user-friendly. The problem might be that the form the users have to fill out is too long, or that the “Buy Now” button is hard to find. When you know exactly where the problem lies, you can start addressing it directly by changing the interface.

Why Data Matters at Every Stage

Data takes the guesswork out of the process, pointing precisely to what needs to be improved. This means you can:

• Make the interface more user-friendly.
• Address specific business needs, like boosting user conversions or user retention.
• Keep optimizing your product continuously

---

Using Existing Metrics

When a client already has a product with metrics in place, that’s a real treasure trove of data for a designer. Any data collected using analytics tools is helpful in understanding how users engage with the product, where their pain points are, or why they leave the app.

The most important thing, however, is understanding how these metrics can be put into practice.

Example: A Product with Existing Metrics
Let’s say a client uses analytics platforms like Firebase, Google Analytics, or Mixpanel. Accessing this data gives you an instant view into user behavior, like which screens they visit most, where they pause, or where they drop off midway through their journey. Here’s a list of practical steps to help you make the most of this data.

Practical Tips for Using Data:

1. Identify Drop-Off Points

Head over to the analytics panel and find the screens or steps in the user flow where people are dropping off or abandoning the app. If you see an unusually big number of users abandoning their carts during checkout, it could be because there are too many fields to fill out, the navigation is tricky, or maybe something else entirely.

What you should do:

• Check the number of steps a user has to make to reach the desired point.
• Try removing unnecessary margins and screens.
• Consider adding a progress indicator to let users see how long a task is expected to take or how many steps are left in the ongoing process.

2. Analyze the Most Popular Screens and Elements

Use data from heatmaps or click maps to spot the most popular and attention-grabbing areas of the app or website. You might be surprised: some unexpected elements could be getting more taps or clicks, while the most important ones go unnoticed or ignored.

What you should do:

• If users engage heavily with a particular element, consider how you might increase its impact on their experience. For example, you might want to make the call-to-action (CTA) button easier to notice.
• If important elements aren’t being noticed, try changing their size, color, or position in the layout. For example, a CTA button like “Proceed to Checkout” has to stand out from the other interface elements.

3. Monitor Page Load Time

Users often leave an app or website simply because it takes too long to load. Metrics allow you track the average page load time and help pinpoint the areas that need improvement to boost performance.

What you should do:

• If a page loads too slowly, ask your software developers to optimize things like scripts and image size.
• Check whether the app’s performance can be improved for less powerful devices or slow connection speeds.
• Use skeleton screens to give users the feeling that the page is loading faster.

4. Form a Hypothesis and Test It

Once you’ve gone through all the metrics, it’s time to come up with a hypothesis for improving the user experience. For example, if you notice customers are abandoning their carts at checkout, try offering a simpler form with fewer fields. Every time you make a change, it’s imperative to track how exactly it impacts the numbers. Ask yourself: Is the conversion rate improving? Are fewer customers dropping off?

What you should do:

• Implement changes gradually. Don’t be tempted to implement them all at once. This way, you can clearly identify the types of changes that deliver the results you want.
• Use A/B testing to compare several versions and decide on the best one.

5. Work Together with your Software Engineers

Metrics often reveal problems that a designer can’t fix on their own. These issues might involve performance or complex backend processes. That’s why working closely with developers makes a big difference—it helps get changes implemented faster and optimizes the product.

What you should do:

• Have regular meetings with your software developers to discuss data-based findings and how they can be used for improvements.
• Get your entire team involved and show them how metrics can be used to identify and eliminate problems.

---

What If I Don’t Have Metrics?

Sometimes, a client might not have much data or metrics, or they might not be using any analytics tools. This is pretty common when you’re working with a startup just getting off the ground or a client whose product hasn’t been equipped with tools to track user behavior. Even in situations like this, the designer shouldn’t just aim to work with data—they have to. It’s just a matter of figuring out how to gather it.

Example: A Product Without Analytics
If a client doesn’t have any metrics, the first thing I do is ask the developing team to add custom events for key areas of interest. These events help track how users interact with the product—like the buttons they tap, how they navigate from one screen to another, where they drop off before finishing a task. While the metrics are being gathered, it’s a good time to start improving the UI/UX based on your hypotheses.

Handy Tips and Tricks for Working Without Metrics:

1. How to add Custom events (using a simple example):

Custom events let you track specific user actions, such as button taps, moving to a new screen, filling out forms, etc. This is done through code and usually involves close collaboration with the developers.

Example:
Imagine you have a “Proceed to Checkout” button, and you’d like to find out how many users tap it. Ask your developers to add a custom event, which is activated every time this button is tapped.

The code might look something like this:

button.addEventListener('click', function() {
  analytics.track('Order Button Clicked');
});

Once the event is added, you’ll start getting metrics on how many people are tapping the button. This will give you insight into how well the current design is performing and whether it needs any tweaks or improvements.

2. Forming hypotheses for improvements:

While you wait for the data to start pouring in, it’s important not to waste time. Make use of common sense and logic to form hypotheses on interface enhancements. For example, if you notice that users might get confused when navigating a particular screen, start off by brainstorming a solution that would fix this issue.

Example:
If your registration form is on the long side, it’s safe to assume that its length might be why users drop off midway through their journey. In this case, your hypothesis could be: “Shortening the form will increase completed sign-ups.” Once you have the metrics, you can test if the hypothesis holds true.

What you should do:

• Take a close look at the existing interface and try to spot the elements that might cause difficulties or confuse users.
• Form a hypothesis that you can test as soon as you get the data.
• Start working on improvements based on your hypothesis.

3. Set Goals and Track Results

As soon as the developers set up custom events and the initial data starts coming in, you can identify your Key Performance Indicators (KPIs). This could include the percentage of completed registrations, the number of “Proceed to Checkout” clicks, or the time users spend on important screens.

What you should do:

• Define your key goals, like boosting conversion rates or reducing bounce rates.
• Have your developing team create a real-time dashboard to help you track these metrics.
• Monitor how changes impact the KPIs, and make adjustments as needed.

4. Adapt and Adjust to Incoming Data

When you finally get your hands on those first metrics, dive into analyzing them right away. This data might confirm your hypotheses or uncover new problems you didn’t even know existed. It’s essential to stay flexible and keep optimizing the interface based on new, incoming data.

What you should do:

• Keep analyzing data regularly and tweak your design to what the facts show.
• Don’t be afraid to experiment and test new hypotheses, even if a prior hypothesis didn’t pan out.

---

Designing a Product from Scratch

When you’re building a product from the ground up, the process involved is a lot different from working on an existing product. You not only have to think through every detail of the interface, but also lay a solid plan for future data analysis. As you sketch out the interface, think ahead and decide on what metrics you’ll want to track in the future. This will help you create a convenient-to-use product from the very beginning.

Example: A Startup or a New Project
When I start working on a new project, my process always involves several stages: research, making a rough draft and a low-fidelity wireframe, and then the final design. Here’s a couple of handy steps on how to do it.

Start Your Competitive Analysis and User Research

Before starting the design of your interface, it’s crucial to conduct research. You need to understand who your users are, what tasks they need to accomplish, and whether similar products already exist on the market. This helps you avoid costly mistakes during the design process.

What you should do:

• Gather data on your target audience, including their age, interests, and common challenges. You can get this data via interviews, surveys, and competitive analysis.
• Study competitor products to find out which interface elements are effective and which ones might be giving users a hard time figuring out what they need to do.

Sketching Rough Drafts and Wireframes
Instead of jumping straight into detailed, high-fidelity prototypes in the early stages, begin by sketching rough drafts or wireframes. This will go a long way in helping you test your ideas and determine the overall structure of your product early on. This allows for easy adjustments without making the process too time-consuming.

What you should do:

• Start with simple sketches (either on paper or digitally) to outline the product’s basic structure—defining key screens and essential interface elements.
• Share these drafts with clients or users to get feedback. This will help you address any potential issues early in the process.
• Lay the groundwork for analytics from the very beginning.

Even if your product isn’t fully developed, you should consider what metrics you’ll need to track early on, even at the drafting stage. This might include tracking the number of taps, completed tasks, or the total time users spend on a specific screen.

What you should do:

• Identify the key events to track for measuring user interaction, like button taps or completed tasks.
• Discuss with developers beforehand which interactions will be tracked to avoid reworking the product later just to add analytics.

Test the Low-Fidelity Prototype on Real User

Once you’re done making wireframes or a low-fidelity prototype, test it with real users. Even at this early stage, testing can uncover critical issues like confusing navigation or non-user-friendly processes.

What you should do:

• Test your prototype with a user group. Ask them to carry out a couple of tasks and observe their behavior.
• Use their feedback to make improvements before you set to work on the final interface.

Moving on to the High-Fidelity Prototype and Final Design

After you uncover and root out the main issues during the early stages, move on to the final version of the interface. At this stage, you need to take into account everything you’ve learned, and continue working hand in hand with the developing team to implement all the nuts and bolts of analytics.

What you should do:

• Design the final mockup with all visual elements and animations.
• Work closely with developers to add all the essential custom events and other analytics tools based on the metrics you’ve discussed and agreed on.

---

Metrics and Teamwork

Working with metrics isn’t just the designer's responsibility. To create a truly successful product, it’s crucial to establish clear communication with the client, software engineers, and analysts. Metrics help all team members and stakeholders get a better grasp of user behavior and make well-informed decisions. Metrics should guide every stage of product development, which requires close collaboration among everyone involved in the process.

Handy Tips for Teamwork with Metrics:

Regular Meetings to Discuss Data

As soon as metrics start coming in, analyzing them should become a core focus for the entire team. This will help everyone understand what works and what doesn’t, giving them the opportunity to implement changes quickly. Designers and software engineers need to have regular meetings to discuss data.

What you should do:

• Schedule weekly or biweekly meetings to discuss key metrics with the team.
• Use these meetings to evaluate hypotheses. If something didn’t work out, think how it can be made to work.
• Use dashboards to visualize data for the convenience of all stakeholders. For example, Google Analytics and Mixpanel offer features that allow you to add easy-to-use dashboards that help track key metrics.

Data-Based Collaborative Decision-Making

Sometimes data can point to unexpected and surprising results. Decisions on product changes shouldn’t be left to the designer alone; developers and analysts have to get involved. Each member of the team might use data to come up with a unique perspective.

What you should do:

• Get your developers involved in metrics analysis. For example, if metrics show slow page load times, collaborate with them to decide how to optimize performance.
• Analysts can give deeper insights into how users behave on different platforms or in different regions, and how this might influence interface design.
• Come up with solutions and test them as a team. For example, if metrics show that users struggle to find a key button, designers might suggest changing its color or position, while developers can run A/B tests to determine the best version.

Developers as Key Partners in Working with Metrics

Developers play a key role in interpreting metrics. They help add and fine-tune custom events, fix the product logic issues, and optimize performance based on the data. Since designers might not be familiar with the technical ins and outs of the process, they need to turn to developers for help.

What you should do:

• Work with developers to add metrics from the very start. For example, adding custom events is something you might want to get their help with. Discuss with them what parts of the interface need tracking.
• If the data indicates that certain pages or elements are loading slowly, ask developers to check what can be improved code-wide, like improving loading times or reducing file sizes.

Inform Clients and Other Stakeholders About Metrics

Clients, senior management and other stakeholders often aren’t familiar with the technical details of a product's inner workings, but they do want to see how the team is progressing and what their results are. Metrics give them a clear picture of the improvements made and their impact on users.

What you should do:

• Have regular client meetings to show them metrics and explain how they affect the product. For example, if the improved design has increased the conversation rate by 20%, you should probably highlight it.
• Create presentations with visual data to make it easier for stakeholders to see the changes that led to improvements. This could include graphs that show metrics like increased average time spent per user or a reduced bounce rate.

Use Tools for Teamwork with Metrics

To make sure that the process of analyzing and implementing changes is fast and efficient, you need to use the latest data tools. These might be Jira, Trello, Figma, or Miro, which not only help track progress, but visualize design changes and their impact on metrics.

What you should do:

• Use Figma to display all prototypes and track data related to each design, which lets the team see the elements that need modifying based on data.
• Use Miro, Trello and other tools to brainstorm and discuss solutions. For example, you can create a board displaying all hypotheses, test results, and improvement suggestions.

Regular Analysis and Iterations

Working with data is a constant effort. You can’t just kick back after your first successful update of the product. Instead, you should keep monitoring your changes and refine the product as needed. This requires ongoing analysis and iterations.

What you should do:

• Implement changes gradually, tracking their individual impact to avoid overwhelming the product with too many modifications at once.
• Hold regular retrospectives to evaluate what went well and decide on areas for improvement in teamwork and metrics-based processes.

---

Conclusion

Metrics aren’t just numbers. They are a powerful tool that allow designers to make well-informed decisions at every stage of product development. Without this data, designers are left to work in conditions of uncertainty and ambiguity, relying on intuition and guesswork. But if you have access to metrics, you get a crystal-clear view of how users engage with the interface, where they stumble into problems, and what needs improving to make their life easier and your product better.

Working with metrics is essential not only at the product development stage, but at the very start of creating a new one. Metrics allow you to focus your efforts in the right direction and avoid pitfalls that could drive users away. Working with metrics successfully requires tight collaboration with your entire team—developers, analysts, stakeholders, and clients. Without their support and collaboration, metrics lose their effectiveness.

Key Practical Takeaways:

1. Metrics-Based UI/UX Improvements
Analyzing user behavior using metrics helps not only improve interfaces, but also address specific business goals like driving up the conversion rate, reducing the bounce rate, and enhancing user retention.

2. Working on Products Without Metrics
Even if a product doesn’t have ready-to-use metrics, you can always request custom events to start gathering data and forming hypotheses for product improvement. This process helps speed up decision-making without having to wait for a comprehensive dataset.

3. Making a Product from Scratch
When working on a new product, it’s crucial to plan for the use of metrics from the very beginning, so that the designer and the entire team can analyze and improve the product using real-time data.

4. Teamwork
Working with metrics requires teamwork. Only through collaborative efforts that involve each and every member of the process—from designers to developers and analysts—can we achieve successful, data-backed implementation of changes. The entire team should be actively engaged in analyzing metrics and implementing changes.

The Importance of Continuous Analysis:

Working on a product doesn’t stop after its launch. Metrics let you see how users continue to engage with the product, which updates are working and which ones are falling short. Continuous analysis and iteration guarantee a successful product that will always meet both user and business needs.

Thanks to Vlada for the illustrations.