DEV Community

Seif Ahmed
Seif Ahmed

Posted on

Why I Ditched Math to Keep My Users Happy

When building the new analytics page for Vlox, I faced a choice: Use precise math, or modify data to make users feel good.

I chose the latter. Here is why strict math can kill user engagement.

The Problem with Cold, Hard Math

If a user gets their first like and your target is 100, a standard formula fills the progress bar by 1%.

To a human, 1% looks empty. It's like sating: "Your content is bad." Discouraged users close the app and never return.

The Solution: UX Gamification

Instead of exact math, I used a bracket system with a generous baseline:

// The Psychological Magic
let likesPercent = 10; 
if (post.likes === 0) likesPercent = 0;
else if (post.likes >= 100) likesPercent = 100;
else if (post.likes >= 80) likesPercent = 80;
else if (post.likes >= 60) likesPercent = 60;
else if (post.likes >= 40) likesPercent = 40;
else if (post.likes >= 20) likesPercent = 20;

// The Call to Action
NS(NS.createEl("p", postCard, { style: "text-align: center" }))
  .html(`Fill the bar with likes and be a <span style='color: ${likesPercent === 100 ? "goldenrod" : "red"}'>LEGEND</span>!!`);

NS(".analytics-likes-bar-fill").css({ width: `${likesPercent}%` });
Enter fullscreen mode Exit fullscreen mode

Why This Works

  • The 10% Jumpstart: One single like jumps the bar to 10%. It feels like an immediate achievement.
  • The "Legend" Quest: Framing the empty space as a challenge to become a "LEGEND" turns data into a game.
  • The Organic Loop: To fill the bar, users share their Vlox links externally, bringing new traffic to the platform.

Takeaway: Code is read by machines, but UIs are used by humans. Sometimes, breaking the math rules is the best way to retain your users.

Liked the project? Give it a star Vlox on GitHub ⭐!

Top comments (0)