Climate Mitigation
2023
Web Design, UI, Low-Code Development
Climate Mitigation
2023
Web Design, UI, Low-Code Development
Climate Mitigation
2023
Web Design, UI, Low-Code Development
Objective
The goal of this project was to present U.S. electric vehicle (EV) policy data in a compelling, accessible way to raise awareness and enable deeper engagement with sustainability initiatives. I was tasked with transforming a dense internal research document into an engaging, web-friendly educational resource for Seaside Sustainability’s Climate Action department.
Problem
-
Dense Academic Content
-
Needed to simplify language without losing depth.
-
Had to preserve all source citations and metrics while improving layout.
-
-
Limited Visual Assets
-
Worked with a single flat map image and simple icons.
-
Designed modular visual sections to elevate minimal graphics.
-
-
Hierarchy & Flow
-
Content originally read like a research brief.
-
Reorganized sections into scannable, web-first layout using background color, icons, and spacing.
-
Goals
-
Make complex policy data digestible through improved layout, visuals, and hierarchy.
-
Encourage user engagement by improving flow, readability, and visual interest.
-
Increase awareness and accessibility of state-by-state EV policy information.
-
Support educational advocacy efforts with a page that invites both scanning and deep reading.
-
Design for responsiveness across screen sizes without losing structure or clarity.
Mockup
The following is the mockup I received from the Climate Action team, including the map that I implemented using Simplemaps:
Solution
Map Placement
The EV policy map was positioned prominently under the introduction with supportive context and a colored section background, drawing user attention naturally to the data.
Metrics Section
Each scoring metric was redesigned with a corresponding icon and formatted into modular cards with collapsible descriptions, improving comprehension and reducing scrolling.
Resource Links
Related blogs were broken out into their own section, allowing users to explore related topics without getting lost in dense paragraphs.
Impact Summary
Category | Original Mockup | Final Designed Page |
|---|---|---|
Linking & Resources | Plain-text links embedded in paragraphs. | Links are broken out as a blog resource section with bullet points. |
Responsive Design Considerations | Single column PDF-style format. | Responsive web layout with collapsible sections (accordion-style for metrics). |
Iconography & Imagery | Icons are present but not uniformly spaced or contextualized. | Large, accessible icons anchor each metric section. Consistent design style throughout. |
Typography & Layout | Long blocks of uninterrupted text. Font hierarchy is limited. | Clear typographic hierarchy with titles, subtitles, and body text differentiated by size and weight. |
Map Integration | Map image is functional but lacks visual emphasis or placement hierarchy. | Map is centered and placed directly under the title and intro, with a light blue background to draw attention. |
Header & Branding | No strong visual branding or context for the content. | Hero image with branded "Climate Mitigation" title and navigation bar for site-wide consistency. |
Visual Hierarchy | Dense, text-heavy layout with minimal contrast and spacing between sections. | Clean, modular layout using color blocks, icons, and hierarchy to visually separate content areas. |
Category | Original Mockup | Final Designed Page |
|---|---|---|
Linking & Resources | Plain-text links embedded in paragraphs. | Links are broken out as a blog resource section with bullet points. |
Outcome
-
Resulted in a significantly more engaging and accessible page.
-
Met the project’s primary goal of raising public awareness about the variation in state-level EV policies.
-
Aligned with web accessibility standards for improved usability.
-
Strengthened visual storytelling and enhanced content readability across all devices.
Final Designed Page
