Wiggle around San Francisco's biggest hills

Wiggle

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.

ROLE Concept, UI/UX
& Visual Design
WHEN Spring 2017
AWARDS Adobe Design Achievement Awards
Semi Finalist 2017
CLIENT School Project
Process Deck →
Various app screens for Wiggle

RESEARCH

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.

Sign for the biking route in San Francisco called Wiggle

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.

PRIMARY FEATURES

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

SECONDARY FEATURES

  •   Parking Information


    Information regarding parking lots in the vicinity

  •   Other Alerts


    Alerts such as vehicle size restriction on roads.

SOLUTION

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.


Wireframes

Wireframes for Wiggle

VISUAL DESIGN

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.


Mood board Visual design for Wiggle

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.


Showing the map screen

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.

showing alternative routes calculated by the app

Know steepness grade of roads in real-time


See the elevation of roads in real-time on the graph along with directions.

Feature 4 showing steepness grade of the users route
showing parking alerts screen

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.

FINAL DESIGNS

Final design for Wiggle

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