Equal Route

Navigating a World of Accessible Possibilities Inclusively. We go beyond steps.

Comment

Inspiration

The fight for equality through accessibility is an ongoing movement. Several navigation applications are not disability friendly and do not offer accessibility configurations for those using the app. We decided to build off of Google's Find Wheelchair-accessible Places Service as it is not equitable for all disabilities and is very limited in its offered disability aids. We took our inspiration from BU's campus as many routes are difficult to navigate, and as not all disabilities are equal, some routes or obstacles can be more challenging for someone compared to another. Our logo is an iteration of the Accessible Icon, the product of an initiative by Brian Glenny and Sara Hendren. In 2011, they started altering public signs marking wheelchair-accessible parking to show an organic figure moving through space, compared to the original International Symbol of Access, which is rectilinearly geometric. The new icon, the one incorporated into our logo, portrays motion and humanizes the figure compared to the square limbs of the original. However, we want to emphasize that Equal Route is not just for wheelchair users. The wheelchair icon is a highly standardized and internationally recognizable symbol that signals the availability of similar accommodations wherever it appears–Equal Route is for everyone.

What it does

Our application calculates the most accessible route for the user based on the information and data inputted. Equal Route allows for community input, encouraging users to provide feedback and real-time updates on their surrounding environment so that other users can gain valuable information. Users can customize their routes based on specific needs, such as avoiding stairs or choosing the most wheelchair-friendly paths. Additionally, the application includes voice-guided navigation to help users navigate without looking at the screen, which is particularly helpful for visually impaired users. Equal Route accounts for the safest non-vehicle route and is integrated with the public transportation system to provide information on accessible public transport options and stops to ensure the services can accommodate users' needs. As some users may not have access to the internet or cellular data at all times, the app can function offline and includes an emergency assistance feature.

How we built it

Our application used technologies and programs such as Figma, Adobe After Effects, Adobe Illustrator, Photoshop, Google API, Expo, and React Native. We took inspiration from several navigation applications, and our UI/UX design pulls some features and builds off of others from these applications. The front end of our code was developed by converting our Figma prototype into HTML/ CSS and React. The backend code was created using Google Maps API, Expo, and React Native.

To create the logo, graphics, and animated loading screen, the Accessible Icon mentioned earlier was first vectorized in Illustrator. We combined this and a standard navigation icon to convey our app's function. Building off the icon's vectorization, we added the navigation arrow in the middle of the wheel. All of our other icons, like the accessible elevator icon ramp icon, for example, were all made by vectorization in Illustrator as well. To animate the logo for our loading screen, we saved each logo element as separate files and layered them on a composition in Adobe After Effects. The animation was created by setting repeating keyframes to allow for the figure to appear like they were using a wheelchair.

The Figma prototype was first initialized by considering the essential functions that an app like Equal Route would need, for example, the login page, account page, and a general map overview. From there, we were able to build off of those frames, considering the subsequent actions we would want to use to do. With the basic frames of Equal Route realized, we worked on creating an essential branding guide with colors and fonts for cohesion. The rest of the prototyping was mainly based on aesthetic choices, with a consideration for simple and easy functionality.

Our backend code was developed with React Native using Expo and Google Maps API to display a map with the user's current location, destination point, and route drawn between them. Furthermore, we included markers for the starting and destination points.

Challenges we ran into

We encountered several challenges as a team, many of which dealt with getting our desired output. Converting our prototype into code proved challenging as many elements and design choices did not translate correctly to code. Another challenge was animating the logo for the app's loading screen. Making the figure's limbs move like they would in real-life posing is a difficult task for first-time AE users and time-consuming. After getting the logo to move the way we wanted, another expected challenge was exporting the video and placing it in Figma. We wanted the video to have a transparent background so it could be applied on top of any frame. However, the video version with this feature was not compatible with Figma. After many tries, we settled on making the background of the video the same color as the app's loading screen so the video would be compatible with our Figma prototyping. We also needed help to successfully create a route using the user's geolocation and calculate the safest route compared to Google Maps' suggested route.

Accomplishments that we're proud of

First, we're proud of ourselves for working together and overcoming all our obstacles, especially since most of us didn't know each other. It was also 2 of our members' first Hackathon, so we're very proud of how we could all learn and work together in only 24 hours. We're also proud of our UI and spent the most time on the design. We accomplished our goal of making the app super user-friendly and straightforward.

What we learned

We learned to use APIs, Figma, and Adobe After Effects in 24 hours. Translating our Figma prototype into front-end code was a huge challenge that we successfully overcame and will use in the future. We also learned to use After Effects and bring the moving logo to life. We're excited we were able to figure out the complications and feature the animation on the loading screen.

What's next for Equal Route

Beyond the scope of this Hackathon, we would like to launch our application for consumer use and integrate our application with wearable attachments. Hand-free wearable cameras can help avoid potentially dangerous situations based on real-time information for visually impaired individuals and others with all ranges of able-bodiedness. This would function by incorporating Google Cloud Vision API to detect image properties and warn users of possible hazards such as uneven and/or slippery surfaces and obstructions. We want to create a more equitable life outside of this event.

Share this project:

Updates