Digital Design at 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.
Context
Developing an Informative Experience
Moment Energy is an energy storage solution company that strives to repurpose all EV batteries for second-life use by 2030 by repurposing them into reliable energy storage units. 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 own project needs by reading through previous project deployment needs.
Framing the Problem
01
Older project deployments ended up being outdated and did not properly reflect Moment Energy’s services. Some of the past deployment sizes and services were no longer being offered, and further lacked sufficient project information.
02
Lack of scalability for additional project deployments in the future with the old tab layout was bound to disrupt the user flow.
Discover
Competitor Analysis
We conducted a competitive analysis in order to understand how other websites displayed their past projects in a way that was informative and fairly straightforward to navigate. We wanted a way to allow users to browse freely and without feeling overwhelmed by any potentially difficult technical jargon. Furthermore, we wanted to understand what parts of the project were appealing to users and what they wanted to learn about the most in a previous deployment.
- 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?
Key Takeaways
Taking a look at established websites such as Netflix and Apple allowed us to understand how to compile information in a way that is not overwhelming to the user and eases their cognitive load. Starting with Netflix’s home page browsing system, we learned that the hero section is an opportunity to highlight a featured post. To be more specific, the modular grid was an effective solution to help fix our current layout flexibility problem and with the combination of Apple’s card designs, we were able to group related information in a flexible-size container that would fit within the grid.
As for the content layout, we took a look at fellow competitors in the renewable energy industry space and found common pieces of information provided in highlighted deployments. This included a brief overview of the project, the challenge/problem that the client was faced with and the solution, which ultimately highlighted how their collaboration and product gave them successful results.
We concluded that our solution should split the current Projects page into two pages, one page that showcases all of the past projects using a modular grid system with each project stored in cards that contained key information including system size, deployment year, whereas the other page would showcase the project details including an overview, the challenges, solution and testimonial.
Key Features
Identifying User Behaviour and Goals
Data was taken from a 12 month period spanning from July 2023 to April 2024 and from approximately 1.4k users using HotJar
~51.8% of users scrolled to the end of the form
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.
~8.56% of all clicks were to browse through the project testimonials
Users wanted to see previous client testimonials in order to gauge what their experiences with Moment Energy were like.
~13.94% of all clicks were to look through the first two projects (Westlock County and Quadra Island)
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.
Final Solution
Designing A Solution
User Flows
With our goals and user behaviors in mind, we moved onto developing a simple user flow. We needed to see what content should be prioritized and how the content should be laid out. In order to help visualize this, we created simple diagrams to help show the linear progression that a user would take in seeking additional project information to help inform their own project needs.
Structuring & Wireframing
For the Project Gallery page, we settled on using a modular grid with repeatable rows to accommodate for effective and efficient browsing. We used cards within the grid system to group information and provide a flexible layout.
We began ideating various layouts that provided a clear and informative experience for those seeking to learn more about Moment Energy’s deployment process and wanting to potentially deploy similar projects.
Prototyping
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. We utilized cards in our final design to effectively sort information for quick browsing using both visuals and text. The grid structure allowed for ease of scalability which allows users to easily scan and use interfaces.
Visual Design
Developing the Visuals
Since the visual branding of Moment Energy uses brighter colours sparingly as accents, it makes for a simple and straightforward UI. For the Project pages, we wanted to ensure that the magenta was used to highlight the pathway to a discussion with the Business Development team, following closely with the branding on the rest of the pages.
Deliver
Final Takeaways
In April 2024, we were able to successfully launch the new webpages on the live Moment Energy website. As we continue to monitor the results, we have already started to see an increase in user retention rate on the page, with more results to come in as time goes on. All in all, the launch went smoothly and soon, even more users will be able to learn more about Moment Energy’s exciting innovations and their successful past deployments!
Reworking one of the pre-existing pages on the Moment Energy website was an extremely rewarding process from start to finish. Not only that, but being able to actively work in a company that strives for a greener future has made me feel the full impacts of my work. Apart from that, I had the honor to work alongside an amazing and supportive team of talented people at Moment Energy and from this I will continue to learn and develop my skills as a designer.
Here were some of the things I learned from working on this project!
Hard Skills
- Worked as one of the main UI/UX designers and designed wireframes, mock-ups, and functioning prototypes
- Collaborated with other departments (including the co-founders) to pitch the new design ideas and design process
- Conducted usability tests to gauge the effectiveness of the prototypes
- Developed the new web pages using Webflow
Soft Skills
- Leadership
- Verbal and written communication
- Time management and prioritization skills
