Background

Previously, the Large Pelagics Research Center’s data about the global movements of fish species relied heavily on the memories of recreational and commercial fisherpeople. It was a manual, asynchronous process in which information was entered into the system days or weeks after catch and release, so data was often incomplete and inaccurate.

The Large Pelagics Research Center, in partnership with the Olin College of Engineering Intelligent Vehicles Laboratory, has developed new tags that carry an RFID chip to automate the process of tag identification. A fisherperson can scan the tag at or near the moment of capture with a compatible RFID reader, such as a mobile phone, which will allow the fisherperson to immediately enter data about the fish in the HiTag app. When the app connects to cellular or wifi, the data is automatically uploaded to the Pacific Islands Fisheries Group database.

Minimizing the barrier between catching and reporting the fish improves catch and release fishing activities, while also enabling scientists and researchers access to richer, more accurate data over the lifetime of a fish.

Team:

• 3 researchers from the Large Pelagics Research Center

• 1 iOS engineer

• 1 product designer (me)

My role:

• UX/UI designer

• Interaction designer

• Content designer

• Visual designer

• Prototyper

• Brand designer

3 core users:

• Commercial fisherpeople: These individuals are monetarily incentivized to record data.

• Recreational fisherpeople: These individuals are “citizen scientists” who are personally motivated to record data.

• Marine researchers: These individuals are often aboard commercial and recreational expeditions to support data collection.

Insights:

• The entire catch and release process must happen in under 45 seconds

• There is often limited or no access to wifi or cellular data while using the app, so data must be recorded and uploaded asynchronously (this is important for engineering, but also might need to be communicated in the UI)

• There is often high glare from the sun while on the water, so the UI must be usable in bright settings

• Recreational fisherpeople can be hesitant to share their location, but location is a requirement, so the experience must respond to these conflicting needs

Option 1: Step-by-step flow

Option 1 follows a pattern where every piece of information is collected on a separate screen during data entry. This supports more complex data inputs in the UI, but forces a specific order and can feel lengthy. I created a low fidelity prototype to quickly gather feedback from the team, which can be viewed here.

Option 2: One single form

Option 2 follows a pattern where all data inputs are handled in a single form. This raised issues for entering complicated data, such as species and location, but felt faster and flexible. Remember, the entire catch and release process must happen in 45 seconds, so I was designing for efficiency. Also, this option would be easier for the engineer to implement. You can view the prototype here.

Simple numerical entry

Simple data inputs, such as fork length, could be handled inline with fields that follow native iOS patterns.

Complex data entry: Species and location

Location and species had nuanced requirements based on differences between recreational and commercial fisherpeople.

In the initial exploration, species selection occurred in a dropdown menu with fuzzy search (the items in this menu would be pulled from a finite list).

Location was split into latitude and longitude numerical fields; this was informed by guidance from the 3 researchers regarding the language used during commercial and research expeditions.

Species

In order to support efficiency, we decided on the following requirements:

• Species should be optional. This is particularly useful for recreational fisherpeople, who might be uncertain.

• The UI should also support “unknown" for users who do not know the species.

• The UI should support “frequently used” or “recently used,” which responds to real-world scenarios in which fisherpeople repeatedly catch the the same species.

How might we design a UI that supports the complex requirements for species?

Location

I learned from the researchers that recreational fisherpeople are not always fluent in latitude and longitude coordinates.

Also, as mentioned earlier, recreational fisherpeople are hesitant to share their precise location.

The backend, however, requires precise lat/long coordinates.

How might we design a UI that allows users to enter a general region or location, and that can be translated on the backend into specific lat/long coordinates?

Species

A modal improved efficiency by creating the opportunity for quick links, such as “frequently used” or “suggestions.” A modal also provided clear space for an “unknown” option.

Location

For location, the modal provided an opportunity for the user to share location in multiple ways. I explored the option to select a general region, as well as pinch-and-zoom interactions. We ultimately landed on a UI where users could type in exact lat/long coordinates, use their current location, or pinch-and-zoom to an area.

Prototype

I created a prototype to reflect this new pattern, where simple inputs would be handled inline, but complex inputs would be handled in a modal. I brought this prototype back to the team for feedback. There was consensus that numerical inputs in fields combined with modals for complex inputs supported both efficiency and nuanced user needs. You can view the prototype here.

Maritime, utilitarian, and efficient

The team shared existing collateral and a high-level vision for a marine look and feel, which I translated into a handful of directions.

We wanted the app to feel utilitarian, but also modern and efficient. We ultimately chose a monospaced typeface for field inputs, and a sans serif typeface for all other content.

Designing for high-glare situations

The UI needed to be visible in high-glare situations. Knowing this, I proposed a handful of options for a dark theme, which is more legible in bright conditions than a light theme.

Design system and style guide

With the visual identity nearly ready, I began working on a design system in Figma to support future designers and the current engineer.