Likeminded is a B2B mental health provider that offers employees secure access to various formats of psychological support, including 1:1 sessions, group workshops, expert webinars, and self-paced content. As the company has grown in the past years, it was time to implement new brand guidelines to ensure a cohesive identity design. After rebranding, the company needed a fresh and modern website that accurately reflects its business.

My role

This is a real-life case project I led and executed when being employed by Likeminded. The website redesign project took place between November and January 2023, during which I worked closely with the design, marketing, and engineering teams. My goal was to redesign the whole website visual experience. The brand visual guidelines were provided; yet, as there were no specific applications outlined for the website, I had the creative freedom to define new rules.

Project goals

Before the rebranding stage, the website's visual identity had never been a priority. The emphasis was primarily placed on content and information architecture, enabling a gradual transition from a single-page website to an expanded version over time. This highlighted the need for a shift in focus during the rebranding process, accompanied by the following goals.

Goal #1: Translate the new brand vision into the website design to convey the company's new identity.

Goal #2: Infuse the website with a bold and confident personality that sets the brand apart, transitioning away from an impersonal look.

Goal #3: Elevate UI and layout while preserving the familiarity of the old website structure.

Redesign impact

It's been almost half a year since we finished the project. Ever since we rolled out the new design, we've been able to cut down on irrelevant traffic and boost our quality indicators. Our traffic KPIs have shown great improvement, with a fantastic 24% increase in overall conversions and a 42% increase in people engaging with demo booking.

The website revamp was a major milestone in our rebranding journey. Thanks to this foundation, we've been able to pick up the pace in refining our social media presence and making significant progress in giving the web app a fresh new look.

The ‘Before’

To kick off the process, I outlined the website's architecture, involving the marketing team to map out its existing content. Considering content at an early stage helps uncover structure issues and layout requirements before the design phase starts.

The website consists of the following pages:

• 4 primary: Home, About, How it works, and Blog.

• 10 supportive: Demo, Contact, Test for free, Newsletter, Article view, Gated content view, Error 404, Terms, Data privacy, and Imprint.

Competitive analysis

I analyzed a range of competitors focusing on the mental health topic within the B2B sector. Based on our analysis of competitors' design approaches, we chose to steer away from the clinical or traditional feel to emphasize the company’s vision to destigmatize mental health. At the same time, we decided against being ‘too playful’ or having fancy transitions to ensure that the user experience remains accessible and tailored to our target audience.

Creating an interactive homepage

During the early design stage, I created a grayscale low-fidelity wireframe for the homepage to agree on content layout and placement before moving further. My aim was to create reusable sections that could serve multiple purposes depending on the use case.

The original homepage was very linear, making scrolling less engaging for the eye. Humans remember things better when interacting with what they see in front of them. In the new design, I introduced increased space to reduce visual clutter while incorporating interactive elements such as modular tabs or running belts to improve the site dynamics.

Converting brand identity elements into website

Once the general composition was in place, I moved into the visual design phase to focus on the brand look and feel of the site. We decided to go with a hybrid mix of work-related imagery and non-custom illustrations to stay more relatable but also showcase our product with a level of abstraction when needed.

I combined various elements, including colors, fonts, logos, stock photos, illustrations, and copy to develop a website that effectively communicates a strong and confident brand image to our target audience.

After multiple rounds of homepage iteration, we ultimately opted for a hero section featuring an image and more conventional CTA buttons. These choices were made to leverage a design that had previously proven successful for the website. By sticking with validated design patterns, we wanted to minimize extensive testing and mitigate potential risks associated with introducing entirely new elements.

Sneak peek into the revision

We followed an iterative process, allocating additional time to fine-tune key sections. Once stakeholder feedback was provided, I created the rest of the website, applying similar rules.

Final UI

As we were transitioning from Kirby CMS to Webflow, we partnered with an external agency to support us with the migration. Breaking down the implementation into stages, we first launched the main page of our website, gradually adding all the subpages with room for improvement in the next iterations.

Homepage

About & How it works

Blog

Reflection

Navigating data tracking challenges

Shortly after the initial launch, we discovered that our cookie setup was incorrect, resulting in a lack of data collection at the outset. Compounding the situation, Google introduced changes to performance metric measurement on February 20, 2023, coinciding with the final stages of our website implementation on Webflow. As a result, these factors together posed challenges in accurately tracking the impact of the implemented changes.

Priorities may change, and it’s okay

We didn't attempt to do everything at once because it would’ve taken too much time — time we couldn’t afford to lose. Initially, our focus was to build upon and enhance the first iteration. However, as the company's OKR period concluded and priorities shifted, our attention and resources were redirected. Consequently, we decided to postpone further refinement for some time.

Outsourcing work comes with limitations

With no in-house Webflow developers and limited capacity for our engineers to learn new no-code tools, we sought help from an agency. Once the project was over, the responsibility for functionality fell on the lead designer. Since the implementation involved contributions from different sources, the final result didn’t fully align with the original designs. Being unable to fix the details on my own motivated me to learn Webflow to prevent miscommunications and take more control over future projects.

Get in touch

Your business deserves online presence that reflects your brand

Don't underestimate the power of that first impression. Let's craft a digital experience that speaks volumes about who you are and what you stand for.

More projects