Wiggle around San Francisco's biggest hills
How do could I make navigating through the hills in San Francisco easier?
San Francisco is not an easy place to get around with hills ranging from 200 to 900 feet. Neither a physical map nor the current mapping applications provide an intuitive way to tackle the topography of the region.
Wiggle provides a way to locate all the hills in San Francisco, to avoid them or enjoy them. It is a web mapping application with a focus on topography of the region.
view the processWhat is 'Wiggle' ?
During 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.
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.
Alternative Routes
Calculate alternative routes with lowest possible elevation.
Steepness Graph
Real time steepness grade on graph.
Parking Information
Information regarding parking lots in the vicinity.
Other Alerts
Alerts such as vehicle size restriction on roads.
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.
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.
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 grades of all San Francisco streets are color coded on the map according to the slope.
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.
See the elevation of roads in real-time on the graph along with directions.
The user can look for available parking on their route or get alerted for car-size restrictions on the steep roads.
This project brought new challenges for me, being the first mobile app and navigation based project I have worked on.
Mapping project scope
Due to the short timeline and the requirements of the class, I had to reduce the scope of the project.
Further user research and testing
What other features would people in San Francisco benefit from? 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.