Moment Energy

Creating a new project gallery experience aimed at informing prospective clients about our past deployment sites.

Role

UI/UX Designer

Timeline

2 months / Summer 2024

Tools

Figma, Webflow

What is Moment Energy?

Moment Energy is an energy storage solution company that provides commercial-scale access to clean, affordable, and reliable energy storage by repurposing retired electric vehicle batteries.

The Problem

With the announcement of new project developments and deployments, my team and I needed to create a streamlined web experience to inform and help prospective clients navigate their project needs. We needed to begin by addressing the current page that had 2 main issues:

Older project deployments were outdated and reflected sizes and services that were no longer being offered, and lacked project information.

The current layout had a lack of scalability for additional project deployments in the future as the old tab layout was bound to disrupt the user flow.

How might we create an informative experience for prospective clients seeking to learn more about Moment Energy’s battery energy storage systems through past deployments?

Exploratory Research

User Heat Maps

Using HotJar, we took a look at data taken from a 12 month period spanning from July 2023 to April 2024 and from approximately 1.4k users.

Key Findings

51.8%

of users scrolled to the end of the contact form at the bottom of the page.

8.56%

of all clicks were to browse through the project testimonials.

13.94%

of all clicks were to look through the first two projects.

Driving Insights

Users wanted to learn more about past deployments and projects prior to filling out a form and converting from a prospective client to a potential lead.

Users wanted to see previous client testimonials in order to gauge what their experiences with Moment Energy were like.

Users wanted to look through and learn about past project deployments in detail, including the system details and how Moment Energy worked with the client to achieve the final results.

Competitive Analysis

By observing and analyzing how competing companies laid out their information, we were able to better understand what parts of the project were most appealing to users and what they wanted to learn about the most. Our framing questions included:

What information did our competitors provide in their project writeups?

How did our competitors compile information in a way that is easily browsable and navigable?

How did these websites lay out their project information and details without overwhelming the user with too much information?

Wireframes and User Flows

With all of the preliminary research and competitive analysis in mind, we moved on to developing wireframes and user flows in order to see what content should be prioritized.

The Solution

We wanted to create a straightforward and easy to understand experience in order to reduce the friction between getting clients to understand Moment Energy’s product and helping guide them to a conversation with the Business Development team.

Key Features

Cards within a Modular Grid System
Users can browse effectively and efficiently through the modular grid with grouped information.

Reconstructed Project Detail Information Architecture
Prospective clients can skim through the information quickly to find what they are looking for.

Prototype

View the Prototype

What's Next?

Adding New Deployments

Updating the projects page with new deployments and their site information.

Analyzing Heat Map Data

Observing and analyzing heat map information on HotJar to conduct user surveys and interviews.

Final Takeaways

Working on this project at Moment Energy gave me the chance to spearhead, and oversee an entire design project from start to finish. I had the chance to learn how to present to stakeholders (including the 4 co-founders!) and though it was fast-paced, I found myself enjoying the challenge.