Work Integrated Learning: UX/UI Design & Frontend Development
A location-based community service tracker built with a tertiary institution to make mandatory service hours effortless to log, verify, and complete — for both Android and iOS. Scored 100%.
Client
Tertiary Institution
Industry
Academic
Service
Design and Development
Team
2 Designers (mobile & desktop) + 6 Developers (incl. 2 designers)
Timeline
Ongoing, 6+ Months
Project Context
As part of my degree's Work Integrated Learning module, our team partnered directly with a tertiary institution to solve a real operational problem: verifying that education students actually complete their compulsory four hours of community service, and where. My responsibilities spanned project management, UX/UI design and frontend development across the build.
Goal
Our goal was to create a seamless yet aesthetically appealing community service tracker app for both Android and iOS that tracks whether education students are completing their mandatory 4 hours of community service, by tracking their location and hours at said location.
Challenge
A major challenge was finding the perfect balance between functionality, development, and aesthetic appeal. For Generation Z, visual allure is paramount, which meant ensuring the design was not only intuitive and visually captivating but also supported by a robust, efficient, and scalable development structure.
How I Started
From mood board to shipped app
Mood boards before mockups
I started, as I always do, in Pinterest and Milanote — building a mood board to pin down the vibe before touching Figma. The result leaned into vibrant colour and bold type, chosen deliberately to match the lively energy of the education students who'd be using it every day.
Borrowing UX from apps students already trust
Rather than invent map and settings patterns from scratch, I studied how Life360 and Google Maps handle location-heavy screens, and how Instagram and Apple Health structure their settings — then adapted those familiar patterns so Peeper felt instantly usable on day one.
Components as a speed multiplier
Figma's component system did a lot of heavy lifting: building reusable elements kept the interface consistent across dozens of screens and meant a single update could propagate everywhere, which mattered given the scope of a six-plus-month build.
Shipping on React Native
On the development side the team is building on React Native, Expo Go and Firebase — a stack chosen for shipping to Android and iOS from one codebase while keeping real-time data, location pings, logged hours, synced reliably.
The Work
Screens & process
Takeaway
The final product blends fun and professionalism: current design trends like pops of colour and visually engaging, balanced layouts sit on top of a development structure built to be robust, efficient and scalable. Peeper is still in active development, with the team deep in the build — but the combination of thoughtful UX research, a component-driven design system, and a proven mobile stack earned the project a 100% score, and has it on track to be genuinely adopted by the faculty that needs it.