Surfrider
Converting an Excel based carbon emissions calculator into a tangible user interface.
Role
UX/UI Designer
Team
4 des, 8 devs, 1 PM, 2 leads
Timeline
9 months
Deliverable
Web app
PROJECT OVERVIEW
The goal of the project was to convert Surfrider's carbon emissions calculator (built in excel) into a tangible user interface. The interface would allow a user to plug in their own data from their own carbon emissions reduction project and see the impact through a series of key impact metrics we identified as well as corresponding visuals.
Hack4Impact, where I work, is a 501(c)(3) organization that provides free software solutions for local nonprofits. The Surfrider Foundation is a non-profit organization dedicated to the protection of the world's beaches and oceans. They are particularly concerned with removing plastic, carbon emissions, water quality, beach access and more. We partnered with them in 2024 to build a web app for the carbon emissions calculator project.
PROBLEM
Surfrider had a useful tool for forecasting climate change and its effects but no way to share its utility with the public.
As shown below, the excel based carbon emissions calculator was very hard to use and understand especially if the user doesn't know what they're looking at. Surfrider wanted to make a better interface tailored toward local coastal projects so the scientists and researchers working on these projects could easily input their data and measure the project's effectiveness.
SOLUTION
We built a web app highlighting predicted impact in a way that was easier on the eyes.
USER RESEARCH
"By matching avoided emissions factors with specific energy production and lifetime characteristics of a RE or EE project we can estimate how much carbon emissions it avoids."
- Jacob McNevin, Mechanical Engineering Consultant @ Surfrider
PRD, BRAINSTORMING, AND SKETCHES
To kick off the project, we conducted multiple interviews with Jacob McNervin, our primary contact for the project. In order to better understand what the web app would need, we asked about features, mobile responsiveness, and if it should be able to be embedded into the existing site or an external page. This led to the creation of a PRD that would guide our design decisions for the rest of the project.
Next, we moved onto moodboarding and sketching to get our initial ideas down. The moodboard included various methods of representing data related to climate change, as well as color palettes we thought reflected the ocean theme we were going for to match the Surfrider website and their mission.
DESIGN EXPLORATIONS
From the PRD, interviews with Jacob, and constant conversation with our technical leads for the project, we knew we needed a one page interface where the user could input data for the metrics used in the spreadsheet, so we felt confident to start designing.
There were five categories of metrics that the excel calculator could compute based on eight pieces of input data. Our initial designs featured a collapsable menu where the user could input their data, a bar chart for one category of metric above it on the left, and the other categories organized in rows of statistics on the right.
IMPORTANT CHANGES
As we continued to iterate on the UI, we were constantly conversing about what the best way to visually represent each piece of data would be. As a team we decided that a component library would be helpful for determining which visuals to use, and decided Shadcn would meet all of our needs. This actually solved our issue with the design looking a bit "flat" as well by allowing us to integrate our data into the already beautifully designed components.
Soon after, we realized that across the five categories there were actually 24 individual metrics, which we thought might be overwhelming to the user. With Jacob's help, we were able to identify 13 of the metrics that researchers would be most concerned about. We then recategorized the metrics into 3 fields: Consumer Impact, Societal Impact, and Shared Socioeconomic Pathways. Next, we redesigned the visuals accordingly, assigning one type of visual to each field.
FINAL PRODUCT
MOBILE VERSION
We were able to scale down the desktop web app into a mobile friendly interface.
OUTCOMES
Here's what we accomplished.
We built a web app that met all of Surfrider's needs.
We built a product that is meant to combat climate change (or at least aid the researchers working to combat it).
We converted something really complex into something digestible.
REFLECTIONS
Here's what I would do differently.
Assign specific tasks to each designer sooner. As the Associate Director of Design, the tech leads referred to me a lot for design decisions. In a leadership role like this, I could have provided more direction earlier on.
Made sure I was on track before I pitched some design ideas at the first standup. I failed to grasp the core functionality of the web app initially and made some suggestions that didn't really make sense at the beginning of the project.
Thanks for reading!