What is 'Wiggle' ?
Since the app is pertinent to San Francisco, I wanted a title for the app that was related to the city. On research, I came across the word 'Wiggle' - a one-mile, zig-zagging bicycle route from Market Street to Golden Gate Park in San Francisco, California, that minimizes hilly inclines for bicycle riders.
How could I enhance the experience my fellow classmates had during the class trip?
This project was the culmination of my 10 day class trip to San Francisco. During the trip we often found ourselves trying to find alternative routes to avoid the steep roads. We hired a 18 passenger van that made it even harder to drive as well as find parking. Based on our experiences and the problems we faced, I created a set of features for the proposed app.
Color Coded Map
A color coded map to show elevation/slope of the streets.
Calculate alternative routes with lowest possible elevation.
Real time steepness grade on graph.
Information regarding parking lots in the vicinity
Alerts such as vehicle size restriction on roads.
Creating a navigational app but with focus on topography
I iterated through different designs to figure out how to present the information in a condensed and easy to understand manner. The secondary functions of the app like parking alerts and steepness graph were to be accessible while still keeping the map and directions the main focus.
City of Color
I wanted an aesthetic that draws inspiration from San Francisco’s pastel color palette. I also incorporated color transitions in the visual design to represent how each new neighbourhood in San Francisco smoothly transitions into another.
While the functionality of the application was mostly set in stone by the high-fidelity wireframes, a lot of time was put into adjusting the colours and visual details of the map and other UI elements. It was important to make sure that the use of multiple colors on the map does not look overwhelming and brings forward the information to be conveyed without being too distracting.
The darker the color, the steeper the slope.
The grades of all San Francisco streets are color coded on the map according to the slope.
Get alternative routes with lowest possible elevation
Wiggle will calculate possible routes to reach your destination, keeping in mind the time, distance, elevation, parking availability and road restrictions. The user can choose the route with lowest possible elevation or take on an adventure with the route of higher elevation.
Know steepness grade of roads in real-time
See the elevation of roads in real-time on the graph along with directions.
Get alerts for parking and car-size restrictions
The user can look for available parking on their route or get alerted for car-size restrictions on the steep roads.
HOW DID IT GO?
Wiggle aims to make commuting in San Francisco easier or more adventurous for those who enjoy the hills.This project brought new challenges for me, being the first mobile app and navigation based project I have worked on. Due to the short timeline and the requirements of the class, I had to reduce the scope of the project.
I plan to continue working on this concept. What other features would people in San Francisco benefit from? For instance, one consideration would be introducing user customisations such as setting a custom range of elevation that the user wants to walk or drive. I would like to improve upon the UX and app features based on further user research and testing.
Take a deeper dive into how I got to the final solution from concept to prototype.See the process