Dawgride Λ ΰΌ ππβｑΛ
Role: UX Researcher and UX Designer
Medium: JS/HTML/CSS, Figma, OpenStreetMap, Bootstrap
Hours spent: 35
Team members: 4
Project context: INFO 442: Cooperative Software Development course
DawgRide is a mobile app designed to improve the safety and convenience of late-night transportation for the UW community by enhancing existing Husky NightRide and SafeTrip services. The app features real-time shuttle tracking, route maps, shuttle occupancy updates, a streamlined SafeTrip queue, a user-driven safety map, and an info/FAQ section. While we have not implemented the live tracking feature yet, we hope to do so in the future.
β Demo Video β
π± My Role β Frontend Developer & UX Designer
Jumping into DawgRide under a tight timeline was a rewarding challenge, especially since I hadnβt taken a frontend development class in over a year. Despite this, I leaned on past experience and Stack Overflow. Working in a fast-paced, collaborative setting pushed me to prioritize clarity, simplicity, and impact across the appβs core features. Here is some of what I worked on:
Note: Please view the above video in full screen! β
Designed intuitive, mobile-first user flows for requesting late-night rides, noting and observing safety concerns, and resources for how to use the application and specific information about the resources it supports
Created and implemented clear, accessible UI screens in Figma
Drafted questions for and conducted user test interviews
Conceptualized and supported the Safety Map feature for reporting campus safety concerns
Wrote and formatted the instructional flow to guide new users through app features
Helped craft and deliver the final pitch, focusing on user impact and implementation strategy
π Background Information & Pain Points
Husky NightRide and SafeTrip are late-night transportation services offered by the University of Washington to support student safety after dark. NightRide operates fixed-route shuttles near campus, while SafeTrip provides on-demand safety escorts through the UW Police Department. However, UW students often face uncertainty and frustration when using these services due to gaps in communication and outdated tools, making it difficult to plan safe, efficient commutes at night.
π§ Key Pain Points
Unpredictable Shuttle Timing
NightRide shuttles are frequently delayed due to deviations from fixed routes, leaving students unsure when or if their ride will arrive.Outdated & Unintuitive App Interface
The current mobile app, RideSystems, is difficult to navigate and visually outdated, reducing trust and usability.Scattered & Inaccessible Information
Key details about routes, safety services, and instructions are buried across multiple UW websites, requiring students to search across several tabs - especially frustrating during nighttime situations.
π οΈ What it Does
Building on the existing Husky NightRide and SafeTrip services, DawgRide centralizes essential information and tools into one intuitive platform, including:
Interactive Map: Displays shuttle routes and stops for better planning.
Real-Time Tracking: Shows live shuttle locations for accurate arrival times.
Shuttle Occupancy: Monitors occupancy of NightRide shuttles to help users avoid crowded rides.
SafeTrip Queue: Simplifies the process of requesting a SafeTrip ride.
Safety Map: Allows users to report and review suspicious activity on campus, enhancing community safety.
Info/FAQ Section: Educates users on how Husky NightRide, SafeTrip, and DawgRide work, ensuring accessible information for all users.
This comprehensive approach empowers students to navigate late-night commutes with greater confidence and ease.
βοΈ Key Design Decision: Event-Driven Architecture
For DawgRide, we opted for an event-driven architecture rather than a monolithic design to support scalability and modularity. This approach allows individual features to operate independently, making it easier to maintain and update parts of the system without affecting others.
However, this design introduces complexity: developers need a strong understanding of event handling, and debugging can be more challenging due to the distributed nature of events. Despite these hurdles, the flexibility and ability to scale effectively made event-driven architecture the best fit for DawgRideβs growing needs.
π οΈ Tech Stack
The DawgRide app is built using HTML, JavaScript, and CSS, which form the foundation for its structure, interactivity, and styling. For a consistent and responsive user interface, Bootstrap was employed as the primary frontend framework, enabling rapid development of mobile-first designs. To power the interactive map and provide detailed shuttle routes and stops, we integrated the OpenStreetMap API. On the backend, the app uses a RESTful framework to make API calls that communicate with OpenStreetMap endpoints, delivering real-time location and route data from the server to the frontend. This tech stack combination ensures a scalable, maintainable, and user-friendly experience throughout the app.
π¨ Design Process
To ensure DawgRide addressed real student needs, we began our design process by speaking directly to our target users. We held informal conversations with our class and distributed a short survey to understand the frustrations, habits, and priorities of students using Husky NightRide and SafeTrip.
From this user research, we identified key patterns in behavior and concerns. Using those insights, we developed two user personas to guide our design decisions:
π NightRide Functionality
We then moved on to transferring this design to code. We started with NightRide. To make late-night shuttle navigation more intuitive, the NightRide page gives students a simple, visual way to check shuttle availability based on their location.
I created two custom zone overlays in Procreateβa Purple West Zone and a Yellow East Zoneβwhich are layered onto the campus map to clearly indicate where each shuttle operates.
Once on the NightRide page:
Users select their location by choosing a building on the official NightRide route.
The app then displays how far away the nearest shuttle is, using real-time data.
The colored overlays help students quickly identify whether they fall within the East or West zone.
The result is a smoother, faster decision-making process that supports safer nighttime mobility.
Screens from the SafeTrip flow β
π§ Safety Map Functionality
The Safety Map lets students view and contribute to campus safety reports through an intuitive interface. I designed a custom key to explain the different icons representing report types like suspicious activity or hazards. Users can click on existing icons to see the classification, time, and description of each report.
To submit a report, users:
Tap the hazard icon in the bottom-right corner
Select a location on the map
Add details including report type and description
Verify their identity with a UW student ID number
Once submitted, the report instantly appears on the map for others to see.
Currently, this system runs on a local instance, but future versions will automatically clear reports after 24 hours to keep the map up-to-date and focused on recent incidents.We then moved on to transferring this design to code. We started with NightRide. To make late-night shuttle navigation more intuitive, the NightRide page gives students a simple, visual way to check shuttle availability based on their location.
π§ͺ Early Iteration
Early in our design process, we created a set of basic wireframes in Figma to visualize the core flow of the app. These initial designs included features like signup and login screens, a simplified campus map, and fewer safety-oriented tools. The original map design was less intuitive, which we later replaced with a more recognizable campus layout that I overlaid with custom Procreate zones. At first, we planned to integrate Firebase for user authentication and use real-time location services to track shuttle movement and SafeTrip drivers. However, due to the lack of a public API from UWβs NightRide and SafeTrip services, we couldnβt implement this functionality during the project window. That said, connecting to these services through official APIs would be a crucial step in a future iteration.
Screens from the NightRide flow β
π SafeTrip Functionality
The SafeTrip page in DawgRide was designed to simplify the late-night ride request process while improving visibility for students waiting for pickups.
Users begin by entering their UW student ID and phone numberβbasic information that helps link their request to a real identity. They then select the nearest building or landmark as their pickup location from a campus-based dropdown menu.
Once submitted:
The app displays the userβs current position in the SafeTrip queue.
It also provides essential ride details, like estimated wait time and reminders about safety protocols.
The interface is designed to be lightweight and mobile-friendly, allowing quick requests even when users are in a rush and taking necessary security precautions to prevent non-uw students from using the service.
While our current prototype simulates this flow, a future version of DawgRide would ideally store and manage this information on the backend, creating a real-time, dynamic queue that updates as new users join or complete their rides. This would further reduce confusion and help dispatchers manage pickups more efficiently.
Screens from the Safety Map flow β
βΉοΈ Information Section
The Information section provides users with clear, easy-to-understand details about the services available within the app, including Husky NightRide, SafeTrip, and DawgRide itself. It covers how to use key features like the shuttle tracking, SafeTrip ride requests, and safety reporting. Additionally, users can find up-to-date shuttle schedules, tips for planning their commute, and safety guidelines to ensure a smooth and secure late-night experience on campus. This section is designed to be a helpful resource for both new and returning users.
π User Testing & Iteration Insights
Through seven in-person user tests, we gathered feedback from UW students who regularly commute with Husky NightRide and SafeTrip. Their input guided two major iterations of DawgRide:
π Iteration 2: Streamlining User Flows
Added "Back" buttons to all forms after users reported uncertainty on how to undo or revise actions.
Introduced a tutorial and onboarding section for first-time users.
Designed and included a visual key for the safety map (hand-drawn in Procreate) to clarify icon meanings and available actions.
Included the NightRide shuttle schedule in-app to reduce the need to check UW websites.
π¨ Iteration 3: Visual & Functional Polishing
Ensured the Safety tab updates in real time when new reports are submitted.
Improved color contrast across tabs and information sections for visual accessibility.
Implemented error messages for invalid inputs to guide users through form completion.
π Looking Ahead: Future Roadmap
We see strong potential in expanding DawgRide beyond the prototype:
Build a client interface for NightRide and SafeTrip drivers to share real-time shuttle location data.
Add directions/navigation within the app for better route planning.
Develop a real SafeTrip queue system using a backend to store and verify entries.
Improve safety report handling with 48-hour storage, better classification tools, and verified UW NetID login.
Most importantly: integrate actual UW vehicles into DawgRide with live tracking functionality.
π§ Challenge: Live Tracking Limitations
One of our original goals was to implement real-time shuttle trackingβbut this proved challenging:
We explored APIs such as OneBusAway, but couldn't access usable real-time vehicle data from UW's NightRide or SafeTrip systems.
Despite spending two weeks researching and testing solutions, our user testing showed that basic usability needed more attention first.
What we did instead:
Reassessed priorities based on impact and feasibility.
Focused on improving navigation, map interactivity, and feature clarity.
Made NightRide cancellation and filtering functions more intuitive.
