FMG was looking to lose its old style as a printed media company to reflect its progress into a larger, more innovative tech company. They needed a website and branding that reflected its true soul and purpose, showcased its products and services, and attracted talent to the company. Our goal was to create a robust UX design that is easy to navigate while also showcasing our talent in visual design.
The whole website is designed around the concept of connection. The idea of ‘connection’ reflects the core of all its products. They are all a link or bridge between two people or organisations, from the marketplaces platforms to the recruitment tools.
A brand new look was created by renewing the logo, creating a vibrant colour palette and choosing a simple, yet impactful typography. The circles of the logo represent diversity, balance, innovation and movement. The colour palette was refreshed with more vivid colours that had more contrast and with subtle gradients for more depth. Consistent in shape and colour, the new brand is more visible and effective in its communication.
Our first step was, having in mind the key points of the brief, to analyse what problems the current site had and what solutions we could implement.
After analysing the current website, we obtained three main insights:
· It was hard to understand the company’s activity.
· It didn’t reflect the FMG culture.
· There was no careers section impacting the recruitment process.
We wanted to create a better experience for users which made it easier to understand what FMG is and all the services and projects they have. Through brainstormings in Figjam, wireframes and mockups we created the basic structure from which we evolved it into the final product. It needed to have a clear organisation with a clean style, reflect FMG’s culture and focus on recruiting new talent.
Once the medium fidelity prototypes were created, we started creating higher fidelity prototypes for both mobile and desktop in order to implement new branding that we had earlier created. We also started to think about how to create interactive moments throughout the site. We used Figma to create the designs and prototypes and Webflow to build the final website.
We made sure that the user experience through our site was always maintained, regardless of what device was used to interact with it.
The homepage gives an introduction of the company, its new identity and products. The connection idea is all over the page and takes the user to each product in a very intuitive way. The hero image includes a big ball with a subtle moving gradient that grows into the background of the next section.
The products are categorised into four distinct groups that seamlessly transition through a subtle alteration of the background ball colour as the user scrolls down. This creates a refined and delicate effect, giving the impression that the products are vibrant and dynamic.
The About Us page provides information about who FMG is as a company and their history. It's full of friendly photographs of the different teams, including links to the job opening page so potential talent can join FMG. It also includes parallax animations to reinforce the concept of connection.
From this page you can see all the brands in FMG's portfolio and visit the different division subpages to learn more about each division's products and services.
Attracting new talent in all the offices is a big task so we designed a page where you could filter positions by location. This page was created using Webflow’s CMS which allows the HR team to update the job openings by themselves and in a very quick way.
Showcasing FMG diversity and culture was very important so we created a dedicated page to show all the locations, employee testimonials and company perks
Showcasing FMG diversity and culture was very important so we created a dedicated page for this showing all our locations, employee testimonials and company perks.
We showcased each office and division in individual cards providing visitors with all the information they needed to contact them.
FMG has now a better online presence with a website and branding that fully represent its activity and values. The combined use of Figma and Webflow allowed us to incorporate a high level of collaboration between team members and reduce the amount of time spent on development. The CMS has allowed the HR and Content teams to easily update job offers and blog posts without needing anyone else's help. This results in a more updated website that reflects the company culture, making it more attractive to potential talent.
The FMG website and rebranding was a huge undertaking, as it meant a significant change for a well-established company that had been around for years. It was challenging to be a key part of a design-lead project with people from different departments involved. This project has given me the opportunity to have a global overview of a project stepping out of the comfort of the ‘design-bubble’ from where designers usually work from. It has reinforced my knowledge of web programming and coding resulting in a better knowledge on how to make more dev-friendly designs.
It has also given me insights from a legal point of view like the complexity of setting up GDPR complient cookies and from marketing by working on the SEO and setting up analytics. Another big challenge was to learn such a complex yet powerful tool like Webflow on the go. The learning curve is high but it has shown us the possibilities you have as a designer so it has now been adopted as the main tool for new landing pages.
