A streamlined way to book your breakout room.
Case Study
The Problem
As an RRC Polytech student, I’ve seen how frustrating it is to snag a study room, also known as a "breakout room." Other students often camp out in a room indefinitely because there is no enforced schedule to manage how long someone can stay. This leads to students constantly doing laps around the school, wasting their limited break time just trying to hunt down an empty spot.
My Role
Design
Assisted in the design process of key screens in Figma. Blocked out the key page shapes as mid-fidelity wireframes, and considered interactions involved in the React app.
Development
I handled the front-end styling in React Native, focusing on the main floor card components, modals, and popups. I also styled and animated the card swap transition states to ensure a smooth user experience.
The Solution
Our solution was to move a tech-free system into an app. At RRC Polytech, you can book a breakout room in person through Security, but it's a stressful and unnecessary process. We made booking simple. By sorting rooms by floor and building, users can easily track down a spot and see exactly when the next slot is open. We also built in a QR code scanner so users can claim an empty room the moment they see it.
The Method
We started with low-fidelity wireframes in Figma to map out the core screens, eventually evolving them into a high-fidelity prototype to finalize the user flow and animations. From there, we built the app in React Native using Expo.
I focused on the front-end design while helping connect between the UI and our API. I also spent time fine-tuning card animations and cleaning up the codebase to keep everything running smoothly.
Skills Used
Project Showcase
