Good Energy
UI Improvements
Good Energy was conducting groundbreaking work and research to help Hollywood creatives artfully portray climate change in TV and film, but their online presence did not render them the credibility they deserved. I redesigned multiple webpages to build social proof and clarify the services that Good Energy offers.
A gif that shows final screens from the project layered onto each other
Role
UX / UI Designer
Tools
Figma,
Zeplin
Timeline
February 2023 - April 2023
Skills
Prototyping,
Visual Design,
Content Strategy,
Design Systems
Project Link
goodenergystories.com
Results
Increased conversion rate by,
lorem,
lorem
01
Background

For this project, I worked as a UX/UI designer for the design agency, Maybe Ventures, and their client, Good Energy, a non-profit that connects climate experts and storytellers to provide the entertainment industry with tools and support to portray the climate crisis in scripted television and film, in order to inspire stories that help society face the climate crisis with creativity and courage.

During early 2023, Good Energy knew that a certain influx of web traffic was on the horizon due to new partnerships with Hollywood actors and features in the press, and they wanted to redesign different sections of their website to give new visitors an immediate understanding of their proven track record and what their mission was all about.

In an attempt to keep this case study succinct, I’m focusing on my redesign of the Home page and Consulting Services page. Other challenges that I tackled which are not featured here were reorganization of the design system, compliance with accessibility standards, and coordination of developer handoff.

02
Discovery Phase

Audit of existing work

Our UX researcher had already conducted usability testing task scenarios with 5 participant showrunners/directors/screenwriters who had never heard of Good Energy before and agree that climate change is a critical issue facing the global community. Through her testing, she was able to learn about users’ first impressions of the non-profit, concerns about collaborating with Good Energy, and confusions with the content organization on the website. Then we came together and distilled the findings to identify the biggest pain points within the Home and Consulting Services pages.

Pain points

Through the usability audit, we found that:

1.
Users had a preconceived notion of a “climate story.”
The Home page nor Consulting Services page did not sufficiently communicate that any story can be a climate story–plots do not have to be centered around climate change to be relevant.
2.
Users were uncertain about Good Energy’s storytelling expertise.
The Home page did not provide an immediate sense of legitimacy and users wanted to know more about Good Energy’s ‘experts’ and previous collaborations.
3.
Users were confused about the process of working with Good Energy.
On the Consulting Services page, users wanted more clarity on how they would engage with Good Energy during their collaboration.
Notes from the usability testing and site audit
Notes from the usability test and the site audit

"Would the team I’m working with understand story structure for TV and film? I’ve been in situations where people were hired to work on stories and they didn’t understand how to write for TV or film and it was frustrating and unproductive."

- User tester and film director

03
UI Design

Sketching wireframes

For the Home page, I decided to create new sections that would strengthen visitors’ perception of Good Energy’s expertise. This meant displaying their prominent media mentions, featuring their big clients, and creating a section highlighting some of their highly qualified climate experts.

For the Consulting Services page, I designed a section outlining the steps to a collaboration with Good Energy. I also added a section that details Climate Spectrum™ so that users could see the various big or small ways of integrating climate into their stories, and feel more confident that their story was relevant to Good Energy’s offerings.

Wireframe sketches of the Home and Consulting Services pages
Low-fidelity wireframe sketches.

Iteration

Over the course of many weeks, I met with the Creative Director, Good Energy founder, and the editorial team to revise the designs. I had to make sure the design supported the copy that was also being iterated on by editorial. I also reordered sections within pages I designed, based on what content should be prioritized in terms of visibility. After circling back to the user testing findings, I determined that immediately establishing Good Energy’s credibility to users was paramount, which is why I put media mentions and previous partnerships at the top of the pages.

High fidelity wireframes

The final high fidelity mockups of the Home and Consulting Services pages
The final desktop wireframes for the Home and Consulting Services pages.
The final mobile wireframes
The final mobile wireframes for the Home and Consulting Services pages.
04
Takeaways & Outcomes

This project provided very valuable experience, despite it revolving around static content. I was able to work on content hierarchy and leverage effective content organization to guide users throughout the web pages. This project also prompted my strong visual design skills because I had to make sure I designed a cohesive experience that integrated well with the preexisting unique system. In addition, this was my first time working with a dedicated editorial team and really solidified in my mind the importance of content strategy to align content with user needs and Good Energy’s goals.

Credits
UX Research -
Illustrations -