ROI Calculator



Digital Tool




Lead Designer

Project overview:

The Unbounce ROI calculator had been around for quite some time and was quite outdated. Our growth marketer was running experiments on the Unbounce checkout flow and used the ROI calculator as one of the test variants. An exit-intent popup with the ROI Calculator was triggered when people were exiting the checkout process. From the insights of the experiment, we found that this variant was a huge success, as it increased 19% in conversion rate, meaning that there was a significant lift in signups on the platform.

With this data, there was a huge opportunity to further develop the ROI calculator to generate even more ROI for Unbounce. As the original calculator was very outdated and off-brand (it was literally 5 years old—that’s a lot in tech years), not only did we design it to be more brand-consistent, but also incorporated more of Unbounce’s value, as well as improving the overall experience. While the revamp of the tool was initiated from the checkout, it would be leveraged for many other purposes, such as sales and different parts of the funnel.

Project Goals

  • Improving the user and brand experience of the original outdated ROI calculator and better communicating the value of Unbounce
  • Pushing more people down the funnel and reducing bounce rate during checkout.

Design process:

We had an initial kick-off with the growth marketer, in which the premise and objectives of the project were communicated. She provided the data that was acquired from the checkout experiment, where we had an exit-intent popup with the ROI calculator that resulted in a 19% increase in new trial starts on the Unbounce platform due to a decrease in bounce rate.

Unbounce ROI Calculator Process Discovery


Reference Research

Each of us looked for inspirations of similar tools out there, as well as visual and interaction references. From our findings, we evaluated the flow and interactions, which gave us ideas on how to approach the ROI calculator tool we were building.

Unbounce ROI Calculator Process Information Architecture

Information Architecture

As we had some ideas on how we approached the tool, we brainstormed on the flow of the calculator, as well as the information we needed to acquire from users to present in the report. The old calculator was more generic so we found an opportunity to create a more personalized experience for the user. We then established the questions that we needed to ask to achieve the level of personalization we wanted and determined whether we had the data for them, as well as the scope. We decided to launch with a simplified flow as an MVP to experiment with first. We’d then evaluate whether to incorporate the more complex flow once we gather enough data from the first version.

Unbounce ROI Calculator Process Sketching Wireframing

Sketching & Wireframing

With the decision of launching an MVP version, the growth marketer and I sketched out the screens together using Miro. We wanted to create a more guided experience compared to the old calculator, as we felt the research references with that worked well, so we sketched it out as a multi-step format by splitting each question into its own screen. Once we were happy with the outcome, I designed the high-fidelity wireframes.

We received some design feedback for the initial wireframes, in which we iterated. When the wireframes were ready, I created an Invision prototype with them to prepare for usability testing.

Unbounce ROI Calculator Process UR

Usability Test

We used the wireframes as a prototype to test the flow and usability of the tool. We defined the goals of what we wanted to learn from the user research, and created a session guide, along with a notetaking template. I contacted people from our user research participant list that fitted within our target audience and scheduled usability test sessions with the ones that were interested. From there, the team rotated our roles in the sessions as either a moderator or notetaker.

After we completed all of the sessions, we identified patterns in the participants’ responses and documented a findings summary from the insights. As a team, we reviewed the findings and discussed the next steps of what we needed to change to solve the usability issues we discovered.

Unbounce ROI Calculator Process Mockups


With a clear direction of what to change, I turned the wireframes into mockups by incorporating UI components and visual design into them, while making changes to solve the usability issues we discovered from the qualitative data we gathered. As I was making changes to the design, the copywriter refined the copy. Once the copy was completed, I updated the copy on the design file to finalize the mockups and imported them into Zeplin to prep for development transition. On Zeplin, I added developer notes on the areas that would have interactions and animations. We then met with the growth marketer to discuss the hand-off of the final design.


ROI Calculator Overview

The ROI calculator has two parts. The first part is the calculator, where the user is asked a series of questions about their business (industry, ad spend, traffic, conversions, and conversion value). From their answers, the tool calculates their ROI, cost-per-click, and conversion rate with Unbounce, which would be displayed on the second part of this tool—the report of the results.

ROI Calculator Flow

The flow of the calculator itself is broken down into screens in a multistep format. The user first sees an intro and then an overview of what kind of info they need for the calculation. Once they have the context, they are then prompted to answer a few questions about their industry, ad spend, traffic, conversions, and conversion value.

ROI Calculator Report Overview

When the user has gone through all of the steps in the ROI calculator, their results will be displayed on a report. The report shows them their current ROI, cost-per-click, and conversion rate in comparison with Unbounce, as well as our new feature, Smart Traffic.

ROI Calculator Report

In addition to the result summary, we added a couple of elements to further highlight our value props, such as social proof and more info about our product and features. If users are curious about how the results are calculated, a “how it works” section is at the bottom for them to learn more. Lastly, the report is shareable via a link if the user requires more solid data to convince their boss/colleagues.

Key takeaways:

Don’t be afraid to initiate collaboration.

When there’s a chance to help impact the business through your expertise, don’t hesitate to reach out and initiate support, as long as time and availability allow it. This project was a great opportunity for me to not only work more closely with and learn from our Growth Marketer, who works as an individual contributor and usually runs experiments without the help of others on the team, but also grow professionally by working on a more UX design-related project, which is what I’m more passionate about. It was refreshing to collaborate with someone I didn’t usually work with and was able to inspire each other through our processes and knowledge. While I introduced the UX design process, I learned from the Growth Marketer’s process of building more scrappy experiments. In the end, I really enjoyed the dynamic of working with her, along with the established process and its outcome.


Project Lead/Growth Marketer (Dev): Anna Roginska

Lead Copywriter: Garrett Hughes