WORK
ROI Calculator
Unbounce
MEDIUM
Digital Tool
DELIVERABLES
UX, UI
PROJECT ROLE
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.
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.
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.
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.
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.
Mockup
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.
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.
Credits:
Project Lead/Growth Marketer (Dev): Anna Roginska
Lead Copywriter: Garrett Hughes