Overview

TL;DR

• Problem: Cyclists and pedestrians often struggle to find safe, accessible routes due to a lack of reliable navigation tools tailored to their needs.
• Solution: SafeCycle, a mobile app designed to help users find safe and accessible routes with customizable options.
• Features:
  • Customizable routes based on user preferences for safety and accessibility.
  • Hazard markers to alert users of potential dangers along the way.
  • Accessibility options for users with specific mobility needs.
• Outcome: Delivered a static prototype with core functionality, providing key learnings in API integration and design-to-development translation.

Context

SafeCycle was created in response to the increasing number of pedestrian and cyclist accidents in urban areas. The app was designed to help users find the safest route to their destination by allowing users to input warnings for high-traffic areas, construction zones, and safety hazards.

Since pedestrians include a wide-range of differently-abled people, SafeCycle had to have personalized navigation options for accessibility.

Plan

To ensure that SafeCycle achieves its goal of providing safe routes for pedestrians and cyclists, the team decided to implement the following features:

• Customizable route options
• Real-time traffic/safety updates (by user input)
• Knowledge of transportation safety through a quiz

Process

We started off wireframing the main features of the app, jumping straight to hi-fi prototypes to test with users. Some initial issues pointed out through user testing were:

• Difficulty navigating to the home page (Severe)
• Difficulty in finding the accessibility options with saved routes (moderate)

Having tackled these design issues, we moved on to developing the app using NextJS and Google Maps API. This is where many issues occurred, as this was the first time implementing an API into a project, and the API itself had many limitations.

Results

The final product was mostly static and not fully functioning, as the API itself could not accomplish the features we wanted to implement. We were able to load the map and show hazard markers, but the coded app did not reflect the initial design as we had hoped.

Through the coding process, we learned a lot about restructuring our design to fit into the limitations of development and the timeline. This project allowed me to explore how to implement APIs for the first time, which aided me when creating Onward.

You can view SafeCycle here: safecycle.vercel.app