SARRAH GANDHI

Back
UI/UX DESIGN

Avro Mobile

Campus Life Assistant App — Digital ID, Payments & Services

A mobile app that helps students manage their digital campus identity, access services, and handle payments — all from a single app that replaces physical campus cards.

RoleUX/UI Designer
Duration3–4 weeks
PlatformiOS & Android
THE PROBLEM

Fragmented Campus Experience

Students often carry physical ID cards and multiple access cards (library ID, payment card, door access card). This creates:

📦
Increased risk of lossPhysical cards get lost, damaged, or forgotten
🐌
Slow, fragmented accessMultiple cards for different campus services
👁️
Poor visibilityLimited insight into account balances and transactions
How might we

create a centralized digital experience that lets students access their credentials, view transactions, unlock campus services, and pay seamlessly?

01Target Users

Who are we designing for?

🎓
Primary Users

University Students

Students using OneCard systems who need quick access to ID, payments, and campus services daily.

👔
Secondary Users

Campus Staff

Staff members managing student access, verifying IDs, and overseeing campus services.

02User Research Insights

Understanding student needs

Based on common campus app usage patterns and reviews, we identified key pain points and opportunities to improve the campus digital experience.

Key Findings

67%

of students want faster access to services and balances

Speed is critical
54%

get confused when apps don't show clear next steps

Clarity matters
89%

say privacy and security are critical for ID apps

Trust is essential
72%

prefer digital over physical campus cards

Digital-first mindset
03Design Strategy

Key features designed

Our strategy focused on consolidating all campus services into a single, intuitive mobile experience that prioritizes speed, security, and clarity.

🪪
Digital ID Display

Shows student photo, ID barcode/QR for instant verification

💳
Tap-to-Pay Integration

Quick campus payments with one-tap convenience

📊
Real-Time Balances

Account summaries with detailed transaction history

🔐
Access Control Tools

Doors, parking access, and secure entry points

🔗
Resource Shortcuts

Quick calls to wellness, emergency, library services

🏦
Portal Integration

Easy way to add funds or plan purchases

04User Flow

Mapping the experience

We mapped out the complete user journey to ensure seamless navigation from onboarding to daily use.

01

Onboarding

Action

Login with campus credentials, permission requests

FeelingSecure
Opportunity

Build trust early

02

Home Dashboard

Action

Quick actions: Show ID, Tap to Pay, View balance

FeelingEfficient
Opportunity

One-tap access

03

Account Screen

Action

Transaction history, plan balances

FeelingInformed
Opportunity

Transparency

04

Access Screen

Action

Tap to unlock doors, scan for services

FeelingEmpowered
Opportunity

Seamless entry

05Wireframes → UI

From sketches to screens

Wireframe goals focused on simplifying navigation with a bottom nav, clear CTAs for ID, Payments, and Balances, with consistent use of campus colors and readable typography.

Home Dashboard

Quick actions with Show ID, Tap to Pay, View balance

Digital ID

Student photo and barcode/QR prominently displayed

Balance Cards

Current balances at-a-glance with history

Access Control

Tap to unlock doors and campus services

UI Highlights

💳Balance Cards

Display current balances at-a-glance with clear typography

🪪Prominent ID Card

Student photo and barcode section easily accessible

🎯Action Buttons

Large icons for common tasks (Pay, Scan, Show ID)

📋History Feed

Transparent, chronological transaction log

06Design Decisions & Rationale

Why we made these choices

Design AreaDecisionWhy
NavigationBottom Nav + Simple LabelsEasier reach for thumb interaction
Action ButtonsLarge CTA IconsQuick task completion for frequent interactions
Color UseHigh contrast (accessible)Better readability in various light environments
Data DisplayReal-time balances, receipt listTransparency and reassurance
07Accessibility Considerations

Designing for everyone

🎨
High Contrast UI

Better readability for students in various light environments

🔊
VoiceOver / TalkBack Support

Full label support for screen readers

👆
Large Tappable Areas

Minimum 44x44pt touch targets for quick access

08Usability Testing & Feedback

Validating with real users

We conducted remote usability tests with students to validate our design decisions and identify areas for improvement.

Testing Goals

  • Can users quickly find and use the ID card feature?
  • Can users view balances in less than 10 seconds?
  • Are transaction flows clear and intuitive?

Results

78%

Completed the ID display task in <10 sec

65%

Found balance history immediately

09Outcomes & Impact

Measurable improvements

~40%Reduced time searching for services
78%Completed ID display task in <10 sec
65%Found balance history immediately
4.6/5User satisfaction score
10Key Learnings

What I took away from this project

1
Simple, accessible layouts improve adoption

Reducing cognitive load is essential for apps meant to be used quickly and frequently.

2
Students value clarity in financial data

Transparent, real-time balance information builds trust and reduces anxiety.

3
Onboarding must minimize friction

Campus apps compete for attention—quick setup drives initial adoption.

11Future Improvements

What's next

🎫
QR Tickets for Events

Add digital tickets for campus events and activities

🎨
Enhanced Personalization

Theme options, customizable quick actions for individual preferences

🔔
Push Notifications

Alerts for low balance or campus announcements

12Conclusion

Centralizing campus life

Avro Mobile successfully centralizes student campus identity and financial services into one accessible mobile experience by reducing reliance on physical cards and offering transparency into balances and access services — all while keeping interactions intuitive and fast.

Key Features

🪪

Digital ID Display

Student photo, ID barcode/QR for quick verification

💳

Tap-to-Pay

Quick campus payments integrated seamlessly

💰

Real-Time Balances

Account summaries with detailed transaction history

🔐

Access Control

Doors, parking, and secure campus access

Design Process

01

Research

User interviews & competitive analysis

02

Wireframes

Low-fi sketches & user flows

03

Design

High-fidelity screens & components

04

Prototype

Interactive flows & usability testing

Color Palette

A professional campus-inspired palette with sky blue and teal tones, designed to convey trust, security, and accessibility.

Sky#0EA5E9
Cyan#0891B2
Teal#14B8A6
Navy#1E3A5F
Orange#F97316

Design Tools

🎨Figma
🔍User Research
Prototyping
📐Wireframing

Interested in working together?

Get In Touch