#mobileapp
#mobile
#Figma
Country
Indonesia
Year
2021
My Role
Designer
Background & Context
BRI's Virtual Account (BRIVA) had already become the standard way students pay tuition. But once fees were paid, students stopped using it. Every other campus transaction (booking a room, borrowing a library book, funding a research project) happened through manual, paper-based, or cash processes with zero BRI involvement.
The Business Challenge :
How might BRI make BRIVA the go-to payment method for all campus activities, not just annual tuition, so that students use it regularly throughout the academic year?
Users
Research & Discovery
Research started by mapping the current state: user interviews with students, process walkthroughs with admin staff, and a competitive review of existing campus tools.
Key Takeaways
3–5
Days to Book a Campus Room
Students submit paper requests, wait for manual approval, then pay cash. No visibility into status.
0%
Digital Library Loans
All book borrowing is done in person. No way to check availability or reserve in advance.
None
Digital Crowdfunding Tool
Research project funding relies on word-of-mouth cash collection. Donors get no receipt or tracking.
2×
BRIVA Usage per Year
The academic community only uses BRIVA twice a year, at the start of each semester for tuition fee payment. Outside of that, no recurring digital payment habit exists.
Problem Statement
Research distilled four clear problems that became the criteria against which every design decision was evaluated.
Design Process
The design process moved through three key decision layers: which features to build, how to structure the user flow, and how to design the UI. Each layer involved multiple options before landing on the final solution.
❌ NOT CHOOSEN
Campus Parking Pass
Monthly or semester-based parking sticker fees are a recurring campus cost almost every student and staff member deals with. A natural fit for BRIVA. However, parking lots on most Indonesian campuses are managed by third-party contractors, not the university itself. Adding BRIVA would require renegotiating vendor contracts outside BRI's control.
Reason: Vendor-controlled, not campus-owned
❌ NOT CHOOSEN
Graduation Administrative Fees
Gown rental, photo sessions, and graduation admin costs are a real pain point. However, the frequency is extremely low: it happens only once in a student's entire academic life, making it a poor foundation for a recurring payment habit.
Reason: Too infrequent (1× per lifetime)
✓ CHOOSEN
Smart Rent (Campus Assets Rental)
High student demand. Currently 100% manual & cash-based. Moderate-to-high payment values per transaction.
Reason: High impact, direct BRIVA fit
✓ CHOOSEN
Smart Library (Library Loan and Return)
Regular, recurring usage during semester. No digital solution exists. Fine/late fee creates recurring payment moment.
Reason: High impact, direct BRIVA fit
✓ CHOOSEN
Crowdfunding
Unique to academic environment. Zero digital infrastructure today. Expands reach beyond personal payments.
Reason: Novel feature, strong BRI story
Decision:
The scope landed on 3 features: Smart Rent, Smart Library, and Crowdfunding, covering the highest-frequency campus needs where BRIVA adds clear, immediate value.
Smart Rent Userflow
Smart Library Userflow
Key difference from Smart Library:
Smart Library does not use Virtual Account for the borrowing process itself. BRIVA only appears when a book is returned past its due date and a late fine is charged. The payment pattern is identical to Smart Rent and Crowdfunding.
Smart Library Userflow
Key difference from Crowdfunding:
There is no admin approval before payment. Donations are direct: the user enters an amount and immediately receives BRIVA payment instructions. There is no rejection step because there is no limited inventory being managed.
❌ NOT CHOOSEN
Full Dashboard with Stats
Upcoming bookings, loan due dates, spending summary on home. Powerful but overwhelming as a first screen.
Reason: Too much cognitive load at entry
✓ CHOOSEN
Personalized Welcome + Icon Grid
User name, campus identity card, 3-icon menu. BRI Products appear as a separate section below.
Reason: Warm, personal, clear hierarchy
Final Design: Homepage
❌ NOT CHOOSEN
Date First, Then Show Available Assets
Pick a date window first, then browse what is available. Works well for hotel and meeting room tools, but campus users already know which specific room they want. Availability-first does not match that behavio
Reason: Wrong mental model for campus bookings
✓ CHOOSEN
Form Adapts to the Asset Type
Each asset has a fixed rental unit (hourly, daily, monthly, or annual) set by the asset itself, not the user. The booking form shows only the fields that match it. A meeting room shows date and time range. A seminar hall shows a date picker.
Reason: Right inputs, auto-matched to the asset
Final Design: Booking-Hourly
Final Design: Booking-Daily
Final Design: Booking-Monthly
Final Design: Booking-Annually
❌ NOT CHOOSEN
In-App Payment Form
Card input or e-wallet selector in-app. Requires PCI compliance, high dev complexity, unnecessary friction.
Reason: Over-engineering the solution
✓ CHOOSEN
BRIVA Payment Instructions
Virtual account number + amount with one-tap copy. Orange countdown timer (2 hours). Familiar flow the academic community already knows from tuition fee payment.
Reason: Zero learning curve; trusted mental model
Final Design: Payment Page
Final Design: Payment On Process
Final Design: Payment Receipt
Testing & Iteration
BEFORE
Activity was a flat list
All transactions in one timeline. With 4+ activities, participants couldn't quickly spot what needed action.
AFTER
Tabbed view: "On-Going" vs "Done"
Split with clear status badges. Users in round 2 immediately located actionable items without scanning the full list.
Before: All activity status in one screen
After: Activity status divided into two tabs
Final Design
All Screens
