Website redesign for a business consulting company

Confluences is a consulting company offering solutions to develop business on the ASEAN market: market entry, business operations, venture vesting and even construction materials trading all under the “same roof”

‍

This large service offer is both a strength & a big challenge for the company: potential clients landing on the Confluence website were getting confused with the company offer and how it could benefit them.

To better understand the audience, I worked with the Confluences marketing team to build personas corresponding to their most common clients and define which in particular they wanted to target with the website

‍

Then we used the personas insights to identify the key content to be featured on the site and the key messages to be delivered. This resulted into a sitemap with a list of pages and the topics to be covered in each (testimonials, cases studies...

In this step, I turned the sitemap & pages into Wireframes to test the User experience (structure, hierarchy, navigation…). Wireframes are voluntarily build without colors and assets so the discussion remains focus on layout usability and UX

‍

To address the clarity challenge, I proposed to use an identical layout for all the departments designed as a lead generation funnel ( Teaser > Offer presentation > Case studies > Social proof (testimonials) > Call to action) and use a color code to differentiate the departments

‍

Specifically for the offer presentation, I designed a system of custom horizontal tabs to showcase general information about the department, summarize the potential needs and the solutions. Using tabs allow user to quickly jump to what interest him without having to scroll as presentation section contain lot of text

‍

As the number of cases studies / testimonials will grow over time‍, I used a system of dynamic sliders that can be managed easily by the client

The Confluences logo features 2 lines that diverge so I thought about reusing these curved lines  to create a visual pattern that I have used as an overlay on the hero Image to create a strong visual effect. It reminds of a camera shutter that gradually opens which reminds me of what Confluences does, as they are unveiling opportunities in ASEAN

‍

The navigation  is done via a side menu that expands so we keep most of the screen for the content and visuals. Finally, I have used color and colored declinations of the visual elements (logo, pattern…) to easily differentiate the departments: each is associated with a primary color that is systematically used through all the website

I have chosen Webflow to develop the website as this no code web builder offers a lot of design flexibility without the need to write code. This flexibility has been very precious to build the hero section with the wave overlay with absolute positioning and Z-index to layer the elements. I have also used a Webflow native animation to create a parallax scrolling effect on the hero section.

‍

Thanks to Webflow robust CMS, I was able to build templates for the departments, cases studies and resources (even the department color code is automatically applied). That is very important as it allows Confluences marketing team to easily update the website without having technical skills (I provided a specific CMS training before site hand over)

‍

To improve fluidity, I have used the native Webflow on scroll animation to delay elements rendering, create movement and attract attention to the call to action elements

‍

The resources page features advanced filtering options that were implemented using the Finsweet library that I also used to make all the components (tabs, sliders..) fully dynamic and easy to update from the CMS