MBARI
A robot interface for deep water ocean work - experience not required!
The Monterey Bay Aquarium Research Institute (MBARI) is a research center where scientists and engineers are on a mission to unravel the mysteries of the ocean. Long-range autonomous underwater vehicles (LRAUVs) head out on sensing and sampling missions, roaming an ocean playground full of panda bear sea butterflies and vampire squid. But how to control these vehicles when the user’s skill levels range from learner’s permit to Grand Prix?
MBARI asked Sliced Bread to flex our creative minds and redesign the interface that people use to control the underwater vehicles. Our goal was to create a design that meets the needs of all the scientists, engineers, and volunteers who deploy and monitor the vehicles, each with varying degrees of experience.
Multiple users, one request: Make it easy!
Following user research conducted by UC Santa Cruz, we huddled with the brilliant minds at MBARI for a collaborative brainstorming session. Next, we sketched out potential directions for the UI and created a product requirements document. Navigating to find giant spider crabs and transparent glass squid is serious business! We focused on showcasing vehicle status, improving the logs’ information design, and making the interface user-friendly from the start.
Simplify workflow in an ocean of complexity.
Our biggest challenge was to redesign the process of assigning and scheduling missions or commands. The current design was a command line interface with a mishmash of confusing language and input fields, leaving everyone but the most experienced scientist scratching their heads over where to start or what to do.
We crafted a design with a user-friendly two-panel layout: Panel 1 - a map highlighting the robot's progress showing the status front and center and Panel 2 - side panels with collapsible sections of relevant information. Plus, we added strategically-placed embedded wizards to guide volunteers through the mission launch process.
Bring in the scientists, researchers, and engineers!
We embarked on two rounds of testing with both newbies and seasoned users from MBARI within an evolving Figma prototype. Using their feedback, we fine-tuned the screens, and updated designs, language, and functionality to make it a seamless experience for everyone.
From design dreams to reality.
Our front-end engineering team brought the design to life, using the magic of Tailwind CSS to ensure crisp visuals and consistent aesthetics. Tools like Storybook, Vercel, and Github allowed for collaborative check-ins with the MBARI engineers, enabling component testing as they were completed.
The Results
In February 2023, we launched the implementation, delighting MBARI staff and volunteers. They loved their newfound control over and understanding of the robot's actions. Users praised the intuitive design, with everything readily visible and no need for a search party. As one volunteer said, "I really like the timeline, map, and status up front and center and it’s neat to have the scheduler listed."
The new vehicle interface design has opened the doors for even more volunteers and scientists to contribute to this incredible project. By the way, you can witness the ongoing fruits of their labor by visiting the Monterey Aquarium Deep Sea exhibit and scoping out any of the amazing sea creatures mentioned here.
