Icite Lab Dashboard – 13.png

Digital Detox | Lyme Bay Project

Creating UX and UI for the registry of White Beaked Dolphins that inhabit the English Channel to help create conservation area for the species.

Icite Lab Dashboard – 13.png

Digital Detox | Lyme Bay Project

 

Brief

MarineLife is a UK based research, education and conservation charity conducting scientific surveys of whales, dolphins and seabirds in the English Channel, North Sea and the Bay of Biscay. Digital Detox partnered up with MarineLife for their research project to monitor and research the population of White-Beaked Dolphins in the English Channel. The running service would assist researchers in getting more insights on this species of dolphins, potentially create a conservation area for them, and research how climate change affects marine life.

Goal

The goal of the project is to allow researches easily collect and analyse data about the White-Beaked Dolphins, their habitat and movements in the English Channel - through submitted footage from research surveys and by public.

Tasks

After identifying the goal and problem statement for both researches and public, we created the following milestones for the project:

  1. Create an optimised experience for researches to submit and store encounters of White-Beaked Dolphins;

  2. Encourage submission of footage from the public;

  3. Encourage sponsorship for the research project.

Each dolphin can be identified by their unique fin, and thus submissions from public can contribute to the research

Each dolphin can be identified by their unique fin, and thus submissions from public can contribute to the research


Process

Project details

Company: Digital Detox
Client: MarineLife
Team: 2 Full-stack developers, PM, 2 designers
Role: Research, UX design, UI design
Date: May - July 2019
Tools: Adobe XD

Understanding a problem

We interviewed, observed, and ran a workshop with the MarineLife researches to dive in more into their current pain-points of conducting research and surveys. This allowed us to create a photo persona of a marine researcher, as well as to better understand the encounter submission, individuals identification and matching processes.

We then identified a number of findings:

  1. The submitting an encounter process is completely manual, and conducted in hand following by filling in a spreadsheet;

  2. Matching dolphin individuals process is manual.

One of the manually edited documents featuring encounters’ details

One of the manually edited documents featuring encounters’ details


UX design for the back office tool

Taking the research findings into consideration, we proceeded with creating an information architecture for the back office tool. To validate the IA, we listed out all the information currently used for the registry and ran a card sorting exercise. Following this exercise, we moved on to creating a site map, and wireframes.

User flow with the high level wireframes

User flow with the high level wireframes

Agreeing on the flows, we then created an interactive prototype that was tested internally (prototype can be viewed here.) The findings allowed us to iterate on a few details.

We later shared the prototype with the marine researchers and collected their feedback. These exercises allowed us to better the flows and create the most user friendly solutions.

New encounter form
Web 1280 – 7.png

Below are a few prototype screens for the researchers’ back office tool:

Prototyping the flows

Prototyping the flows

Demoing the prototype

Demoing the prototype


Visual Identity

Phase 1 for the Lyme Bay project included creating a registry specifically for White-Beaked dolphins in the Lyme Bay. However, the researchers mentioned there were 3 other dolphin species that inhabit the area, as well as multiple other surveys run for various species in the English channel.

Keeping this in mind, we developed visual identity to potentially cover wild life research in the Lyme Bay, that include research of fish, birds and mammals. Such logo would have a set frame that represents location markers (degrees), as well as recording; with dynamically animated species:

marine life logo.gif

Iconography

To accompany the style, we also developed a series of linear icons, some of them with animated effect that adds movement and more life to them:

Screenshot 2019-06-26 at 22.37.23.png

Mobile interactions

While most of the research users would access the service via desktop, we anticipate that the public user might access the website through their mobile phones. This is why we decided to create a visually sleek mobile experience to draw more attention from people interested in marine creatures to help the research:

Explaining how one can become a contributor

Explaining how one can become a contributor

Submit an encounter form

Submit an encounter form

Subtle motion on Menu, hero image and scroll

Subtle motion on Menu, hero image and scroll

About the project and Menu sections

About the project and Menu sections


Results

The product (including the public site and the back office tool) is due to be launched in August 2019.

To measure the efficiency of the back office tool, we will collect qualitative feedback from the researches that will help us to understand whether the tool is easy to use, and if it covers all necessary features the researchers need for their surveys.

To measure the efficiency of the public site, we will integrate Analytics on the site to track user journeys and conversion rate of users submitting footage. Analytics will also allow us to plan further actions regarding marketing campaigns and / or designing feedback surveys.

What I learned

Overlooking this project end to end allowed me to understand more about the marine research and marine life, integrate those findings into user flows, and come up with wireframes, flow designs and visual identity for the project.

I also tested a new research technique - creating a photo persona, which has proven to work great in helping to establish empathy with the users.