Mercuria website redesign
A global energy & commodity group.
🔗 View live site
Role:Â lead digital designer (UX/UI)
Project key goals
1. Showcase a modern look and feel for the brand
2. Improve the user experience, navigation and calls to actions
3. Consideration for SEO
4. Clearly differentiate from competition
Overview
The aim was to create a user experience-focused, Search Engine Optimised ("SEO") enhanced, and lead-generating system. This system will establish Mercuria as a premier commodity trading company by providing a customer-centric website that serves as the core of our future global marketing and growth efforts.
The deliverables output I was responsible for included:
✅ A sitemap
✅ Key user journey flow diagrams
✅ A content map
✅ Wireframes
✅ Design brief and mood boards
✅ Style tile of refined branding
✅ Detailed UI designs, implementing Mercuria’s updated design system
✅ QA testing
01Â
Discovery
Before delving into this project there was a period of immersion to understand the overview of the business, its values and needs, types of user groups and their needs.Â
The first goal to meet was to ensure a seamless user experience and navigation throughout the site. To ensure this was met I worked with the global head of digital comms, facilitating regular meetings to discuss the information architecture of the proposed new site and implemented the new site structure into user flows to ensure this met the users’ needs in addition to the needs of the business. I did encounter a problem in the early stage of this project when the client challenged my proposal but with some discussion and justification with UX best practices we worked through this to ensure we were meeting the project goal of improving the user experience.
When proposing this new site navigation, I made sure to consider the SEO implications and worked alongside the SEO team to make sure it was compliant.
Mercuria Sitemap
Consideration-decision stage - User flow
We went through different iterations of the sitemap and user flows before creating the wireframes which followed after the content map. The content map was a crucial part of the project to emphasise to the client on how important designing for content is. This also ensured the modules I was proposing in the new website were suitable for the content they had planned to create and allowed us to carefully consider the user’s journey throughout the site with careful consideration and placement of call to actions. Once this was signed off we progressed into the wire framing stage of the project.Â
Since we had already discussed the modules that were required for the content in the previous content map stage, the wire framing process was much quicker with the client providing minimal changes to the first iteration of the wireframes. I ensured to collaborate with the developers at this stage of the project too to align expectations and rule out any potential issues we could have encountered to avoid any delays in the timelines from our side. The developers had no problems and were happy with what i’d created.
Mercuria wireframes on Figma
02Â
Brand
At this stage of the project we wanted to establish the brand in order to refresh their existing brand guidelines. This was a really important part of the process to meet the project goal of showcasing a modern look and feel for the brand whilst meeting accessibility standards.Â
To establish the brand positioning of the company I put together a design briefing questionnaire to tease out more information around Mercuria’s brand traits and where the company picture themselves now and in the future.Â
This step really helped me understand Mercuria’s vision, putting together three mood boards that included UI features that conveyed those brand traits. I presented these to the client on Figma and together we ideated and established their likes and dislikes.​​​
Mercuria mood boards
We then moved on to creating two variations of the style tiles. My aim was to provide an option that felt safer and more aligned with their current branding and the other to challenge what they had and branch out the UI of the new site even further. During this process I also collaborated with my fellow design team members to gain some feedback to enhance these two options further before presenting to the client. Overall the client was really happy with the outcomes and leant towards the bolder route which steered away from what they previously had. There were however, some elements of UI from the other option that they wanted to bring in which resulted in me creating the finalised version of the style tile. This ideation and creation of style tiles really helped to establish a clear direction to design direction with a much stronger and modern brand identity before the design process began.
Mercuria style tile option 1
Mercuria style tile option 2
03Â
Design
Using the design system, I created detailed UI designs with careful consideration for any opportunities to incorporate micro animations. Where possible I sought feedback from other members of the design team in collaborative sessions throughout. Overall the design process ran smoothly with very positive feedback from Mercuria and the rest the team.
Design system that was used throughout the design phase and included in the handover to the in-house developers.
I honed in on the homepage design first to ensure the designs were heading in the right direction before creating the inner pages of the site. After I'd presented the first iteration of designs, I took on board the feedback to create a second iteration that the client was happy to sign off on.
One challenge I encountered in this phase of the project was creating a bold, impactful and modern website with the limited colour palette that had to remain from their existing brand guidelines. I overcame this by really focusing on the other aspects of UI design, including incorporating some asymmetry to add to that dynamic feel the company was aiming for.
Final iteration of Mercuria UI designs
Mercuria homepage design
