UX/UI Case Study: Improving Shakepay's Web Onboarding with "Shake to Earn" Animation Feature

Overview

In this case study, I explore the redesign of Shakepay’s homepage animation to create a more immersive and intuitive user experience. The existing design featured a static zoom effect on a phone, which did not effectively communicate the app’s core functionality. My approach was to introduce a shaking phone animation inside the desktop wireframe that simulates the in-app experience—where shaking the phone adds a 1-day streak and rewards users with Bitcoin.

This redesign gives users an immediate understanding of Shakepay’s unique gamified feature, directly reinforcing its core value proposition on the website’s landing page.

My Role

UI/UX Designer: Conceptualized and designed the new animation to better represent Shakepay’s gamified feature.
Graphics: I used Canva to design the phone frame that I integrated inside the web homepage to create the shake animation.
Prototyping & Interaction Design: Created the animation using Figma’s Smart Animate to simulate real app interactions.
Usability Research: Analyzed user behaviors and expectations to align the web experience with the mobile app functionality.

Problem - Lack of Feature Representation on Web Design

Static Zoom Animation

The previous animation on Shakepay’s homepage consisted of a zoom-in effect on a phone, which did not effectively communicate the app’s most engaging feature.
It lacked interactivity and did not mirror the app’s mechanics, leaving users without a clear expectation of how Shakepay works.

No Representation of the Shake-to-Earn Feature

In the Shakepay app, users shake their phones daily to earn Bitcoin, reinforcing gamification and habit-building.
The website failed to highlight this key interaction, making it less intuitive for new users and failing to drive engagement.

Missed Opportunity for Engagement

A passive zoom animation does not capture user interest or create an emotional connection to the act of shaking the phone.
It didn’t visualize the reward system, making the experience feel incomplete.

Current Design

Current Web Animation doesn't show the core "shake" feature of the app

Solution - An App-Reflective Animation for Clearer Communication

Introducing a Shaking Phone Animation

The phone now shakes inside the desktop wireframe, mimicking the in-app experience.
This creates an immediate connection between what users see on the web and what they will experience on their phone.
The phone animation transitions from a neutral state to a left-right shake movement, making the interaction clear.

Real-Time Bitcoin Reward & Streak Indicator

After the shake motion, Bitcoin symbols appear, visually reinforcing the streak continuation.
A 1-day streak banner appears, signaling the reward mechanism.
This mirrors the actual in-app behavior, making it recognizable and intuitive.

Improved Visual Hierarchy & User Flow

The animation now draws attention to the most engaging and rewarding aspect of Shakepay.
Instead of a passive zoom effect, it provides an interactive and feedback-driven experience.
The update makes Shakepay’s homepage feel more dynamic and engaging, leading to better onboarding.

User Flow

Mockups

Prototype Walkthrough

https://www.figma.com/proto/0tOc0JV3cs9lkDmieCzlKi/Untitled?t=eNh79jOMY3EDDgMX-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1&node-id=1-79&starting-point-node-id=1%3A79&show-proto-sidebar=1

Limitations and Future Work

Enhancing Finance-Oriented User Experience

While this redesign improves feature clarity, there is an opportunity to optimize user engagement for financial literacy.
Adding a tooltip or micro-interaction that explains how Bitcoin rewards are accumulated could provide better financial context.
A future iteration could include a dashboard preview of earnings over time to encourage user retention and transparency.

Limited Motion Capabilities in Web Prototyping

Figma’s Smart Animate provides smooth transitions, but it lacks advanced motion physics.
Using Lottie animations or Figmotion plugins for web implementation could make the shake effect more dynamic.

4. Absence of Real-Time Interaction

The animation is pre-set and does not respond dynamically to user actions.
A future iteration could involve user-triggered shaking via cursor movement or screen tapping, making it more engaging.

5. Alignment with Financial Gamification Strategies

Shakepay’s shake-to-earn feature is a unique gamification approach in finance, but further UX improvements could enhance user trust and retention.
Integrating subtle visual cues on how rewards contribute to long-term Bitcoin accumulation could strengthen the appeal to financial users.
Exploring behavioral nudges such as streak-based bonuses or milestone unlocks would deepen engagement and increase user commitment.