Client
Only One
Industry
Conservation
Enhancing the digital experience of an ocean conservation platform through new features and design system improvements
I worked with the Only One team on their ocean conservation and advocacy platform. I played a key role in maintaining and improving the design system while delivering both new features and targeted improvements to the platform. My work ranged from focused research and exploration projects to designing and implementing fully new features and pages. Working alongside an experienced product team was a valuable learning opportunity and gave me insights into high level product workflows.
Project 01
Interactive maps
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, aiming to establish new marine protected areas.
Challenges
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. Successfully completing this project opens up future opportunities with new partners. Additionally interactive maps provide a rich medium for storytelling, allowing Only One to inform and inspire people more effectively.
Project 02
Sign petitions with Google / Facebook
The primary advocacy tool Only One uses is 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 signing these petitions, 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.
Challenges
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 thorough testing and consultation with engineering, we decided that adding Google and Facebook sign-in options for petitions would add more complexity the user experience rather than simplify it. While we ultimately decided not to pursue this feature, the process reinforced the value of our user-centric approach.
Project 03
Form expansion prototype
As part of a broader piece of work, we wanted to investigate how the forms within our 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 demonstrate different approaches so the team could make an informed decision on how to proceed.
Challenges
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. This, alongside technical considerations, allowed us to more confidently decide on the best approach.
Project 04
Design system improvements
Only One has a complex design system to support the many areas of the product. Part of my role as product designer was to maintain and improve the design system. Below are a few elements that I worked on alongside the Head of Product Design.
Example A
Map design documentation
I standardised Only One's approach to map design by auditing and consolidating various map types and creating detailed design documentation based on my learnings from the interactive map design process.
Impact
This documentation accelerates the design workflow and improves the consistency and legibility of maps used across the platform through standardised guidelines, components and assets.
Example B
Header component
Only One has a variety of page types that have evolved organically over time (campaigns, petitions, articles, etc.). I analysed these page types and developed a unified header component.
Impact
The final outcome delivers a more consistent product experience while streamlining the design workflow through a standardised component.
Example C
Type system simplification
I analysed and simplified Only One's typographic system after identifying inconsistencies across our designs and the live site. I conducted a comprehensive audit across core page types and responsive breakpoints and put together recommendations for how to simplify our approach.
Impact
The resulting system streamlined the type scale by removing unnecessary styles, updating sizes to 8px increments, increasing size contrast, and adopting semantic naming. This resulted in improved visual hierarchy, easier design workflow, and a more consistent, lightweight product.
