ezgif.com-video-to-gif (29).gif

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.

In this project, we were tasked to:

  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

To understand the problem, we researched the currently existing ways to submit encounters, dolphin individuals identification processes, as well as the catalogue of dolphins. We interviewed, observed, and ran a workshop with the MarineLife researches to dive in more into their 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 surveys process.

These exercises helped us to identify 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

Taking the findings and the information needed for the registry into consideration, we proceeded with creating an information architecture, a site map, and wireframes.

User flow with the high level wireframes

User flow with the high level wireframes

After agreeing on the flows, I then created an interactive prototype that we tested internally (prototype can be viewed here.) It also allowed us to communicate interactions better with the development team.

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

New encounter form
Web 1280 – 7.png
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

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:

Subtle motion on Menu, hero image and scroll

Subtle motion on Menu, hero image and scroll

Explaining how one can become a contributor

Explaining how one can become a contributor

About the project and Menu sections

About the project and Menu sections

Submit an encounter form

Submit an encounter form

 

Company: Digital Detox

Client: MarineLife

Team: Full-stack developer, PM, Designer

Role: Research, UX design, UI design

Date: May - July 2019

Tools: Adobe XD