5E Advanced Materials Website Redesign
I had the opportunity to work on a website redesign project for 5E Advanced Materials, a company that specializes in Boron+ advanced materials with a focus on enabling decarbonization. The project consisted of two phases aimed at improving the user experience and overall design of their website. In phase one, I quickly redesigned the existing website within the company's branding guidelines with the goal of creating a more modern and user-friendly website that would better showcase the company. The second phase of the project involved a complete redesign of the website, including its branding, content, and overall user experience. This phase allowed us to take a more holistic approach to the website's design, taking into account the company's brand identity and business goals.
My Role
Lead UX Designer
Tools
Figma
Client
5E Advanced Materials
Year
2023
Phase 1: Quick Redesign
Step 1: Quick Competitive Analysis
To better understand the competitive landscape and the websites of other mining companies, I conducted a quick competitive analysis of 5E Advanced Material's competitors, such as Rio Tinto and BHP.
Due to the time constraints of the project, I primarily focused on identifying the basics of each company’s websites’ key features, visual design, and user experience. This analysis helped me to get a better idea of the industry trends and the design elements that could be incorporated into 5E Advanced Materials’ website to make it more competitive and effective. The information gathered from this analysis was used to inform the mockups for the quick website redesign in phase one of the project.
Step 2: Mockups
I used Figma to create high-fidelity mockups that reflected a modernized and more accessible user experience using the information gathered from the competitive analysis and more up to date design trends. These rapid prototypes allowed me to iterate quickly and make adjustments based on client feedback.
After completing the competitive analysis, I used the insights gained to inform the rapid prototyping of the mockups for the website redesign. I wanted to ensure that the redesigned website would meet the needs of the client, while also incorporating the best practices and design elements from their competitors. To achieve this, I used Figma to create high-fidelity mockups that reflected the new and improved user experience. These rapid prototypes allowed me to iterate quickly and make adjustments based on client feedback, which helped to ensure that the final website design would meet their needs and goals. Overall, this approach allowed me to deliver a high-quality redesign in a timely and efficient manner, while also ensuring that the client's expectations were met.
There were some key elements I wanted to address and enhance:
Addressing accessibility issues between the texts and backgrounds
Using pictures that enhanced 5E’s mission of sustainability and clean energy
Updating the footer to include more relevant information
Modernizing the overall feel of the website as a whole
Below, you can see two pages of the changes I made to address the above issues. You can view the live website here!
Phase 2: Complete Redesign
Step 1: Ideation
The goal of these mockups was to showcase the possibilities that a complete redesign could bring to the company's online presence and value to their potential investors. With the feedback and collaboration from the Digital Strategist, I crafted a layout that would better highlight the company's expertise, products, and services.
For the complete redesign phase of this project, I created high-fidelity mockups of a new homepage design to present to the 5E’s Digital Strategist and later to their Business team. The high-fidelity mockups allowed me to create a more immersive experience that demonstrated how the redesigned website would look and feel. This approach helped the Digital Strategist and Business team to better visualize the possibilities of a complete redesign, leading to a more collaborative and productive design process.
While creating these designs, I had the following objectives in mind:
Adding more content to the homepage to highlight 5E’s goals, projects and values
Changing the darker, industrial feeling site to a lighter site to create a clean, modern look
Complying with accessibility needs by coming up with alternative color palettes
Pushing the boundaries of the previously established branding / design in order to inspire innovative changes
Step 2: Personas
Considering that investors constitute a crucial target audience, it is logical to approach the website redesign from the standpoint of a prospective investor.
For the next step of this project, I made the decision to craft a persona representing an investor's perspective when evaluating the 5E website. This persona was an integral part of the presentation intended for 5E’s business stakeholders. This effectively demonstrates the significance of the website redesign and highlight its value to 5E’s business stakeholders.
Step 3: Iterate based on feedback
I created options for more prototypes based on the feedback given from the business stakeholders on the first round of prototypes.
After presenting the first design ideas to the client, they had some feedback that they wanted to incorporate. They wanted to see the following ideas in the designs:
Keep the dark grey and green in the header/footer — They wanted to keep these colors in order to stay consistent in their overall brand identity
Add more photo options for prototypes — They wanted to see more options on the different photos that could evoke the idea of a clean, modern, and sustainable company
