Lush Map


Overview

I designed this map style to showcase the runtime styling feature in Mapbox mobile SDKs. Paired with the iOS developer we also built an MVP demo for a fitness app idea.

Launch date

Nov 2016

My roles

Cartography design

Product design

 


Goals

Mobile Runtime Styling

With the latest Mapbox mobile SDKs, you can have full control over the your map, and tweak its style freely in the runtime. 

Powered by mobile runtime styling, this Lush app demo allows you to travel between two opposite map styles: a dull and barren world, and a blooming and lush world. Starting from the dull map, you can "greenify" your the world by taking some steps and burn some calories.

Audience

Mobile developers. This would be a quick app that clearly demonstrates what the SDK can do, preferably demoed live from a phone.

 


Map design

 

Design system

I started by creating two distinctive color palettes that smoothly transition into each other.

Then, I created the icon sets and some subtle textures to bring more personality to the styles.

 

Design in live

Check out how my maps transition smoothly as you zoom in and zoom out.

Full screen

 

Street level: Île de la Cité, Paris

City level: San Francisco

Regional/national: the East coast of USA

 


Bring it to life

 

Scenario: Fitness app

The lush map can be used to motivate users in a fitness app: you start from a dull and lifeless world, and gradually turn your neighborhoods into a lush new paradise by running and biking every day.

 

MVP

For an MVP version, I first prototyped the step by step map style transition in a Mapbox GL JS demo. Then Justin, our mobile developer built the iOS version, hooking up the step counter with the iPhone motion sensor.

See desktop version

 

*    *    *

Read more about the Lush map in the Mapbox blog!

 

Yunjie Li, 2017
Using Format