As farmers face more unpredictable weather, lenders need a way to assess risk at a regional level and support adaptation efforts. Our job was to take complex climate and financial data and turn it into something intuitive that feels clear, approachable, and effective for people making critical decisions.
As a product designer, I collaborated with developers, a UX strategist, PMs, and a lead visual designer. I created the visual structure, components, and interaction patterns that encouraged intuitive exploration and filtering through the data. My co-designer led the charts design itself.
SUMMARY
TIMELINE
December 2024 - March 2025
ROLE
Product Design
SKILLS
Visual Design Strategy, Design Systems, High Fidelity UI Design, Prototyping
TOOLS
Figma
TEAM
UX Designer - Sean O’Shea, Design Lead - Drew Glover, Project Manager - Luzia Bryant, Dev Lead - Darrin (Lemon) Mack
The Environmental Defense Fund came to Savas to design an accessible, user-friendly web application to help agricultural lenders understand how climate change could impact crop yields, farm profits, and credit risk.
DESIGN CHALLENGE
WIREFRAMES
Communicating Complex Data: Defining hierarchy and navigation systems to guide the user-journey.
I used wireframes, created by our lead UX designer to guide the visual design process. Insights from stakeholder workshops include:
Show change in weather, crop yield, and profit & credit risk, in that order.
Users need to start with a high-level view of the data, beginning with the U.S. map, and then be able to seamlessly zoom into specific regions to explore local details.
It’s essential that they can navigate without losing their sense of context, and easily retrace their steps when needed.
IDEATE - SPECTRUM POLL
How can visual design help tell the story of this data? Creating a modern design system with EDF’s brand.
I facilitated a spectrum poll workshop to explore interaction models and determine a visual language aligned with EDF’s goals. Stakeholders emphasized their desire for a minimal, clean, modern visual design that remained on brand while seamlessly guiding users through the data. They emphasized that they did not want the visual design to distract users from the data itself.
DESIGN CHALLENGES
Explorations with Tabs UI and Navigation Hierarchy
One of the key challenges I tackled was designing the primary and secondary navigation system. This allowed users to drill down into datasets and move sequentially through the site’s sections. I experimented with various tab designs that are modern, clean, and WCAG compliant.
The client expressed that the order of the pages was an important aspect of this narrative, so I adjusted my approach (as seen on the right) to tell this story by adding numbered tabs and subtle directional arrows, guiding progression. I also developed an interactive component system that visually indicated hover and selected states across all navigation levels.
TAB UI ITERATIONS
DESIGN SOLUTION: FINAL TABS AND NAVIGATION
The secondary navigation tabs include a slight caret, to indicate that the charts below reflect the data of that specific category. On mobile, I aimed to maintain a minimal and modern UI theme, with indicators (as seen by the check) for which category is selected. We used the primary EDF to indicate active, selected states.
Responsive Design & Dev Collaboration
I designed responsive versions of the tab system for mobile and tablet, adjusting both appearance and functionality to preserve usability across devices. I had a few working sessions with the lead developer to make changes in real time, refined the mobile experience and ensure accessibility, responsiveness, and polish.
The senior developer and I were able to make the tabs sizes themselves responsive, so they remained a consistent style and function on smaller viewports, up until a specific breakpoint.
Color Semantics
In our original design, we thought to keep consistency between colors that indicated positive, negative, and neutral changes within the data, regardless of the chart itself. Our collaborators at EDF suggested having the colors correspond with our mental models associations with colors.
We standardized “zero” as a neutral gray, and then used a diverging color scale to reinforce meaning. For example, temperature changes were represented with red (hotter) to blue (colder), while crop yield changes used a red-to-green scale, with green indicating growth and positive trends. All colors are WCAG AAA compliant.
Final Designs
WEATHER
CROP YIELD
PROFIT, RISK, ARCHETYPE
