Case Study

Creating a map-first booking and wayfinding experience

From the start, Robin helped people find and book places to work in the office. So if you’ve seen a tablet mounted outside a conference room, it’s probably Robin.
‍
Robin maps provide real-time availability of the office to answer questions like What’s going on in the office? What room is available for my next meeting? Where is my team working today?

‍Before maps, users booked spaces and desks from a list. Users lacked visual context to understand the location of desks, conference rooms, and their teammates. Additionally, enterprise customers have hundreds of desks and spaces – booking from a list was a nightmare.

Maps evolved throughout my time at Robin. I was fortunate to lead design by providing direction for multiple teams and personally designed the map experience, patterns, and design system below. In addition, I worked closely with a few engineers to ensure technical feasibility and performance at scale.

Design Principles

Design as a System

Design the map with the fewest parts and create a consistent experience across all platforms.

Jakob's Law

People are familiar with established mental models. Maps are part of everyday life, utilize established patterns and principles.

Adapt Context

Organize information into map layers that can be shown or hidden depending on what the user is trying to understand.

One map – brought everywhere

Users can use Robin on many devices and platforms. The map was designed and built as a system allowing us to have a single codebase and consistent map experience. This strategy proved itself the right move as we grew the business. It reduced the need for teams to bring parity to each platform manually and allowed them to focus on higher-impact areas.

Map Design System

My process to design map components was messy and fun. CAD libraries, customer CAD files, and other indoor map platforms were sources of inspiration.

CAD libraries inspired me to create a map design system. Each map is built from single parts like a seat, stool, inner walls, etc. Those parts are combined with tables, desks, or other inner walls to create the map.

Designing component and then assembling them on customer maps was a highlight of this project. It was a constant exercise of balancing familiarity vs detail.

Early in the project I added UI details to desk shapes; when implemented the map was busier and hindered usability. Users validation helped me realize how simple these shapes can be – do this early and often.

Desk Groups

Many desks create desk groups – these are primarily used to make map creation more efficient by copy and pasting these common groups across floors.

Work Areas

These are areas in the office where teams work collaboratively for the day. They contain a mix of desks and soft seating.

Components and Variants

Components and variants in Figma allowed me to organize each part of the map then build map templates from those parts – change once, update everywhere.

Technical Constraints

All product work comes with technical constraints. As product designers, we need to ideate alongside engineers. Understanding what we can do, what boundaries we can push, and what things are impossible. Building an indoor map platform had many technical constraints. As a startup, we didn't have all the time in the world. Delivery must be iteratively and timely – close collaboration with engineers enabled me to do that.

Placing desks with GeoJSON

Maps are primarily PNGs and SVGs. Desks are placed with GeoJSON because they need to support interaction and state change (desk availability).

Desk shapes and chairs required manual tracing—the more points to a shape, the larger the map filesize. Extra points mattered when you multiplied that by hundreds of desks.

Performance

Enterprise customer maps were huge. More stuff on the map = increased payload size. As the product moved up market load times creeped into ~10 second range (for international customers). Tactics such as caching layers and progressively loading in data helped us reduce those loading times down to ~1 second.

Concept exploration!

Arriving at the solution required many cycles collaborating with engineers, and validating ideas with customers. With all projects, the first pass is not the final pass

A favorite concept that was tossed due to technical reasons is in the bottom left of the first image. The desk seat is the button to "Book" the desk. That treatment made it feel game-like with hover interactions and subtle animations.

Challenge: Design at scale with large floor plans

A challenge I faced was how I would present map layers on large floor plans. For example, some of our largest customers have hundreds of items per floor.

Adjust information based on zoom level
‍Google Maps, Apple, and other map platforms solve this problem very well! Users are familiar (Jakob's Law) with map experiences; I started here to not reinvent the wheel and adapted the solution to fit use cases and product needs.

The gist is...
‍
Zoomed in -> Looking for something specific. Show more labels and availability
Zoomed out -> Where is X? Summarize and hide labels and availability

Customer maps in the wild

Here is a screenshot of the experience without controlling information based on zoom level. You can see how busy and unusable these experiences were before controlling what and how map layers appear.

Wayfinding and booking

Maps provide their highest value when supporting UX workflows such as booking a desk or conference room.

When a user is booking a desk, details like conference room availability is not important. The user is looking to immediately see where their team is sitting and what desks around them are free. Maps hide layers that get in the way of task completion.

Accessibility
Accessibility was a challenge with map technologies. List views on web and mobile provided an accessible pattern for those who require assistive technologies.

Map Themes

I designed several purpose-built themes:

Light – Used on Web and Mobile apps (most common)
Dark – Used on Status Board (interactive kiosk in offices). Dark provided strong contrast in an office environment against commercial lighting.
High Contrast – Black and white version to support highest end of color contrast.
Blueprint – Used when editing a floor. This was a fun riff on traditional blueprints and also made it clear to office admins that they are in edit mode.

Misc. Explorations

The map was built with Mapbox, which supported isometric and 3D modes out of the box. However, without customization, 3D and isometric weren't usable but looked great. Below are a few explorations of isometric and faux 3D.