Project overview
Sliced Bread Design was approached by the Monterey Bay Aquarium Research Institute (MBARI) to redesign the interface to control long-range autonomous underwater vehicles (LRAUVs).
The LRAUVs are controlled via an online interface to conduct sensing and sampling missions, but the skill level of users ranged from complete beginner volunteers to experienced scientists and engineers. Our goal was to create a design that would meet the needs of all the users.
Skills
UX design, user testing
Duration
Nov 2021 - Jan 2022
The challenge
The original interface was too intimidating
The main goal of the dashboard is to set up missions for the LRAUV to collect data. These missions can last for days and the vehicles need to be monitored for troubleshooting or new missions by the on-call person. During watch handoffs, the new on-call person needs a quick way to understand the vehicle’s past actions, current state, and next steps.
The challenge was designing for users with vastly different experience levels and interests. Engineers with a high level of expertise wanted comprehensive detail, while scientists or volunteers with less experience only wanted relevant information, like incoming science data. The intimidating interface design also left users lacking confidence when troubleshooting or assigning new missions.
The original UI when you first log in
Creating a mission in the original UI
Getting oriented
This project began with phase one: user research conducted by UC Santa Cruz, and initial dashboard concepts that Sliced Bread and MBARI brainstormed together.
I joined in phase two to build on these concepts with detailed designs. I reviewed the prior work and created a project timeline based on the remaining design needs and user testing. I also created a product requirements document to align with MBARI and guide design decisions.
One of the initial concept sketches
Design and testing
Designing key screens
Working with a colleague to divide responsibilities, I developed detailed designs for command building, data visualization, handoff, and battery monitoring. We created interactive prototypes and tested them with users at varying experience levels. I compiled the results into key findings that informed our next iteration:
Frequent/recent commands were used more than anticipated during mission and command creation
Users needed comprehensive timestamp information: last satellite/cell communication, next expected communication, mission duration, and launch time
Beginners wanted default parameters as reference when creating a mission
Many users needed guidance when configuring variables in the command builder
My first round of the command builder didn’t provide enough context for users with less experience
When someone first comes in, they want to see at a glance the last communication with the vehicle and mission information
Refining and adding details
Based on the feedback, I focused on several key improvements:
Clearer command states: Redesigned icons to clearly indicate whether a command is waiting to transmit, transmitting, sent, and acknowledged by the LRAUV
Contextual command builder: Added descriptions for each configuration type to help users understand their options
Better communication visibility: Included last satellite/cell communication times in overview and LRAUV tabs, with estimates for the next communication window
Battery optimization guidance: Expanded information on suggestions for prolonging battery life
Presenting the communication state at the top with possible state combinations
Designing different icons to represent the transmission of the command
Adding descriptions for each configuration in the command builder
Offering a recommended suggestion with more context
Implementation
Post-launch refinement
After finalizing designs and handing off to our front-end engineer, the interface launched in February 2023. As users conducted real missions, they reported feedback and bugs on Github.
I returned to the project to triage Github issues and feature requests, organizing them into development bugs, implementation gaps, and new feature requests. I created new Figma designs for unaddressed needs, linked to existing designs that weren’t implemented yet, and connected each design to its specific Github issue for easy reference for our engineer.
An example of a Github issue asking for a new feature request
The impact
Better control and understanding
The redesigned interface enabled both novice volunteers and experienced engineers and scientists to effectively control the LRAUVs. Users particularly valued the intuitive design, with one volunteer stating, “I really like the timeline, map, and status up front and center and it’s neat to have the scheduler listed.” The improved design has allowed for more users to contribute to MBARI’s ocean research missions.