Member+ Tiering & Loyalty
UI design-to-code · Frontend implementation
Helping Member+ customers see where they stand, what comes next, and which benefits they can use.
A little context
Member+ Tiering & Loyalty is a feature integrated into Indopaket’s core web and mobile apps. It helps Member+ customers understand their level, progress, and available benefits.
My part: UI design-to-code and frontend implementation, from a Laravel prototype to a Next.js rebuild.
I’ve simplified a few details here to keep internal information private.
What needed attention
Customers need to see their current tier, how far they are from the next one, and which benefits they can use.
Core Experience
- View current level
- Understand progress
- Explore benefits
- Review history
The choices behind the screens
Status visibility
Current standing at a glance
Keep current level and progress visible on the main view.
Goal gradient
Progress to the next tier
Show current progress against the next target so the remaining effort is understandable.
Recognition
Recognizable tier states
Use distinct icons and states for achieved, current, and upcoming levels.
Positive feedback
Visible achievement
Differentiate completed milestones from levels that are still in progress.
Progressive disclosure
Details on separate pages
Keep the overview scannable, with detailed terms and history in separate views.
Implementation Evolution
Phase 1
Laravel prototype
Implemented mobile-first badges, progress indicators, and interactive tier exploration to evaluate the initial interface.
Phase 2
Next.js rebuild
Carried the interaction patterns into data-driven status and history pages, including loading, empty, and error states.
Frontend Structure
- Status and history views
- Shared data presentation
- Consistent UI states
What I built
Status and benefits
A current-level overview, progression timeline, benefit details, and clear state differences.
History
A separate view for reviewing prior periods without crowding the main progression screen.
What stayed with me
The Laravel prototype let me work through the badges and tier interactions first. In the Next.js rebuild, I also had to handle live data, past periods, and loading or empty states.
The people I worked with
Related Skills:
Tools I worked with
UI/UX Design & Implementation
Frontend Development
Gamified UI Patterns
API & Data Integration
Implementation Quality
Portfolio of
Riani BM
UX Engineer
from Indonesia