RainCheck
“RainCheck is an interactive map web app that provide insights on the Vancouver housing market and lets you know how long it would take you to afford one. Created for BCIT QDS 2023 Hackathon.”
Introduction
For this project, I worked in a team of 6 over the span of 3 days as the lead UI/UX Designer. We were tasked to utilize a dataset and turning that data into meaningful insights.
RainCheck was selected as a top 8 finalist among 20+ teams where we were given the opportunity of presenting in front of a panel of judges and an audience of 100+ students and industry professionals.
Timeline
January 6 - January 8 2023
Role
Lead UI/UX Designer
Graphic Designer
Jr. Frontend Developer
Skills
User Research, Design, Prototyping, Collaboration,
Web App Development
Tools
Figma, Illustrator, Next.js, React, Axios,
React Leaflet, styled-components, framer-motion
Problem Statement
For this Hackathon, teams could decide whether to use the dataset provided from the sponsor or go with their own dataset. We decided to use an API that grabbed data from realtor.ca, specifically Vancouver’s current listings. The reasoning behind this was that the housing market is daunting and very much a relatable pain point for many Vancouverites. So how did we go about to turn this data into meaningful insights?
Solution
We created a web app called RainCheck where I led the design, thinking about how we could present the data in a way that was easy to interact with and intuitive to the user experience.
Using Figma, we conceptualized an onboarding page that explained to our users the purpose behind our web app, an interactive map page that lets users easily interact with filters, and an insights page that mocked up graphs to engage users in a clean and visual way.
I also designed clean and modern graphical assets that resonated with users, in particular the “Vancouver Special”, which is a commonly recognized house type found in Vancouver.
Challenges and Takeaways
The most challenging aspect of this experience was due to its nature of being a 3 day Hackathon. We spent the majority of the first day thinking of how to utilize datasets and researching before we tackled on design and developing. This was to ensure that the design was cohesive and fitting to the dataset. Overall we successfully collaborated as a team to present a simple yet functional web app that displayed Vancouver’s current housing market.
