WOKEGENICS
Make an Appointment

UI Designs Case Study With Heatmaps and Results

UI designing is crucial as it directly impacts how users interact & perceive digital products like websites & apps. Let’s understand this factor more in-depth.

When it comes to user interfaces, even a small tweak can change how people interact with your product. At Wokegenics, we were curious to see just how much impact design could have. So, we set up a simple yet revealing A/B test: two different UI designs, one winner, a case study with highlighted heatmaps and results that changed perspectives.

The Setup: Sample A vs Sample B

We tested two homepage designs for our workflow web app. Each had the same core content but different layouts and visual priorities.

Sample A was minimalist. It featured:

  1. Clean white background

  2. A single bold CTA button at the center

  3. Simple sans-serif fonts

  4. No animations, minimal color palette (grayscale + one accent)

Sample B is more modern and visual. It had:

  1. Gradient background with soft shadows

  2. Two CTA buttons (“Start Free Trial” and “Book Demo”)

  3. Icons next to features

  4. Slight hover animations on buttons and cards

Both versions were shown to different groups of new users over a two-week window. We used Hotjar to track heatmaps and clicks, along with scroll depth data and session recordings.

Sample A: Testing, Heatmaps, and Results

Users who landed on Sample A saw a straightforward layout with no distractions. The main CTA was placed center screen with a short headline above it.

Heatmap Findings:

  1. High focus on the center button, but limited engagement elsewhere

  2. Only 41% of users scrolled beyond the fold

  3. Few hover actions, suggesting a lack of curiosity or exploration

Click Behavior:

  1. 22% of visitors clicked on the main CTA

  2. Bounce rate was slightly higher (48%)

  3. Average session time: 1 minute 42 seconds

This version worked well for decisive users. However, others seemed unsure or disengaged due to the plainness. While the clarity helped some, it felt “too clean” to many users in interviews.

Sample B: Testing, Heatmaps, and Results

Sample B added more visual weight and interactivity. It featured icons, soft gradients, and secondary CTAs to guide hesitant users.

Heatmap Findings:

  1. More distributed attention: users explored feature icons, hovered over multiple elements

  2. 67% of users scrolled down to at least 75% of the page

  3. High interaction rate on button hovers and cards

Click Behavior:

  1. 31% clicked on “Start Free Trial”

  2. 14% clicked on “Book Demo.”

  3. Bounce rate dropped to 36%

  4. Session time improved to 2 minutes 19 seconds

Overall, Sample B led to more exploration, more clicks, and longer visits. Users said it felt “alive” and helped them understand the product faster.

Conclusion: Which UI Worked Better?

Here is a quick comparison of both designs:

  1. CTA Clicks: Sample B (45% combined) vs Sample A (22%)

  2. Scroll Depth: Sample B (67% scrolled) vs Sample A (41%)

  3. Bounce Rate: Sample B (36%) vs Sample A (48%)

  4. Session Time: Sample B (2:19) vs Sample A (1:42)

Clearly, Sample B outperformed Sample A across all key engagement metrics. It is because it balanced clarity with personality. It guided users without overwhelming them. And most importantly, it gave them reasons to stay and explore.

Final Thoughts: Design for Humans, Not Just Interfaces

UI is not just about looking good. It is about making people feel comfortable, curious, and confident. At Wokegenics, we believe in testing everything, even the obvious. This A/B test reminded us that thoughtful design is not decoration, it is direction.

Want to find out which version of your design works best? Let our product and design team help you figure it out. From testing to building, what actually clicks, we are here to scale that works. Reach out to Wokegenics today. Let us build something users want to stick with.

References:

https://vwo.com/blog/scroll-depth-tracking-what-why-and-how-of-monitoring-visitor-engagement/
https://userpilot.com/blog/heat-map-tools-saas/
https://contentsquare.com/guides/ab-testing/metrics/
https://www.hotjar.com/blog/how-to-use-hotjar-ab-tasty-integration/
https://giveitanudge.com/what-is-a-good-scroll-depth-benchmark/
https://www.youtube.com/watch?v=qCHlwHe0_Wo
https://www.hotjar.com/heatmap-analytics/
https://neilpatel.com/blog/heatmaps-for-digital-marketing/
https://agencyanalytics.com/kpi-definitions/scroll-depth
https://www.woopra.com/blog/scroll-depth