coral gardeners

Coral Gardeners is a NGO based in French Polynesia which goal is to restore the reef. The restoration team grows and plants resilient corals to restore dying reefs and bring life back to the ocean.

ROLE

UX/UI DESIGN

software

figma

1.the problem

optimization of monitoring process

Every quarter, the Restoration Team conducts studies on the coral fragments in their nurseries. They collect data using underwater slates which they then manually transfer to a spreadsheet. The process is time-consuming and isn't well-optimized.

3.discover and define

understanding the user

To have a better understanding of the users' needs and wishes, I started by interviewing 5 members of the Restoration Team. These interviews helped explore the variety of solutions. After many rounds of discussions, we decided on the development of an iOS app that would be used underwater thanks to a specific waterproof phone case. The second step involved performing field studies and to be totally emerged in the users’ environment. I went to the Coral Gardeners HQ in Mo’orea Island to see the nurseries and test the feasibility of using waterproof phone cases at such depths. I was able to understand the environment of the users as well as establish all the constraints. The information obtained enabled me to create a persona and empathy map to highlight the users’ goals and pain points.

3.wireframe

low-fidelity

After doing sketches on paper, I realized a wireframe to provide a visual understanding of the app. This helped me identify the pain points that can prevent the user from accomplishing the monitoring tasks underwater.

4.design system

RESPECT CORAL GARDENERS visual identity

For the creation of the Design System, I needed to make sure I was not breaking any of Coral Gardeners' visual identity rules. After several meetings with the Art Director, I managed to develop a Design System with components that respect Coral Gardeners’ visual guidelines.

Typography

LATO

ABC123

Riposte

ABC123

colors

#5CBAEF

#FFFFFF

#000000

5.PROTOTYPE​

HIGH FIDELITY ​

I created a High-Fidelity prototype in Figma that I shared with the iOS developer which he uses whilst developing the app. I worked very closely with him to spec out any missing interactions that were not covered in the prototype.