Koonden

A two-phased project that involved creative strategy/branding and a complete website redesign for a B2B marketing agency based in France. The new design resulted in enhanced user retention and conversion rates. Project Timeline: December 2023 to February 2024.

Koonden

Refresh brand identity and optimize user experience

Koonden embarked on a transformative journey with the complete redesign of their website – a fresh start that involved a new structure, fresh content, and an engaging design that resonates with the brand's voice.

Through their website redesign, Koonden wanted to set a new direction, expressing a modern vibrant identity that would support their marketing efforts and help them attract new business opportunities.

Visit Koonden: Koonden.com

a website page with a picture of a man in a suit and tie dye
a website page with a picture of a man in a suit and tie dye
Branding

Ahead of designing their website, I helped Koonden to redefine their brand values and visual identity. They needed a fresh new look.

Clean, Impactful & Modern

The design direction for Koonden's rebrand focused on a clean, bright and inspiring aesthetic. Reinforcing brand identity through high-impact typography and use of colors, I aimed to create a design that captured the essence of the brand and aligned seamlessly with contemporary design trends.

an illustration showing a brand's values
an illustration showing a brand's values
A Color Change


As part of the brand makeover, I recommended to switch the main colors from orange and blue to green and blue. I suggested adding a bright fluo green to give the brand a fresh and modern edge. Removing the orange made the color palette more consistent, with just two complementary colors – green and blue. This change not only updated the brand's look but also made it more cohesive across all platforms, ensuring a stronger and more memorable visual identity.

a logo for a company called koonden
a logo for a company called koonden
Moodboard
modern website design mood board
modern website design mood board
Starting the design

Once the branding and creative direction was set - we moved on to the design, starting with information architecture and wireframes.

Sitemap

On this project, the client had already come up with an effective sitemap for their website. I checked the architecture and ensured that the navigation was clear and as straightforward as possible - with a focus on optimizing for conversions.

a laptop computer screen showing a sitemap
a laptop computer screen showing a sitemap
a laptop screen showing a wireframe on figma
a laptop screen showing a wireframe on figma
Wireframes

Wireframes are the blueprint of a site, outlining its structure and functionality. They help to focus on user flow and ensure smooth navigation - without consideration for colors or other visual elements., which are explored in the next stage.

a tablet screen showing a website wireframe
a tablet screen showing a website wireframe
Focus: Homepage Wireframe
a laptop computer screen displaying a website wireframe
a laptop computer screen displaying a website wireframe

Display of client logos "above the fold" to build credibility (social proof)

Placeholder for a visually-striking image on the hero section that instantly grabs the attention of visitors

When creating wireframes I always prioritize what is visible at the very top of the website's homepage. It is the first thing visitors see and it must deliver an optimal experience to ensure user retention.

Refining the design

Once the wireframes were done, I found the colors, patterns, and other visual elements to bring everything to life and turn wireframes into high-fidelity mockups.

Using color, dividers and layout, I presented the information in a more structured and clearer manner - with optimal conversion in mind.

Visit Koonden: Koonden.com

Mockups
a tablet with a tablet and a tablet with a tablet showing a screenshot
a tablet with a tablet and a tablet with a tablet showing a screenshot
a mobile phone showing the mobile phone screen with the text unlock your business growth
a mobile phone showing the mobile phone screen with the text unlock your business growth
Mobile Mockups
a mobile phone showing the text,'delivering a customer's message
a mobile phone showing the text,'delivering a customer's message

Visit Koonden: Koonden.com

a mobile phone showing the text how to boost your engagement ring
a mobile phone showing the text how to boost your engagement ring
Thank You!

Hope you enjoyed reviewing my work! If you would like to see more or get in touch, fill in the form below and I will get back to you as soon as possible.