Only One

Only One is an ocean conservation and advocacy platform. During my time at Driftime I worked 2 days per week in the Only One product team. I really enjoyed this experience because I was able to work with and learn from a talented and experienced group of people. I worked on a number of projects ranging from small isolated research and exploration projects, to fully new features and pages for the Only One site and platform. Additionally I spent many hours updating, improving and maintaining the Only One design system.

Details

Agency

Type

Driftime

Product design

Only One

2024

Date

Client

Project 1: Interactive maps

Description

Only One worked with partners to create interactive maps for two key campaigns: bringing attention to bottom trawling activity in protected European waters and highlighting biodiversity in the oceans around Antarctica in an effort to establish new marine protected areas.

Challenge

  • Designing the UX and UI of the map and how it ties into the broader Only One design system

  • Designing the maps themselves while considering how the approach could be rolled out to future projects

  • Processing the data and files provided by partners through QGIS and exporting formats compatible with Mapbox

Impact

This was the first time Only One had created interactive maps. Completing this project well opens up future opportunities with new partners. Additionally interactive maps provide a rich medium for story telling, allowing Only One to inform and inspire people more effectively.

Links to live maps

Project 2: Sign with Google / Facebook

Description

One of the primary advocacy tools Only One uses is the creation of petitions. Pulling from their vast user base they can generate huge support and put weight behind key issues in ocean conservation. As part of this process they are continually trying to improve the user experience of the petition signing process and looking for ways to make it smoother.

This project investigated whether it would be worth adding the option for users to sign petitions using their Google or Facebook accounts.

Challenge

The key challenge in this project was comprehensively mapping out all the user flows for each user type and how they would be impacted by this change.

Additionally understanding the technical requirements and limitations inherited from Google and Facebook when adding “Sign with…” functionality, and how that would impact our current technical and UX approach.

Impact

After deeply considering, investigating and testing various flows, user journeys and options, as well as consulting with the engineers on the implications of a new feature like this. We came to the conclusion that although it may seem beneficial to add more methods for users to sign petitions, signing with Google and Facebook would actually increase the number of steps a user needs to go through, as shown below in a exert of the user flows studied.

With this information, alongside some technical insights and challenges we decided this approach wasn’t worth pursuing.

Project 3: Form expansion

Description

As part of a broader piece of work adding new features to the advocacy tools available to users. We wanted to investigate how the forms within the decision-maker contact tool should behave.

There are various user types within this flow each with slightly different journeys. I created a prototype to try out the different options so the team could make an informed decision on how to proceed.

Challenge

When considering a change like this, it can be difficult to visualise the effect on the user experience. Even though it may seem inconsequential, small changes make a difference when a user is just one click away from abandoning the flow.

Impact

By creating the interactive prototype, we were able to experience the flow from the user’s perspective, including error states and dead ends. This, alongside technical considerations, allowed us to more confidently decide on a direction to take.

Flows:

01 User is in target locale
02 User is not in target locale
03 Show full form from the start
04 User is logged in

Design system management

Only One has a complex design system to support the many facets of the product. Part of my role as a product designer was to maintain and improve this design system. Below are a few elements that I worked on alongside the Head of Product.

01
Map documentation

I brought together all the different types of maps used throughout Only One. Based on my work on interactive maps I updated the designs holistically to be more consistent and created comprehensive documentation to use going forward.

02
Stories

Only One uses stories for various types of content on their website, including campaign updates and explainer content. I updated and improved the stories component and created documentation making it easier for the design team to use.

Additionally while setting up the component I spoke to the engineers in order to understand more clearly how this component will be built. In this way I could set up the component in figma to reflect that approach more accurately.

03
Buttons

I conducted an extensive audit of the buttons used throughout the Only One site. At the time there was a wide variety of button styles used inconsistently.

I put together a new hierarchy, taking into account the varied use cases needed. I considered their visual approach as part of the broader element set and created a robust component to be rolled out in the design system.

More projects