T-Mobile Tuesdays – Gamification UI Design Case Study (USA)
For this project, the goal was to design a gamification feature UI within the T-Mobile Tuesdays app to increase user engagement and retention. The brief included a tier-based level-up system, leaderboards, progress tracking, geo-targeted notifications, and a voting feature where users could select their favorite upcoming deals.
5/8/20241 min read
📝 Project Overview
T-Mobile is one of the largest wireless network operators in the United States, known for its bold brand voice and customer-centric rewards programs. One of their flagship customer loyalty initiatives is the T-Mobile Tuesdays app, offering exclusive weekly deals and rewards to their users.
For this project, the goal was to design a gamification feature UI within the T-Mobile Tuesdays app to increase user engagement and retention. The brief included a tier-based level-up system, leaderboards, progress tracking, geo-targeted notifications, and a voting feature where users could select their favorite upcoming deals.
👨💻 My Role
UI/UX Designer
I handled the full end-to-end design process for this feature:
Requirement analysis
UX flow planning
Wireframing
High-fidelity UI design
All while strictly adhering to T-Mobile’s brand color palette (Magenta, White, Black, Gray).
🚩 Challenges
Designing multiple gamification elements without creating screen clutter.
Keeping the UI visually engaging while using a limited color scheme.
Ensuring the flow was intuitive for both new and returning app users.
🔎 Design Process
1. Understanding the Business Goal
T-Mobile’s objective was to make the rewards experience more interactive and competitive, giving users more reasons to check the app regularly.
2. Wireframing & UX Planning
Created low-fidelity wireframes for:
Level Progression Bar
Leaderboard with Top Users
Voting Screen for Upcoming Deals
Rewards Showcase
Push Notification Layouts
3. UI Design Highlights
✅ Notification & Story Feature:
Geo-targeted promotional banners designed in card style for easy scanning.
✅ Level Progress:
A dynamic progress bar tracking user points from Magenta NEXT to Magenta PRIME tiers, along with achievement badges.
✅ Leaderboard Screen:
Simple, clean leaderboard ranking system using profile images, points, and tier badges.
✅ Voting Interaction:
An engaging poll-style screen where users could vote for deals like Pizza, Cheeseburgers, or Sandwiches with real-time voting stats.
✅ Rewards Display:
Visually rich deal cards with clear redemption CTAs.
🎨 Tools Used
Figma (Primary design tool)
Adobe Illustrator (For custom icons and badge design)
✅ Final Outcome
Successfully delivered a set of polished, on-brand, and user-friendly UI screens that integrated gamification in a way that encourages participation, competition, and repeat app usage.
🖥️ Visual Screens
Level Progress & Rewards
Leaderboard
Vote for Favorite Deal
Rewards List
Notification & Story Banner