Virtual Glovebox App

Virtual Glovebox App provides a central hub for your registration, insurance, maintenance records and even driver's license. Get automatic reminders to complete time sensitive vehicle tasks.

Comment

Inspiration

  • The amount of paperwork bureaucracy that a vehicle owner has to navigate is overwhelming. Registration renewal reminders, new insurance paperwork, endless service records from multiple mechanics- in the midst of our busy lives these important papers often slip through the cracks. Many people try to cope by stuffing their vehicle documents into a chaotic glovebox. However, trying to locate a specific paper only leads to a landslide of crumpled oil change receipts, expired insurance cards and repair estimates. Our team’s initial inspiration came from each of us having experienced the stress of managing vehicle paperwork in one form or another.

  • Next we turned to user research to see if others also were experiencing paperwork related friction as part of their vehicle ownership and how they were managing it. Our initial user survey uplifted that 45% of people frequently forget to complete time sensitive tasks related to their vehicle ownership, with a whopping 54% of vehicle owners particularly struggling with necessary maintenance and registration renewal. People reported that difficulty finding documents and lack of notifications were the primary challenges when it came to accomplishing time-sensitive tasks. This disorganization not only causes stress but can also cost people money. For example late registration renewal often leads to fees or tickets and forgetting to get vehicles serviced can cause more expensive repairs down the line.

  • With these research insights our goal for this project became clear. One, remove the paperwork and hard copy hassle of vehicle documentation. Two, reduce vehicle owner stress with automatic notifications when time sensitive tasks are due, paired with links to be able to initiate or complete tasks digitally.

What it does

  • Currently deployed version in development environment: Facilitates sign up and log in from the same screen - if the user already exists, it will take them to the Log In page. If not, they will be redirected to the Sign Up page. From there, they will be directed to the Home dashboard. While no flow is built out fully according to the design, we have the NavBar on all screens functioning and most of the Add Vehicle and Add Maintenance flows complete (only manual entry, automatic and camera scanning will be in the future).

  • Figma Prototype Version: Imagine if all of the notifications for tasks related to your vehicle, important documents and records were stored all in one place. No need for DMV to mail out multiple reminders, burdening their system and the post office. Now a reminder to renew your registration automatically pops up on your phone, with a link to securely complete the transaction on the DMV website. Can’t remember when you last serviced your brakes and you moved out of state to a new mechanic? No problem, open Virtual Glovebox and your maintenance history is just a few taps away. Instead of fumbling around for documents when pulled over, you can take out your Virtual Glovebox, and show highway patrol your license, registration and insurance all from one screen using Quick ID.

How we built it

  • Between a team of designers and developers, we conducted user research and mocked up a design. UX designers created a prototype in Figma and were able to do usability testing to get immediate feedback on the design. Through usability tests and rapid prototyping, we iterated the design while developing using Cloud Firestore, Next.js, Expo, React Native, and TailwindCSS.

Challenges we ran into

  • Features bled into one another between Expo and Cloud Firestore, so third party authentication was scrapped early on. We were able to use TailwindCSS through a Node package porting Tailwind's functionality to React Native, but it has limited support so we had to work outside of that for CSS properties like box shadow. Connecting Firestore from Firebase to receive values from the form input fields and having those values reflected in our NoSQL.

Accomplishments that we're proud of

  • UX perspective: We’re proud that we prioritized user research in our design process, even with the quick turnaround needed for this hackathon project. Our initial survey provided us the insight of focusing on registration and maintenance paperwork and reminders, since these were the areas of greatest friction for our users. With 45% of people frequently forgetting to do time sensitive tasks related to their vehicle ownership and our data shows us that the Virtual Glovebox app addresses actual user problems. Overall, our design performed very well in our usability testing. One highlight was the ease of use of the dashboard experience. Testers were able to quickly add a vehicle to their account with minimal friction. Our quick ID feature received positive feedback, additionally supported by our survey data which showed that 39% of participants had forgotten their license at home when they needed it.

  • Development perspective: Integrating TailwindCSS and React Native - by doing this, UI development speed was increased dramatically by using familiar CSS properties, and learning a new CSS framework. Another UI focused accomplishment was setting up project-wide reusable components to ensure correct styling (font styles, spacing) and having them be abstract enough to use on future projects. Getting Firestore to host hard coded values was fun in the sense of working with a NoSQL database was new. Initializing Firestore within the application was a great learning experience since limited documentation provided integrating Firestore with Next.js and using React Native with TailwindCSS.

What we learned

  • UX perspective: Starting with a survey helped us to learn that there is an actual need for a product like this (58% said they would use a phone app to store and organize documents related to vehicle usage). Our perspective on what users might need is not the same as our test results (for example roadside assistance), and we were able to create an app the prioritized exactly what users expressed as their needs. Having daily check-ins between developers and designers every morning during the hackathon really helped our process be grounded in what was technically possible.

  • Development perspective: Working with a Firestore backend was an interesting new experience as it has a way of handling data that is similar to GraphQL, querying only the specific data that the user needs at a given time. In addition to this, it was interesting to work with a NoSQL database as our development team has more experience with SQL databases. It was really easy and intuitive to work with, and required a lot less hassle compared to fussing around with tables and defining relationships between them.

What's next for Virtual Glovebox

  • Another round of usability testing of the current prototype. Building out the launched Virtual Glovebox iOS app to match all of the flows in the Figma prototype. Interested in expanding to even more features such as automatic notification of tickets received or a way to manage electronic toll payment.

Built With

Share this project:

Updates