NYU Safe Ride Dashboard
My Role:
Product Designer
Strategies:
UX/UI design, User Research, Prototyping, Ideation, Design Systems
Timeline
March 2021 - Present
Tools Used
Figma
Starting in 2021, I became the product designer on the Student Technology Innovation Team in New York University's IT Department working on NYU Safe Ride
The Product
New York University needed a service to allow students to get safe, free rides late at night between their many spread out buildings when students might not feel safe walking alone in the city.
NYU partnered with Via, a ride sharing app, to create NYU Safe Ride. The product itself is a simple web app for students to make onboarding to VIA easy for active NYU community members, so they can receive their unique VIA promo code that allows for free safe rides on NYU’s campus.
My Design Problem
NYU Safe Ride relies on Via promo codes that need to be manually uploaded every semester by Public Safety Officers. When I arrived on the project, the developers were uploading and managing the codes whenever public safety needed. An administrative dashboard needed to be created to allow for Public Safety to operate on their own.
My team I collaborated with consisted of a developer and a product owner.
This project is still going through iterations, below is some features that have been pushed successfully to production on the Admin Dashboard.
The Base Admin Page
The previous designer had left the first iteration of a design for the dashboard that was already built based on the design system of the product. However, it was missing key features
My Goal:
1. Clarify the Quick Stats
2. Add an ability to move between admin and regular view
3. Add the ability to block students and reassign students a code
My Iteration for these features:
Added tooltips and changed the layout of the information. I changed the language and added User stats to differentiate between codes and students.
Created the ability to reassign and block users through buttons.
Visualizing a blocked rider
The next step after creating the reassign and block buttons was visualizing the different state of a blocked rider.
I went with the grey to contrast the purple highlight of the cursor. The colors were checked for accessibility contrast to verify that everything fit within Web guidelines.
The reassign button is greyed out since there is no functionality to that button based on this state.
Uploading Codes
This feature would be used once every three months but is necessary for the product to run smoothly. However, it is extremely difficult and time consuming for our developers to reverse if something goes wrong.
Because of this I designed a stepper prototype that would walk the User through the process with clear instructions once they clicked the Upload Codes button.
Pop up once you click upload codes, providing information before beginning the process.
This is what it looks like after someone drops a file in, however they need to manually click next before they can move on. This allows for them to check to make sure the file is correct.
This is another opportunity to confirm that it is the correct file.
This confirmation page provides one last opportunity to reverse the process before it becomes permanent. We built in a 60 minute cool down period where a revert codes button replaces upload codes to allow for any mistakes to be fixed before the are finalized in the backend.
Manage Admins
For the dashboard to function without our team doing anything manually in the backend it was important to allow public safety to have control over who could manage this side of the product. I created a feature that allows new admins to be added through the dashboard and to allow some admins as view only.
The Add button is only in an active state when someone puts in a valid ID.
Features Currently being worked on:
Graphing Analytics data
Creating a visual graph on the dashboard seeing the uses over longer periods of time.
Error messaging
These are designed however I am not able to share them at the moment, come back soon to view my documentation on them!