CASE STUDY #2
Amping Up CTA Clicks with
Some UX Fixes!
Setting the Premise
Kissflow HR cloud and Procurement are some of the flagship products under the Kissflow brand. This case study highlights the usability issue we encountered on its feature page and how fixing it helped us improve our CTA clicks
Challenges I Faced
With a tight deadline approaching, the HR and Procurement product’s feature page had to be launched with only the aesthetics of it taken care of. After I launched it, I identified several usability issues on The challenge was to fix those issues and our goal was to increase the CTA clicks.
Who I worked with
Chintan Jain, Associate Director of Product Marketing
Elanchezhian Anandhan, Marketing Manager
Sathish Kumar, Designer
What I did
Identifying problems | Redesigning| Discovering and ideating| User research | Prototyping| Data Analysis and Evaluation.
HR Feature Page
(Existing UI)
We had incorporated the same design template for both HR and Procurement feature pages. The objective of the page had been to ensure people explore many features, which would result in conversion.
Procurement Feature Page
(Existing UI)
Probe & Learn
Analytics Review
I had combined Google Analytics and other analytical tools to find out data pointers such as Google Analytics to get more insights about the page such as type of audience, channel, device breakup, traffic, region, etc. And event based tool, where I had already defined a set of reports and events to track, such as the number of users clicking on the feature options, number of CTA clicks, path analysis etc. Also had used analytics to quantitative insights based on the qualitative insights we had found. Such as, if a significant number of users were clicking on the selected feature option several times. I had to find out the percentage and number of users performing that action.
Heatmaps and Session Recordings
Once the site was launched, I started tracking session recordings to observe what users were performing and where they were struggling or confused. I had to closely monitor and identify the pros and cons of our current design. Here’s what I was looking out for:
-
How many users were dropping off
-
How many users scrolled
-
Till what point on the page did they scroll
-
What are the other elements users clicked on.
With the aid of heat maps and scroll maps, I was able to identify further insights. For instance, a significant number of users were clicking on the selected feature option many times. This was because it looked clickable compared to the rest of the items. I also noticed that users were only clicking on the feature options and not scrolling.
Problem Identified
Based on the insights collected from Core Research I was able to compile the set of problems in the current design. Chintan, Elan and I had coordinated on prioritizing the problems that needed to be sorted.
Problems that we prioritized:
-
Users were clicking on elements that were unclickable
-
​Since it was prominent and gave the illusion as a clickable element
-
Change blindness: when the users clicked on an option, their feedback wasn’t specific (in this case page load)
-
Poor grouping of elements: The title of the feature was above the features option, users didn’t notice the change.
-
-
Poor visual hierarchy definition: the icons were much more prominent than the feature naming.
-
Once someone clicks on the feature box, they weren’t certain if they should even scroll to view the information. The UI had provided any support for them. .
-
Users were mostly only interacting with the features boxes rather than scrolling and skimming/scanning the page
How Research was Compiled and Shared
All the data was compiled and shared via a Google deck. I shared data that went beyond just numbers and consisted of user recordings and heat maps as well. This way the stakeholders didn’t have to look at the problem as numbers, but were also able to understand the frustration from a user perspective. It showed them how the problems identified could impact their potential customers and not just the conversion rates but also influence how they perceive the brand itself.
Disclosing the problems and statistics wasn't sufficient since Marketing UX had been a new venture. I had to demonstrate why this were a problem by talking about mental models, pattern recognition and other behaviour patterns that could cause these problems.
Inspired & Ideating
Frankly, this was the most fun part of the project. Once we were aware of the problems and why. We revisited the goal and objective of the page. The marketing leads based on their conversion insights wanted to add a CTA in the first fold. As per their insight, this page provided high signs of users to convert. To increase CTA clicks. In addition to that we had to resolve the current usability issues.
-
Increase the CTA clicks
-
Ensure that users can easily explore other features pages.
-
Increase the no. of sign ups
Hypothesis
-
By placing the CTA in the first fold we could increase CTA clicks.
-
By fixing the features boxes section, we would make it easy for users to scroll and explore other feature options.
-
If users explore more features the tendency to sign up would be high.
Primary Metric
Iterations were driven by measurable primary goals and supplemented by unique one-off goals.
Primary Metric: CTA Clicks
Secondary Metric: Repetitive clicks, no of users clicks on the features options, sign ups
Collaborate & Build
Competitive Analysis & Inspiration Gathering
I put together a collection of references from our competitors and other brands. The purpose of the task was to identify similar patterns that users are with. (I followed Jakob’s Law for this) Such how active and inactive elements look and function, how other brands have presented with similar information.
Wireframes and Mockups
Brainstorm
The designer and I had collaborated to bring in solutions. We kickstarted with mockups rather than wireframes due to a short deadline we had. Below are the few mockups we came up with.
For Procurement we also changed the onscroll navigation to features options. And for the HR features page we fixed the left panel. (During session analysis we found numerous users were scrolling up and down to navigate to the next feature page)
The Bigger Wins!
After landing on three to five options we had to showcase the options to Chintan and Elan. This helped them in visualizing how it would appear on the site. That aided them whether to agree or disagree on options. Finally, we were able to identify which option we were going to kickstart with. Each of them preferred their own options for various reasons. Because of which they had wanted to explore both these options to see which provides more value.
HR Feature Page
For this product, we had selected the option on presenting the features option on the left-hand side, and ensuring primary focus on the first fold CTA.
Procurement Features Page
In terms of Procurement, we wanted the features section at the top of the hierarchy followed by the CTA section.
Observe & Implement
Heat Maps, Session Recordings
After the launch. Session recordings and heatmaps helped to show where the design was performing well and identify opportunities for iterative tests. In addition to that, the design team had to monitor for UI related issues such as responsiveness and hand it over to the tech team to get it fixed proactivity. This was the no. 1 activity for the entire team.
In addition to this, I was closely monitoring how users were interacting with the features options, how many of them were scrolling, what were users doing within the page etc. (FYI, we found improvement in terms of scroll rate)
KPI Performance
Using Analytic I had predefined events for tracking the feature options, navigation menu clicks, CTA, conversion flow etc for both HR and Procurement feature pages. In addition to that, we kept a close track on the traffic trends, and if we were running any paid activities for these pages during the analysis timeline.
Showtime
This is one of my favourite parts. What we call “Mtalk”, where the team members get to showcase their work or take a topic and present it to the team. The “AWW” moment for me, where I had to talk about the problem, solution, results, the process, and finally the insights and learning from this project. For the Marketing UX chapter, this was the moment to exhibit how a small change could have a major impact. And this part is what makes it worth all the effort.
The Payoff
HR Feature Page
366% increase in CTA clicks
Where nearly 76% attributed to the first fold CTA.
Procurement Feature Page
84% increase in CTA clicks
Where nearly 86% attributed to the first fold CTA.
HR Feature Page and Procurement Feature Page