top of page
Zettawatts Individual Project Page
I designed a centralized Project Page experience for Zettawatts that allows developers to easily upload, manage, and showcase their clean-energy projects. This page serves as the single source for all critical project information—pricing, availability, documentation, and traceability—making it intuitive for developers to navigate and maintain their listings.
To support the full transaction flow, I also created a customer-facing version of the Project Page, generated after developer updates. This version presents verified project details in a clear, credibility-focused format, enabling corporate buyers to confidently evaluate offerings with transparent pricing and impact data.
Project Type
Applications
Keywords
Individual page
design for card
Card redesign
Figma
Grid
Credibility
Organized
Accessible
Research and Sketches
To understand how developers currently interact with Zettawatts and where friction occurs, I began by mapping the full RFP (Request For Proposal) journey for AREC developers—from initial outreach to contract execution and project onboarding. This included documenting communication touchpoints, required documentation, approval stages, and handoffs between developers, Zettawatts, and corporate buyers. I also brainstormed a few quick sketches to get my first initial ideas visually laid out.
Through this research, I identified key pain points such as scattered information, inconsistent proposal formats, and limited visibility into project status.
Goal
The goal was to design two cohesive versions of the Project Page—one for developers and one for corporate buyers—that consolidate all project details into a single, intuitive source of information. By giving each user group a tailored view while maintaining a shared structure, the page becomes a simple, reliable place to access pricing, documentation, and key project information without navigating multiple tools or files.
Design Journey
I started by mapping the existing RFP workflow and identifying where developers and buyers were losing time—mainly through scattered documents, emails, and repeated back-and-forth communication. These insights guided my initial sketches, where I explored how a single structured page could simplify the entire journey.
From there, I went through many rounds of the developer project page, which also determined what type of information was needed in the customer page.
Throughout the iterations, I refined hierarchy, layout patterns, and interaction states to ensure both versions felt consistent with the Zettawatts design system while serving different user needs.
1st Round
2nd Round
3rd Round
Final Design +
Key Takeaways
The final project page balances the distinct needs of developers and corporate buyers within a single system. Complex project data is organized into a clear grid layout that supports fast evaluation while remaining accessible to non-technical users. High-priority information - such as visibility of the project and its' prices, specifications, documents, RFP status - is surfaced upfront. Additional components such as card and modal designs were created to support the clickable elements on the page.
The experience is designed for fast, confident project evaluation, with standardized presentation of capacity, timelines, and readiness across all listed projects. Context-aware language supports developer feasibility while translating project details into impact- and procurement-focused signals for corporate buyers.
Developer Project Page
Project title and prices, able to switch order of projects and edit through modal
Notes for the
corporate buyer
RFP status tag
*Empty if not in RFP status
Project visibility
_edite.jpg)
Edit project through
a modal
Clickable links to
upload documents
Clickable link to
access all documents
Customer Project Page (restricted access)
Customer needs to book intro in order to access project information
Notes and map are still visible
Information is blurred until customer books intro
%201_edited_jp.jpg)
%202_edited_jp.jpg)
Customer Project Page (with access)
_edit.jpg)
Clickable links to download documents
%201_edited.jpg)
%202_edited.jpg)
Clickthrough of Project Page
Aabbcc Roboto
Aabbcc Inter
bottom of page