works

about

works

about

Right time, right place

15 min read

A set of dashboard that predicts where and when marine species are likely to be present.

Goal

Design a universal dashboard that is scalable and caters to all possible marine species.

Role

UI design,
Design system

Platform

Desktop app

Team & Timeline

4 UX designers

3 weeks

The project was divided into two products Deckhand and Right time, Right Place(RTRP). In this case study we focus on RTRP with its design and scalability.

Context

Right Time, Right Place uses ocean and fisheries data to represent distribution of fish species.

This allows fisheries to enable more efficient and sustainable locations for their fishing trips and avoiding problems like ‘bycatch’ (catching fish species or protected species)

Currently this project only consists of dashboards for Oysters and Abalone and is exclusive to certain fisheries only.

Screenshot of the Right Time, Right Place dashboard for Oysters

Problem framing

Solution

Dashboard

1 min walkthrough

Index

Jump to section

Problem

Research

Low-fidelity

Design workshop

Outcomes

Research questions

Which data fields are required to make the dashboard inclusive and universal for all species?

Are there any species specific design layout requirements?
What are the different user roles and their specific needs within the dashboard?
What is the best layout to reduce cognitive load on analytical dashboards?

Secondary research

Desk research

We found that the left side of a dashboard dominates in terms of interaction for webpages, establishing a clear information hierarchy, thus we had to ensure the left side gives more context for the rest of the dashboard.

Precedent research

We looked at existing fishery dashboards and the most important element was visual hierarchy of elements and sorting of data.

Screenshot of PeskAAS Dashboard

Screenshot of Global Fishing Watch Dashboard

Primary research

Design workshop

During the workshop, we encouraged participants to collaboratively list relevant species, identify all necessary data fields, and group and prioritise this information based on its importance to different user groups, including fishers and fishery managers.

Users

4 stakeholders

Type

Internal user

Goal

To develop an initial information architecture and identify the required category of information.

Outcome - Information architecture

Primary component

Secondary component

Data type

Action

Map actions

Flow of how the user would use the dashboard

The three main components for interactions where

The filters
The map
The data charts

Designing concepts

Concept development

This phase had two stages:

In the first stage we focused on basic lo-fi wireframes that helped determine the layout which helped us test early assumptions efficiently.
While the second stage was refinement of what exact type of data/element would go where and how each element would work.

This phase had two stages:

In the first stage we focused on basic lo-fi wireframes that helped determine the layout which helped us test early assumptions efficiently.
While the second stage was refinement of what exact type of data/element would go where and how each element would work.

First stage

We explored layouts with different placements of the core components.

Research

Card sorting workshop

In parallel to wireframing we conducted a workshop focusing on data, layouts and understanding their priorities.

We asked users to place the UI elements according to what they felt was important. We also asked the participants to say out loud their reasoning for doing so.

Users

3 stakeholders

Type

Data scientists

Goal

Understanding what data needs to be prioritised as well as testing different types of maps and data charts.

What we tried to understand

How important is the map?
How do we display all three components at once allowing the user to switch actions between the three easily?

How important is the map?
How do we display all three components at once allowing the user to switch actions between the three easily?

Data is always compared how are we going to allow them to compare?

What are we trying to showcase with the data?

Data is always compared how are we going to allow them to compare?

What are we trying to showcase with the data?

What we learnt

Bar charts are predominantly used on these dashboards as its the easiest to understand.
The primary data fields are:
Catch = The amount of fishes caught.
Effort = The amount of time spent catching fishes.
Catch + Effort = Catch per unit effort (CPUE)

Bar charts are predominantly used on these dashboards as its the easiest to understand.
The primary data fields are:
Catch = The amount of fishes caught.
Effort = The amount of time spent catching fishes.
Catch + Effort = Catch per unit effort (CPUE)

Designing concepts

Concept development

Taking all the insights from the exploration phase and the workshop, we created couple of more refined concepts:

Current flow

We conducted a usability test to make some changes to the flow.

Proposed solution

The following are the use-cases we know that the fisheries would take:

Set period → Look at the map → Look at the data summary → finds something in the data summary → selects it to reflect on the map → looks at the map → Looks at the data over another period of time either from the filters or the timelapse.
Download the map for the fishers to take on their trips.
Compare different species either or even a single species with environmental data.

Set period → Look at the map → Look at the data summary → finds something in the data summary → selects it to reflect on the map → looks at the map → Looks at the data over another period of time either from the filters or the timelapse.
Download the map for the fishers to take on their trips.
Compare different species either or even a single species with environmental data.

Colour guide

Dashboard

Before

After

Scalability of dashboard

The new search bar makes the dashboard highly scalable for any number of species, while introducing the ability to select multiple species at once.

The timeline allows scientists to forecast data ranges and view those changes directly on the map through an animated time-lapse.

In case of too much data, the data summary component can be split into general data tab and a dedicated area for species specific details.

Learnings

Next steps

Validate layout hypotheses: We received feedback that skippers may prefer a side-by-side map layout to compare species. Our priority is to test this with a larger pool of end users.
Refine predictive data model: A timeline that could show future predictions with the usage of past data.

Validate layout hypotheses: We received feedback that skippers may prefer a side-by-side map layout to compare species. Our priority is to test this with a larger pool of end users.
Refine predictive data model: A timeline that could show future predictions with the usage of past data.

Limitations

Strict time constraints prevented direct access to end-users (fishery managers), forcing us to rely on insights from internal stakeholders and data scientists.
Because the client's research into the complete data requirements is still ongoing, we had to design an adaptable framework based on partial data sets rather than finalized constraints.

Strict time constraints prevented direct access to end-users (fishery managers), forcing us to rely on insights from internal stakeholders and data scientists.
Because the client's research into the complete data requirements is still ongoing, we had to design an adaptable framework based on partial data sets rather than finalized constraints.

Next Project

Deckhand

Electronic logbook for fishermen

Let's connect about the next big thing.

rohitmohan093@gmail.com

Behance

About

Case study

Let's connect about the next big thing.

rohitmohan093@gmail.com

Behance

About

Case study

Let's connect about the next big thing.

rohitmohan093@gmail.com

Behance

About

Case study