3DR Site Scan is a drone software platform built for construction and engineering teams. They use the Site Scan app to create a “digital twin” of their projects by capturing drone images and processing them into 2D and 3D models, which helps improve collaboration and keep projects on schedule.

Our customers use the Site Scan web app to process, analyze, and export the data their drone collects. As drones moved beyond the proof-of-concept phase and earned their place on the construction site, many of our customers needed a single platform to manage all of their data in order to grow their drone program across the rest of their organization.

So we set out to re-imagine Site Scan to make it simpler, more flexible, and built for teams.

Site Scan has been acquired by ESRI in 2019 after the redesign.

Early sketches of "the button problem" with our current app & information architecture of redesign. Scroll to see old UI.

The Approach

I started by interviewing our customers and our internal customer success team to get a diverse set of product feedback that was representative of the different verticals we’re in. This helped us find common patterns in how our customers use Site Scan, which made it possible to define the key jobs to be done.

I broke out this mental model into different areas of an enterprise app that would work for individual users, larger teams, and be future proof as the product evolved.

Section of information architecture for Site Scan app

Designing a future-proof user interface

As we continued to add new features to Site Scan, it made the user interface more complex and harder to navigate. It wasn’t long before we ran into “The Button Problem”: our top-nav row of buttons—which made it possible to measure distances, for example, or view 3D models—kept getting longer and more cluttered as we added new capabilities.

We needed a new structure that would simplify the user experience while still staying true to our users mental model of Site Scan and each of its features, which include: viewing 2D and 3D models, viewing data layers, overlaying blueprint files, sharing data with teammates, and exporting nearly a dozen file formats.

Not only that, but this new navigation also had to give us room to grow as we continue to build the platform and add more features. I ended up creating a number of prototypes with different navigation systems:

Early sketches of map UX

Building an interface that worked for our customers

With these six prototypes, we ran our first round of beta tests with a half dozen customers. The below interface, with the sidebar, toolbar, and full map view, was the winner:

Here’s why our users liked it:

1. The top-level navigation bar—so they could easily cycle between projects and drone flights—was visible and easily accessible

2. The new sidebar design helped keep the actionable data front and center

3. The horizontal flight navigation was familiar to our customers from the old app, so we kept it the same

4. 3D views & timeline are Site Scan differentiators, so we kept these at the top

5. In testing, we got overwhelmingly positive feedback to keep data layers, overlays, and measurements in separate tabs: it makes it easier for our users to keep track of the different ways they can analyze their data

6. Upload, Export, and Share are core features of the product, so they earned a distinct place on the bottom of the sidebar

7. Users always wanted to be able to access their measurements, so we automatically overlaid them on the map

Final build for Site Scan map view

How do our users think about their flights inside of a project?

In addition to Site Scan’s default map-based interface, I also designed a new interface for organizing projects. This was to help our customers better manage all of the details of their drone flights in one place, even if they have dozens of projects and hundreds of flights.

The first task was to figure out how our customers actually conceptualized ‘projects’, ‘flights’, and ‘flight plans’ in the first place. In our customer interviews, we found a few common threads regarding how they wanted to keep track of their data and navigate through it.

The wireframes below show a breadcrumb from project > flight navigation with different flight views (list, thumbnail, map, and calendar). These represented the different paths our users could take to access and analyze a specific drone flight.

Solution: We chose option 1 because the list & thumbnail view was the most direct navigation for our users: we already had a map view in the 'home' page when you first log in, and it enabled us to add other elements into a secondary sidebar in the project hub, such as flight plans, GCPs, imports, members.

With this new interface now live in Site Scan, our users are now able to manage all of their drone data in one place, get insights from it faster and easier, and easily manage a fast-growing drone fleet across multiple projects.

Designing faster with a Design System

As the only designer at 3DR, I built a living design system that improves design efficiency and gives our engineers the tools to create more user-friendly features. This library was built in React and lives in Storybook for the Site Scan web development team.

Feature Case Studies

We had to work within design & engineering constraints of the first release of this redesign, so these are some related case studies that have been released after our initial launch.

Desktop Flight Planning

One of our most popular feature requests was Desktop Flight Planning: our customers wanted to plan flights in the office on our web app to make it easier for their drone pilots in the field.

After multiple user interviews, we broke out this project into two checkpoints: one to reach feature parity with our iOS flight planning app, and another—currently in development—that includes more sophisticated features such as annotations and custom flight checklists.

Planning a flight over the web & saving it to a project

Responsive

A major need of Site Scan users is to view their flight data on the fly in the field with contractors or in meetings with project owners. To ensure a consistent experience for these cases, we needed to make the 2D & 3D orthos, point clouds, and meshes accessible on mobile as well as web.

Responsive designs - built from blocking pixel sizes & padding around components