Wiggle around San Francisco's biggest hills

Hand holding a phone with the app, Wiggle open on it, next to a taxi in the background


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 process
ROLE Concept, UI/UX & Visual Design
WHEN Spring 2017
AWARDS Adobe Design Achievement Award — Semi Finalist 2017

What 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.

Sign for the biking route in San Francisco called Wiggle


How could I enhance the experience my peers 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.

  • 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.


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.

Mockups for app screens for Wiggle in black and white


The City of Color — San Francisco

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.

Mood board showing colors and emotions
Style board showing font, logo, colors and icons used in the design


Make everyday walking, and commute in San Francisco easier

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.

Map of part of San Fracisco shown in the app

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.

Colors for different grades of streets 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.

Alternative routes calculated by the app
Steepness grade of the users route shown on a graph

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.

Parking alerts in the app
Grid of final design screens for Wiggle


How did it go?

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.