Behind the Enable Us Website Redesign and 6 Tips

On April 1st, my company (@EnableUs) launched our redesigned website. And no, it was not an April Fool’s joke :) Revamping a site can be time consuming and quickly get out of hand with scope creep. In this post, I wanted to share the steps we went through and lessons learned.

Existing Website Challenges

When I joined the company, we had slowly been working on the website to highlight our seller and buyer enablement platform. We took this opportunity to tackle some key foundational issues:

• Understand the web platform - Built on Webflow before my designer and I joined the company, we didn’t have a clear blueprint of how the website was structured. As such, updates could potentially “break” existing content on the site and take significant time to create new pages.
• Slow page download times - Spaghetti code and tech add-ons impacted the download speed of pages. In some cases, as long as over 30 seconds!
• Lack of page formatting - Undefined HTML header and page formatting created an inconsistent look and feel across our pages, as well as made our blog pages difficult to read.

6 Tips for Planning a Website Redesign

Based on the above, we identified three key goals for our website:

• Optimize the website infrastructure and content for SEO
• Easily update the website by anyone in the company (aka Dummy proofing it for me!)
• Ensure that visitors could easily navigate our website and content

In order to accomplish these goals, we spent about 50% of our product timeline on planning - a must for this type of project. Based on this, here are 6 takeaways:

1. Define the website infrastructure from a SEO perspective - Beyond keywords, we identified improvements to ensure that search engines could crawl and understand our site more easily. We audited the website infrastructure from the top navigation to the footer. This required thinking through the HTML header tags, the page hierarchy, and how content should be grouped.?
2. Keep It Simple Stupid (KISS) - It’s tempting to add bells and whistles to your website. We opted for a KISS approach, ensuring we captured the essence of our product and used images that supported our value proposition.
3. Stay or Get New Website Platform - One of the first questions I heard when speaking about a website redesign was, “Do you plan to change platforms?” While it was tempting to switch to a platform that I had previous experience with, I recognized that Webflow had advantages if set up well from the beginning.?
4. Create a design system- We took time to think through the different sections of our website and pages. Based on this, we created a design system that outlined the different section templates for hero, feature, key benefit, customer quote, and more that could be easily copied and pasted to create a page.?
5. Audit our techstack - Since one of our challenges was related to page download speed, we audited all the technology currently installed on the site. We discovered some unused code on the site and confirmed the must-have tech.?
6. Map out the CMS - Pages can be automatically seeded with content from Webflow's content management databases. It’s critical to map out the different “databases” and how they interact with one another. This informs the connections and what content eventually is pushed to the page.

A MVP Approach to the Website Redesign

After this prep work, we purposely took a MVP (minimally viable product) approach to ensure we could launch within our specified timeline.?

This included:

• Top Navigation and Footer - once we determined our site hierarchy, we ensured that the top navigation and footer mimicked the structure for consistency.Website Accessibility - Since our previous colors didn’t have enough contrast for readability, we opted for a darker blue palette with orange and yellow accents.
• Font Type - We previously used Fira Sans font, which constricted the copy visually on the page. After evaluating different fonts, we selected Inter font for a simple, clean and sleek look.
• Images vs animated gifs - While we would like to eventually add more animation to convey how our product works, we made a conscious decision to create images that accurately visualized our product capabilities and company benefits. We plan to gradually add animations and videos in Phase 2.?
• Resource, Blog, and Customer Stories Pages - Besides our home and product pages, we spent time determining the functionality of these pages. Previously, content was rendered vertically, requiring visitors to scroll down the page. The new format clearly highlights featured posts or resources at top with different resource categories laid out horizontally. Our next step is to add the ability to filter content by category or resource type

• Page Schema - We revamped the page schema to ensure consistency of how header, bullet points, quotes, and other formatting is rendered across our pages. This is most evident with how this impacts our blog articles. Added bonus is page schema helps with securing review snippets or rich results on Google search. Since launching the site, we’ve had a 100% increase in the number of pages now indexed for rich results.?

Lessons Learned and Kudos to the Team!

From beginning to end, we consciously kept our original scope in mind and diligently kept scope creep to a minimum.?

We had some setbacks when we tried to rush through the planning process, such as building out the customer stories page before mapping out all the CMS interlocks. Thankfully, these roadblocks were minor and didn’t delay our 3-month project timeline.

Since the website was high profile, we kept stakeholders updated on our progress and showed mock ups and staged pages to ensure alignment.?

This wouldn’t be possible without the Enable Us team, especially Yevhen Kravchenko for managing the website platform and design, Andrey Bola?os Sandoval Bola?os for providing guidance on the tech stack, and Tony Graham for his expertise on website SEO best practices.?

What do you think?