Carbon Capture Website
Designing an website to clarify the environmental implications of carbon capture technology
Embedded Files
TIMELINE
September to December 2023
ROLE
UX Designer and User Researcher. Project for Human Factors Product Design class.
SKILLS & TOOLS
Figma prototyping
Usability A/B testing
User Needs & Requirements Analysis
DELIVERABLES
+ Mid-fidelity wireframes
+ High-fidelity Figma prototype
+ Design walkthrough with client
OVERVIEW
Carbon capture and storage (C.C.S.) is advocated as a green energy solution, with the US government is investing billions of dollars for its proliferation. The climate crisis is a critical contemporary issue and valuable resources are being used to develop technology that doesn’t effectively reduce carbon emissions.
Our challenge in this project was to design and develop an intuitive website that clarifies the environmental implications of carbon capture and storage (C.C.S.), and advocates for redirecting resources from C.C.S. toward renewable energy solutions.
STAGE 1: RESEARCH
Prior to creating our initial design, we researched carbon capture and storage technology and interviewed our client, Professor Charles Harvey, to better understand how we could meet our user's needs with our product. During our meeting with Professor Harvey, we learned more about our target audience— policymakers, media sources, and scientists— and discussed the importance of the design having high reputability and accessible information that caters to all levels of knowledge.
Through this meeting, we distilled down three key arguments to showcase on the website:
1. Investments into C.C.S. Will Sustain the Fossil Fuel Infrastructure
2. C.C.S. is Used to Obtain More Fossil Fuels
3. Inflation Reduction Act Subsidizes C.C.S. with Section 45Q of the Federal Tax Code
The next step in our research process was to conduct and primary desk-based research to determine a set of user needs and requirements for our design. We developed a list of 10 requirements based on our findings. We also created two user personas to represent our target audience.
User Needs & Requirements
User Personas
STAGE 2: IDEATION
Our first step in developing our design was to create 4 moodboard explorations for the look and feel of the site. From those 4 moodboards, we selected our favorite to be our design aesthetic.
We also took the content we collected during our research of Carbon Capture and compiled the information into an information architecture with a simple and user-centered organization.
STAGE 2: DESIGN
Using these findings, I synthesized key requirements and began creating low-fidelity wireframes in Figma. We knew we wanted our web UI design to be eye-catching, impactful, easy to navigate, and simple. We developed two distinct designs so that we could conduct A/B testing and determine which design we should build out in higher fidelity.
STAGE 3: USER TESTING
We conducted a user test with our initial Figma app prototype, to identify usability issues and improvements that could be made. We conducted user tests with 3 participants as they navigated our wireframe websites, observing their perspective in real-time. During these usability tests, we used an A/B testing model and eye-tracking glasses to analyze after the user testing session. Using the eye-tracking video data, we created heatmaps of the first five seconds a participant spent on a page to understand what they were drawn to and what they spent their time looking at
Key User Test Takeaways:
All participants preferred Version 2 over Version 1
Participants experienced difficulty understanding wordy language
Participants found visuals and motion effects engaging
Participants emphasized a need for more simplicity and making concepts digestible
Restructuring the information architecture to streamline arguments and improve ease of navigation
Better highlight connection between carbon capture and the perpetuation of fossil fuel industry
STAGE 4: DESIGN ITERATION
Following our user insights, we built out Version 2 of our design into a high-fidelity prototype. To remedy the user issues, we restructured and simplified our pages with less words and more images. We adjusted the information architecture to be as simple as possible and to include more diagrams to explain the complex topics in a more digestible manner. In this phase, we integrated the color and design aesthetic from our moodboard exploration to create an engaging final design.
FINAL DESIGN
FINAL PRESENTATION
Carbon Capture Conspiracy Final Presentation.pdfArcadia Ohnemus arcadia.ohnemus@gmail.com LinkedIn
Page updated
Google Sites
Report abuse