Behind the Redesigned Enable Us Website

On April 1st, my company 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

While our website was “serviceable”, we wanted to tackle some foundational issues:

• Re-evaluate 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.

Website Goals and Planning

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

This required taking a step back and spending nearly 50% of our project timeline on planning. DO NOT skimp on this step. Our key points included:

1. Define the website infrastructure from a SEO perspective - Beyond keywords, we audited our website structure from the top navigation to the footer, identifying improvements to ensure that search engines could crawl and understand our site more easily. This required thinking through the HTML header tags, the page hierarchy, and how content should be grouped. 
2. Remember to Keep It Simple Stupid (KISS) - It’s tempting to visually redesign your website and add bells and whistles. We opted for a KISS approach, ensuring we captured the essence of our product and used images that supported our value proposition.
3. Stay with Webflow - When I spoke with peers about this project, this was one of the first questions I received, “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- With Webflow, we can create sections or components to more quickly build out our pages. We took time to think through the different sections of our website and pages. Based on this, we created section templates for hero, feature, key benefit, customer quote, and more that could be easily copied and pasted on 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 and what we wanted. 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 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. 

Redesigning the Website

Once we identified our challenges and finalized our planning, we purposely took a MVP (minimally viable product) approach to ensure we could launch within our specified timeline. 

This included:

1. Top Navigation and Footer - once we determined our site hierarchy, we ensured that the top navigation and footer mimicked the structure for consistency.
2. 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

3. 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.
4. 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. 
5. 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.

6. 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 scheduled 3 months for this project. We consciously kept our original scope in mind and diligently kept scope creep to a minimum. 

The setbacks we did have were mainly due to rushing 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 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, Tony Graham for his knowledge on site infrastructure and SEO, and Andrey Bolaños for providing guidance on the tech stack. 

What do you think?

‍