contact me
HUMAN ELEMENT

Full Website Redesign for a Digital Agency

Lead UX/UI Designer & Elementor Development

Scope: Full website redesign

Platform: WordPress + Elementor

+100%

New Leads, year-over-year

29%

Total Users, year-over-year

PROJECT

The agency's own website was working against it.

The goal wasn’t just a better-looking site. It was a system the team could maintain and grow independently, without a designer or developer in the room.

 

MY ROLE INCLUDED:

Lead UX/UI Designer & Elementor Development

  • Platform Research & Builder Evaluation
  • Heatmap, Session Recording & GA Analysis
  • Mood Boards & Visual Direction
  • Homepage Design & UI Kit in Figma
  • Elementor Development, 40+ pages
  • Global Styles System Setup
  • ADA Compliance, full site remediation

TEAM:

Leadership, Marketing, Content
Work created as part of my role at Human Element.

KEY ISSUES

Three reasons the site needed a full rebuild.

An editor that couldn't be trusted

Impact: Every small edit required developer time. The CMS was a liability, not a tool.

A site that no longer reflected the business

Impact: Prospective clients weren’t seeing the full picture. The site was underselling the agency.

Significant ADA compliance failures

Impact: A serious credibility problem for an agency actively selling Strategy & Design services.

CONSTRAINTS

Design within real-world constraints

Scope vs. quality

With 40+ pages to deliver, designing everything in Figma wasn’t realistic. Figma time was invested where it mattered most: homepage, UI kit, and complex layouts. The rest was built directly in Elementor using the established system.

Building for a team, not a project

The team needed to maintain the site independently after launch. Every template and global styles decision was made with that in mind. New pages can now be created without a designer or developer involved.

ADA as a business requirement

For an agency selling Strategy & Design services, accessibility failures were a credibility problem. Remediation was built into the design system from the start, not patched at the end.

Platform limitations

Elementor has real constraints. Knowing them upfront meant designing within them rather than discovering friction mid-development, which kept the project moving without rework.

RESEARCH

Starting with questions, not solutions

Platform research

Several WordPress builders were evaluated before any design work began. Elementor Pro was selected for its visual editor, global styles support, and the ability for a non-technical team to maintain it independently.

Behavior Data
Heatmaps, session recordings, and GA pointed to the same issues: high bounce rate on the homepage, low scroll depth, and significant mobile traffic on a site not optimized for it. These findings shaped the content hierarchy and page prioritization.
Competitive Analysis
A review of competitor agency sites showed where Human Element’s positioning had fallen behind visually and in terms of content. Key gaps: outdated service framing, missing platform partnerships, and a lack of social proof on entry pages.
Stakeholder Interviews
Conversations with leadership shaped the content strategy and service positioning. These sessions clarified which audiences the site needed to speak to, which services to lead with, and how the agency wanted to be perceived by prospective clients.

DESIGN

From concept to build

Mood boards & visual direction

Mood boards were used to align the team before any screens were designed.

The goal was to modernize the existing palette and elevate the overall feel, without losing brand recognition.

Homepage & UI kit in Figma

The homepage and UI kit were designed in Figma to establish the full visual system before development began.
 
Typography scale, color roles, spacing, and core components all defined here. Key pages with complex layouts followed in Figma as well.

Remaining pages built directly in Elementor

The majority of pages were built directly in Elementor.
 
With the global styles and component library set up upfront, visual consistency held throughout without needing a Figma file for every page.

BEFORE & AFTER

The visual gap tells the story.

Before After

HOMEPAGE

Before:

  • Significant ADA issues throughout: poor contrast, inaccessible typography, no keyboard navigation
  • Background gradients applied as uncompressed images, increasing page load time
  • Services, platforms and case studies absent from the homepage entirely

After:

  • Video hero introduced to immediately communicate agency scope and energy
  • Full services structure visible on homepage with sub-service drill-down
  • Case studies surfaced as primary content, not buried
  • Visual identity elevated to match the agency’s positioning
Before After

ABOUT PAGE

Before:

  • Single text block on a pastel background

  • No team presence, no brand personality, no visual structure.

  • No sense of who the agency actually is.


After:

  • Full narrative with team photography, company story in sections, mission statement, core values grid.
  • A page that actually introduces the people behind the agency.

RESULTS

A site that finally matches the agency behind it.

What was delivered

  • Full site redesigned and rebuilt, 40+ pages delivered
  • Migrated from an unreliable Avada build to a stable, scalable Elementor Pro system
  • All services, platforms and case studies now accurately represented on the site
  • ADA compliance issues resolved across the board: contrast, typography, keyboard navigation
  • Global design system established, with color, type, and spacing managed from a single source
  • Internal team can now create and edit pages independently, without design or developer support
  • Blog readability improved with a new typographic scale, cleaner layout, and related posts
  • Visual identity elevated to reflect Human Element’s positioning as a premium eCommerce agency
  • New platforms and AI services section added, accurately representing the full service offering

NDA & CONFIDENTIALITY NOTICE

This case study is a re-interpretation of my work completed at Human Element.

All sensitive information, client names, pricing, internal processes, and proprietary assets have been removed, altered, or anonymised to comply with NDA restrictions. The visuals, flows, and UI shown here are recreated for demonstration purposes only and do not represent confidential or unpublished client materials.