When your mission is to “empower brands to create better experiences,” it helps to have a website that makes people happy, or at least helps them find what they’re looking for. Unfortunately, for a while, our own digital experience wasn’t keeping up with our own business and product growth. A website redesign was long overdue. 

It’s not a coincidence that we called our re-platforming effort “Project Champagne.” Yes, we’re a French company, so it fits. But also, “Drinking your own champagne” is a saying coined by Pegasystems’ CIO that refers to a company using its own product or services to essentially practice what they preach. 

As Contentsquare emerged as the leader in our industry and a major player in the SaaS space, we needed a website that would directly address four key success criteria:

• Tell the Contentsquare brand story
• Communicate Contentsquare’s industry leadership
• Engage quality leads for potential customers
• Create functionality that allowed for future scalability

In this article, I’m going to outline the approach we took, some of the key decisions that we made along the way, and some early results we’ve seen so far.

The Approach:

One of the first things I did coming into my role at Contentsquare was to pull together a large group of stakeholders to audit the last website and build a project plan. A surefire way to avoid future mistakes and oversights is to learn from past ones. Once we collected all of that feedback, we used it to create a highly detailed Request for Proposal (RFP) that outlined exactly what would determine success for this project. 

We only sent this RFP to select agencies that both had experience building B2B websites in our industry and came with personal recommendations from our professional networks. The agency we selected to partner with was KPS3.

The first thing the KPS3 team did was get to know our product and people, understand the competitive landscape, learn about our current customers, and figure out how the current site was being used. They also asked us at length about the future vision for Contentsquare. This stage of the process broke down into three steps: 

1. To inform the strategy for the Contentsquare website redesign, KPS3 conducted stakeholder interviews with employees across different departments and positions, as well as interviews with customers.
2. We conducted a digital audit, using data from both our product and others like Google Analytics, as well as a deep dive into our CRM data to get a better sense of our buyers.
3. Competitive research was also conducted so we could audit our global competitors’ websites, messaging & positioning, as well as their marketing strategies.

With all that complete the trajectory was clear; we needed to put the voice of the customer on display and let it speak for us. We can say how great we think we are all day, but it carries a lot more impact coming from the 700+ customers who are paying to use our platform. You can see this throughout the new site, starting with the top of our homepage.

We built out the information architecture using what we had learned in discovery. This included the development of the sitemap, content requirements, and initial wireframes. We constantly went back to our top site objectives to keep the site experience focused on helping users achieve their goals while getting some experience with our brand. Taking a user behavioral data-driven approach enabled us to stay true to their needs and battle back the common tendency to keep adding to pages and navigation bars to meet every internal request.  

Once we agreed on the sitemap and wireframes internally, we got into content planning. In my experience, content planning is perhaps the most overlooked part of any website development project. It’s time-consuming and sometimes tedious but saves an untold amount of time down the road when it comes time to start writing and producing content — especially given how much of this content consists of graphics, animation and video today. 

From there we had a few rounds of design, which included direct input from our internal design and UX expert team. Then, our team went to write all the on-page content while the agency worked on developing the component library. What component library, you ask? A perfect segway into our next section…

Key Decisions:

Over the course of any project, there are lots of small decisions made, which, when added up, determine the trajectory of the entire website redesign exercise. In order to make sure we were successful, we needed to be certain our decisions were addressing the four key success criteria we identified at the beginning of the project. Here are some of the key decisions we made to ensure those were addressed:

• Choosing WordPress as our CMS – We needed a somewhat flexible solution that the team was familiar with. Most marketers have used some iteration of WordPress in their careers as it usually strikes the right balance between being flexible and secure. Not to mention free.
• Using a component-based approach to build the site – with WordPress selected, we decided to use a custom implementation of Elementor, a robust page builder plugin. We created the majority of our site pages using customer components our agency build-out for us.
• Localizing and translating the site for each of our key markets – This was a critical one for us. As a French founded company with a strong global presence, we knew we would need the ability to localize our digital content. We use Smartling for most of our bulk translations and a multi-site setup of WordPress so we can easily manage each language site as its own experience.

The Website Redesign Results (So Far):

We are now a few months post-launch of the new site. There are always different success metrics that can be used, but we decided that an analysis of organic traffic would help us best see how the new experience was being used. So far, things are looking very promising. When looking at global organic traffic 45 days after launch, compared to 45 days before the launch, our session duration is up by +12 seconds, demo requests are up +76%, and our bounce rate has plummeted -14% so we now sit just above the 50% mark. 

Secondarily, we are using Contentsquare to continually optimize our website. While the numbers suggest that everything is moving in the right direction, we have already found areas for improvement. Un-clickable areas of the site have a high click recurrence, key features on our navigation bar didn’t get the engagement we hoped for, and unintended customer journey loops need to be smoothed out. We also found exciting ways to personalize content to help visitors progress on their journey and get to know us the way they want to, based on acquisition channel or role. This will be an ongoing iterative process that our marketing team can lead and manage.

We will also continue to mature our operations, connecting our Contentsquare metrics with our Hubspot marketing and downstream Salesforce tracking for deeper analysis of leads and opportunities.

Conclusion:

So looking back at the main objectives we started this website redesign exercise with, did we accomplish what we set out to do? Did we create an experience that is scalable and somewhat future-proof? Check. Did we position our company as an industry leader? Double check. Are we telling the brand story? You betcha. Finally, and most importantly, are we helping quality leads progress through our website? Absolutely.

The homepage is often a key webpage for direct and organic search channels for players in the retail fashion industry. In addition to being a crucial step in the browsing process for users, it’s also an opportunity for businesses to introduce and showcase their brand identity through editorials and fashion trends.

However, according to the data we collected in Q1 of 2019, fashion retail homepage bounce rates were as high as 40% across all devices. Users also still spend an average session time of 7min on desktop and 3min 41s on mobile. (Remember, Contentsquare measures bounce rate as having only seen the single page and leaving the site). 

It can be difficult to know what kinds of design iterations will help prevent users from exiting without having viewed at least a few product pages. It’s also impossible to create the perfect homepage, but we have some great tips to follow if you’re looking to improve the design of your fashion eCommerce homepage. 

Don’t place text on cluttered areas of images

Although images and photography are crucial for communicating brand identity and editorial content, make sure you choose images that are text-friendly. Place text over emptier areas of the image, change the image, or place text on an overlay. Always use white text unless brand guidelines say otherwise. Users tend to skip over text that is too long, too small, or just difficult to read. Keep in mind: any information must be easy to digest at a fast pace, especially for mobile users.

Don’t make the hero image the full length of the page

If you’re showcasing your Fall/Winter looks, consider using a static banner —a prominent, single banner on the page that does not have rotating content, one that allows other content to be seen above the fold. We often find the exposure rate — how far down the page visitors scroll — drops drastically below the fold line. 

A hero image that spans the full length of the page could mislead users into thinking there is no other content. Because the average length of mobile pages is around 3,400px, we need to encourage users as much as possible to scroll past the fold line.

Don’t automate carousels

If you’re showcasing new collections or promoting sitewide discounts, avoid automatically rotating slides within the carousel. Instead, use static carousels that do not include more than three slides to allow users an opportunity to digest both the image and information in each slide. Users should be able to use arrows to easily move from one slide to another. 

Although there is a big debate in the design world over whether carousels are effective, we see much less exposure and engagement on the second and third slides. Automating carousels can rob users of control over the experience and as a result, they are more likely to ignore it if the slide moves too quickly for them to read.

Don’t hide primary CTAs or category links below the fold

Instead, make sure they are clearly above the fold line; try placing them on an uncluttered area of the image. You want to encourage users to immediately begin browsing, whether it leads them to a category page or list page for product catalogs that are currently being prioritized. 

Try placing a horizontal category slider at the top of the page and evaluate whether that improves your users’ browsing process. 

Showcase editorial content that is space-conscious and easy to interact with

Make sure that any editorial images on the homepage lead the users to specific categories, seasonal collections, or product pages. Giving them a purpose beyond aesthetics encourages users to explore beyond just the homepage and can help increase session time.

Here is a great example from Ralph Lauren:

The above image on the left showcases the bag as both aesthetic and functional, enticing users with beautiful photography, while leading them to the product page. The text is succinct, easy-to-read, and placed on an uncluttered area of the image. 

The carousel placed on the right provides even more options for the user to view additional products for the upcoming season. Both the image and carousel do not extend past the screen, making it easy to view. Part of the content of the next section is viewable, avoiding the false bottom and encouraging users to scroll further.

Making design iterations to your site never ends. As user behaviors continue to evolve faster than ever, it’s important to continuously evaluate and reassess the performance of individual elements on your pages. It’s important to make design changes based on the needs of your user base, not the general users of the industry. 

Don’t forget to regularly check on other players in your industry for inspiration, as there is much to learn from the digital experiences and websites you enjoy. But remember, just because a competitor does it, doesn’t mean they are improving the experience of their users. So be inspired, yes, but consult your own customer data before implementing changes.

Hero Image Via: Rawpixel.com, Adobe Stock