Rebuilding An Inclusion Consultancy’s Website on Webflow

The Problem

The previous website was built on WordPress and it suffered from slow loading speeds, fragmented layouts, and weak information hierarchy. Accessibility considerations were minimal, brand clarity was diluted, and interactions were nearly nonexistent. More importantly, the site lacked a clear conversion strategy. There was no strong mechanism to capture interest, educate visitors, or turn credibility into momentum.

The Solution

We re-envisioned the website as Circle’s primary trust-building and conversion engine, designed to:

• Communicate authority and warmth through the brand

• Embed inclusion principles directly into the user experience

• Perform at a high technical level (speed, accessibility, scalability)

• Support long-term growth through SEO, analytics, and lead capture

This meant executing a full brand refresh, designing a systemized, scalable design system, and rebuilding the site on Webflow for performance and flexibility.

The Process

1. Strategy Call & Stakeholder Alignment

The project began with a focused strategy call to align on Circle’s business goals, audience expectations, and long-term vision. This phase defined success criteria across brand perception, accessibility, performance, and lead generation.

2. Research

We conducted a competitor analysis and full site audit to understand where Circle stood within the workplace inclusion and organizational consulting landscape. The existing WordPress site was evaluated for:

• Performance and loading speed

• Accessibility compliance gaps

• Information architecture and navigation

• Brand clarity and messaging consistency

3. Brand Refresh & Design System

We refreshed the logo, color palette, and typography, shifting the visual language toward calm authority and credibility without losing warmth. These decisions were codified into a scalable design system, defining hierarchy, spacing, interaction patterns, and accessibility standards to ensure long-term consistency and growth.

4. Design Iterations

The website was designed in Figma across three structured iterations through close collaboration with the stakeholder, each refining narrative flow, usability, content, and intent. The common theme across all iterations was ensuring the website to be as accessible as possible.

5. Webflow Build

To move beyond passive credibility, we designed a lead magnet as a core conversion point. Then, the site was rebuilt entirely in Webflow, enabling faster load times, cleaner structure, and greater flexibility. Select custom HTML/CSS animations were added to enhance depth without compromising performance. Workflows were implemented for lead magnet downloads and Substack integration.

Accessibility was treated as a non-negotiable constraint. The site was designed and built with WCAG principles in mind, covering color contrast, typography, semantic structure, and alt text, ensuring the experience reaches a broader audience.

Finally, Google Search Console and GA4 were connected to support visibility, tracking, and ongoing optimization.

The Impact

• Stronger first impression: the brand now feels premium, intentional, and credible within seconds.

• Improved accessibility: inclusive design choices expand reach and align the experience with Circle’s values.

• Faster performance: the site loads significantly faster, reducing friction and bounce risk.

• Systemized scalability: a clear design system enables consistency and future growth without design debt.

• Optimized conversion pathways: intentional conversion points now guide users from interest to engagement.

Reflection

This project taught me that inclusion cannot be an afterthought in UX. Designing for accessibility, performance, and clarity didn’t dilute the brand, but strengthened it as the site now practices what Circle advocates.

From a strategic perspective, this work sits at the intersection of UX, brand, and business outcomes. It demonstrates how thoughtful design can translate abstract values into tangible impact.