Design Co-op @ Moment Energy.
Company name
Final design
PROJECT TYPE
Internship
TEAM
Gina
MY ROLE
UX/UI Design, Web development, User research
TOOLS USED
Figma, Webflow
REdesigning the projects webpage
Project Overview.
Moment Energy is the company with which I completed my first digital design co-op. I was tasked with producing creative design solutions for company marketing materials ranging from social media posts and slide decks to website maintenance. Their mission statement is to provides a clean, affordable, and reliable battery energy storage system (BESS) by repurposing retired electric vehicle batteries.
With the impending announcement of new company deployments, the prior design implementation of the projects webpage needed the additional scalability to accommodate without impeding the existing user experience. Therefore, the marketing team was tasked with redesigning this segment of the website experience by better informing potential customers and assisting them in identifying their own deployment needs, thus converting them into market-qualified leads (MQLs) by exhibiting previously completed projects and delivering the necessary information from each in a more accessible manner.
With the impending announcement of new company deployments, the prior design implementation of the projects webpage needed the additional scalability to accommodate without impeding the existing user experience. Therefore, the marketing team was tasked with redesigning this segment of the website experience by better informing potential customers and assisting them in identifying their own deployment needs, thus converting them into market-qualified leads (MQLs) by exhibiting previously completed projects and delivering the necessary information from each in a more accessible manner.
Framing the problem space
Research Process.
Following our initial project briefing with the marketing manager where we identified the existing problem space and determined how the team would approach redesigning the existing company projects webpage, we began the research process by conducting a series of interview sessions with target users to understand what information prospective customers deem most important when viewing previous deployments. Furthermore, we conducted a competitive usability evaluation to better gauge how other websites from both direct competitors and unrelated industries choose to organize larger groups of information in a layout that displays all relevant information without impeding the ease of user navigation. Some of our initial insights include...
01
Customer needs.
Users want to see how their own project needs align with the offerings of Moment Energy through the information provided on previous deployments.
02
Specific results.
The results of a previous deployment have to be specific to the project because many heavily weight this section in their decision-making.
03
Grid layouts.
The usage of grids creates a cohesive layout that allow for ease of scalability when adding new items of information to the system.
Having now established the goals and prioritizations of our users, we began to move forward by developing a series of wireframes that explored layouts for organizing all previous project deployments in a myriad of different ways.
01
Initial wireframes.
02
Initial wireframes.
.png)
Uncovering problems and new opportunities
Usability Testing.
In order to evaluate our proposed design solutions, I led usability testing of our high-fidelity prototypes with target users to determine whether they assist in fulfilling our user goals. We accomplished this by having participants complete a set of representative tasks whilst having them voice their thought processes and pain points as they are testing because this gives us valuable insight into what they are thinking in achieving the assigned task. In order to break down our findings and discover common themes, we used was affinity diagramming to discover common themes and synthesize research findings into design decisions that inform our final solution.
Theme 01
Implementing CTAs.
The frequency of call to actions draws too much attention from the user and distracts from the content.
theme 02
Gallery card redesign.
Cards lack enough initial information to inform users which deployments they want to learn more about.
HIGH-FIDELITY MOCKUP & LIVE website
Final Implementation.
Showcasing our latest deployment
Hero section.
Our redesigned hero section provides a newfound opportunity to highlight the company’s latest deployment, driving additional user engagement.
Ensuring flexibility
Project gallery.
Taking into consideration the main issue of scalability and how we could accommodate the future addition of new projects, we needed a system for organizing all previous deployments while presenting it to users in an accessible manner.
Our choosing to implement a modular grid-system solves this by grouping project information into smaller digestible chunks, creating a consistent layout that is easier for users to navigate. Additionally, this method lends well to responsive web design, ensuring that users receive a consistent viewing experience no matter their device.
Our choosing to implement a modular grid-system solves this by grouping project information into smaller digestible chunks, creating a consistent layout that is easier for users to navigate. Additionally, this method lends well to responsive web design, ensuring that users receive a consistent viewing experience no matter their device.
A more detailed outlook
Project specifics.
Due to the bevy of information users would have been met with if all information from previous deployments was included into one webpage, with their behaviours front of mind, our team decided to separate the more detailed overview of project specifics for each deployment from the project gallery and into it’s own designated page. This eases the amount of information users are initially met with, and ultimately reducing their cognitive load.
Highlighting call to actions
Booking an expert consultation.
The frequency of appearance and placement of call to actions were thoughtfully implemented within the bookend sections of this page in order to balance the stakeholder goal of driving visitors to meet with the business development team without interrupting the user flow as they navigate the project details.
Reflection
Key Takeaways.
One of the most invaluable aspects of this experience thus far has been acclimating myself to the professional workforce. Although working through post-secondary education does bear certain similarities, some aspects cannot be learned without obtaining hands-on experience. I’ve gained further insight into the utmost importance of clear communication within a collaborative workspace and always needing strong rationale behind every design decision that is being made.
A little bonus perspective I’ve learned to appreciate is knowing that if the work you accomplish helps contribute towards a positive change in the world, it only makes the design process more fulfilling. Within a school environment, we would often work within the context of a hypothetical scenario to achieve the highest academic grade possible, which mentally detaches you from the reason why design can be such an effective form of communication. This has only made it more motivating to try and produce design artifacts to the best of my current capabilities.
A little bonus perspective I’ve learned to appreciate is knowing that if the work you accomplish helps contribute towards a positive change in the world, it only makes the design process more fulfilling. Within a school environment, we would often work within the context of a hypothetical scenario to achieve the highest academic grade possible, which mentally detaches you from the reason why design can be such an effective form of communication. This has only made it more motivating to try and produce design artifacts to the best of my current capabilities.
.png)
