Case Study
Mapbox Studio
My Role
UI Design & Dev
Release
November, 2015
Team
Tom MacWright (design & engineering)
Eden Halperin (design & engineering)
Saman Bemel-Benrud (design & engineering)
Scott Andrews (engineering)
Matthew Whittemore (enginnering)
A Powerful New Mapmaking Tool Fit for Both Pros and Newbies
Mapbox Studio — Best in Class Map Style Editor
I started working on Mapbox Studio four months before its public launch. A main focus of the release was the style editor, a professional map design tool. As the first visual designer in the team, I was tasked to create a more cohesive, consistent and friendly visual language for the tool.
Style Editor
The editor provides complete design control over how the map looks. Users can select a map layer, edit data sources, and edit properties such as texture, color and fonts. Retaining flexibility that comes with all those poweful customization options, while at the same time designing a UI that feels approachable and learnable was definitely a big challenge.
Powered by the fast, client-side GL renderer, Studio allows users to directly select and edit map layers and view changes instantly.
Style Editor Iteration
Layer list
Data source panel
Data source popover
Layer editing panel
Property panel
Different layer states
Clear, distinguishable states for nested, selected and hidden layers.
Property categories
Divid layer properties into four categories to improve visibility.
Data source hierarchy
Visual hierarchy between the parent sources and their subset sources.
Property Function
Property functions allows for adjusting values at different zoom stops. Functions of number, color and enum properties all behave in different ways. For number properties, users can even control how fast the value increases or decreases. It is a powerful feature but also something that's difficult to design and visualize.
Priotization and deciding on what to build is always hard. User testing and prototyping helped us better identify problems and manage implementation scopes.
To help users better understand how property function works, we introduced detailed ramp graphs to indicate precisely how values change at different zoom stops. We also added automatic sorting and other smart validation rules to prevent people from making mistakes. There are many seemingly great ideas that were abandoned along the way, such as making an editable graph. Priotization and deciding on what to build is always hard. User testing and prototyping in code helped us better identify problems and manage scopes.
An example use case of propoerty function: increase the city label size when zooming in.
Ramp graphs
The large detailed graphs helps users understand how functions work and how values change at various zoom levels. I ended up simplifying the small graphs a lot more to make them look less clickable.
Editable graph
Prototyping helped us discover some accuracy intricacies with this interaction, which is why we didn't move forward with it.
Position indicator
I added a diamond pointer to indicate values at current zoom level. The distinct styles of small graphs help users differentiate between color, enum and number functions at a glance.
Dashboard
In addition to being a map design tool, Studio also serves as an online platform that connects all the different Mapbox products, from the data upload and processing pipeline to the developer APIs and SDKs. Users can design maps, upload and manage custom data, analyze API usage and manage account, all in one place.
Home page
The goal of the home page is to help user navigate and find what they are looking for. We identified three most common tasks: design, develop and data visualization.
Listing pages
The listing pages consist of a left main view with all styles/tilesets in a user's account, and a right sidebar explaining how to use those resources. The left popover shows current data uploads status.
Modal is another main UI component. The challenge here is explaining abstract concepts in a confined space.
New style modal
There are six styles users can choose as a base template for their design. The goal of this modal is to help them make an informed decision on which style to pick based on different needs.
Layer composite modal
Composite means combining various data sources for use cases like label collision detection. Here I tried to use illustration to explain the concept a bit better.
What I learned
Coming to the team at a later stage definitely makes the job more challenging since I have less context about the product history. A big part of what I do at the beginning was just reading through the Github ticket to better understand how decisions were made, since everything, down to every small UI tweaks, are documentated.
Using the same tool helps build deeper empathy between designers and engineers. Prototyping in code brings more credibility to my design decisions.
Open communication becomes especially important when collaborating closely with a engineering team, I've learned to always demonstrate clearly with mockups and prototypes what I am trying to achieve and also gather constant feedbacks from engineers to build consensus. It's also important to document the reason behind every design decision with clarity.
Using the same tool (Github) to design, develop and communicate really helps build deeper empathy between designers and engineers. In a highly iterative environment, opening a pull request also brings more credibility to the design decisions than static images. It allows me to establish trust and introduce systematic changes merely a few months before the launch.
Mapbox Studio is free and in active development. You can learn more about the tool here and start using it today!
Some illustrations I did for the Studio sign up page.
Built with React, Next, and Tachyons