We just deployed a redesign of mapbox.com, with a new editor UI that's faster, easier to use, and more forward-thinking. The redesign is just the start of rethinking our entire .com experience. We've laid the groundwork for even bigger features, from a store for accessing third party data to the complete integration of TileMill and GeoJSON.io into the core of MapBox's web application.
What's new
Editor
Style your map, add markers, or search within the map using the cleaner editor interface.
Map management
Keep track of your activity, usage, and MapBox news all from the activity feed.
Map sharing
Easily share points of interest or hop to a different marker with our dynamic share page:
Mobile
Navigate the site, view your analytics and browse maps while on the go:
Our process
We're growing rapidly. This means radically scaling up the design tools on mapbox.com for the future. We began our redesign process a few months ago as an R&D sprint codenamed "spaceship". Our goal was to have total flexibility, meaning no technical constraints or legacy code, in order to rethink basic map interactions like searching, marker placement, and map sharing.
With nothing to hold us back, we focused on user interaction. We began asking questions like, "What's the most intuitive way to add a marker?", "What's easiest way to search for a city within the editor?", or "How can I style a map based on a only a few colors?"
One of the first things I sketched was a transition-driven, multi-step interface:
Our principles
After a few weeks sketching and debating, we stepped back and created some simple design principles before moving forward:
Interaction is the basic unit of design. Begin the design process by identifying the user's origin point, their goal, and the steps in between. A successful design makes every step along the way clear while keeping the user focused on their goal.
Transitional interfaces are easier to learn and more pleasant to use. Take advantage of animation and conditional visibility to guide users between steps and to add rhythm and momentum to interactions.
Interactions should be delightful and surprising. Design these interactions so that they're enjoyable to perform again and again. Minimize the effort required to complete tasks, enable users to recover from mistakes, and ensure that they receive feedback after taking any action.
Focus the user on one primary action at a time. Avoid sidebars, widgets, and multi-column layouts. Rather than confronting the user with a multitude of possibilities, use visual hierarchy to help users make meaningful decisions and allow actions to unfold across multiple steps. At the same time, be sure to make it easy for the user to move efficiently between primary actions in case they need to change gears.
As we continued to prototype the excitement grew, so we decided to go all-in and transition the R&D project into a full redesign. Young led the way, re-architecting the editor as a client-side app. In just a few days, we could save projects and make markers.
Redesigning the share page
The new share page is a prime example of how our design approach shifted.
The share page lets anyone browse maps designed with the web editor or TileMill. We needed to showcase a range of maps with this page: detailed marker maps, multi-layered data visualizations or custom base layers for more complex maps.
The old approach to sharing was static:
The old share page.
We started the redesign process by breaking down how users interact with it, then built an interface that guided them through those steps. By using transitions, we can introduce the map and provide a more immersive experience once the user begins interacting with the map. Additionally, we wrote rules to conditionally show or hide parts of the interface based the type of map. If the map has markers, then the page will display a marker list. But if the map does doesn't, the marker UI is hidden.
One state of the new share page.
Because the new share page had so many states, we prototyped these changes with workable code rather than making a dozen different mock-ups. Try out the new share page on my Minneapolis Places map.
Creating a framework
One of our goals throughout the redesign was to be as systematic as possible. We identified patterns that worked, stuck with them, and abstracted.
To make this easier, we developed a CSS framework called 'base' while we were designing. It allowed us to build more consistently and efficiently by sharing almost all our styling code across components. Read Tristen's blog post, Base: a styleguide and CSS framework for MapBox, for details.
Forward-thinking
We are going to be constantly improving the MapBox editor by monitoring the analytics and listening to your feedback. Our design team just doubled from three to six, so expect rapid improvements over the next few months. We're making the most useful, elegant map editor and publisher on the web, and this is just the beginning.
Start designing a new map, and let us know what you think on Twitter by mentioning @MapBox.