Executive Search
Associates
A collaborative website redesign for a career coaching and executive search firm — updating the visual identity with an earthy, inviting palette while working closely with a client who had her own strong design sensibility.
01 — Overview
Problem & Solution
The Problem
The client's existing website focused narrowly on executive search services, but her practice had expanded to include life coaching and career guidance. The visual identity felt dated and corporate — not reflecting the warm, empowering approach she took with her clients. Since she had a design background, any proposed changes needed to be collaboratively validated through multiple rounds of feedback rather than presented as final decisions.
The Solution
A fully redesigned website built around an earthy, inviting colour palette that made all three service areas equally prominent. A carefully curated typography system was developed through multiple tested pairings to strike the right balance between professional credibility and approachable warmth. Every design iteration was reviewed with the client in detail, blending her creative instincts with UX best practices.
02 — Deep Dive
Explore the Process
Section 01
Research & Discovery
Client discovery sessions, site audit of the original website, stakeholder goal mapping, and analysis of competing career coaching platforms.
View Research →
Section 02
Design Process
Typography exploration across multiple font pairings, earthy colour palette development, wireframe iterations, and collaborative client feedback sessions.
View Process →
Section 03
Before & After Screens
Side-by-side comparison of the original and redesigned website, plus the style guide, colour palette, and final design across all major pages.
View Screens →
03 — Results
Outcomes
3
Service Areas Clearly Presented
4+
Collaborative Design Iterations
✓
Client Vision Fully Aligned
WCAG
Accessibility Standard Met
04 — Tools & Methods
What Was Used
Industry-standard tools and a structured collaborative process — from client discovery and site audit through to an iteratively co-created, WCAG-compliant final design.
Design & Prototyping
🎨
Figma
Primary tool for all wireframe iterations, typography exploration across multiple pairings, earthy colour system, component library, and hi-fi page designs shared for client review.
✦
Adobe XD
Used to create clickable prototypes for collaborative review sessions — allowing the client to experience page flow and CTA placement before any development work began.
Research & Discovery
🎤
Client Discovery Sessions
Structured stakeholder interviews to surface the three service areas, define the target audience, and align on brand perception before any visual decisions were made.
🔍
Site Audit & Benchmarking
Original site audited for hierarchy, readability, and accessibility failures. Competitor coaching and executive search sites reviewed to identify the warm-professional gap in the market.
Client Collaboration
🤝
Iterative Co-Creation
Each session presented 2–3 design variations rather than finished decisions — a structured feedback model that gave a design-literate client genuine creative ownership across 4+ review rounds.
📋
Notion
Project brief, design rationale documentation, session notes, and iteration history maintained in a shared workspace — ensuring every decision was traceable back to a client-approved direction.
Accessibility & Typography
♿
WCAG 2.1 AA Compliance
All earthy palette text/background combinations verified at minimum 4.5:1 contrast ratio — accessibility built in from the colour selection stage, not added as a post-design check.
🔤
Typography Testing
Three full typeface pairings applied to complete page mockups — not type specimens — before final selection. Tracking and line-height defined at specification level for developer handoff.
Standards & references:
WCAG 2.1 AA
Responsive Grid Systems
Stakeholder Management
Brand Identity Systems
Developer Handoff
Section 01 — Research & Discovery
Understanding the Client & Audience
Client Discovery Sessions
The starting point for this project was a series of in-depth conversations with the client — not just about what she wanted the site to look like, but about who her clients were, what transformation she helped them achieve, and how she wanted to be perceived in the market. Three distinct service areas emerged: executive search placement, career coaching for mid-level professionals, and life coaching for individuals navigating major transitions. All three needed equal representation on the site.
Original Site Audit
Before — original website showing the previous visual identity
The original site was audited for content structure, visual hierarchy, readability, and accessibility. Key findings: the primary navigation prioritised executive search above all else, making the life coaching and career guidance services nearly invisible to first-time visitors. The colour palette was neutral to the point of feeling generic, and the typography lacked personality — it felt like a template rather than a personal brand.
Competitive Benchmarking
Several comparable career coaching and executive search websites were reviewed. The pattern across competitors was a split between two extremes: overly formal corporate sites that felt cold and transactional, and overly casual personal brand sites that lacked professional credibility. The gap — and the opportunity — was a site that was simultaneously warm, human, professional, and distinctive. That became the design brief.
Section 02 — Design Process
Typography, Colour & Collaboration
Design Process Overview
Step 01
Client Brief
Discovery + goal mapping
Step 02
Typography
Multiple pairing tests
Step 03
Colour System
Earthy palette developed
Step 04
Iterate + Review
4+ collaborative sessions
Typography Exploration
What Was Tested
Pairing A — classic serif headline + humanist sans body. Professional but slightly cold for a coaching brand.
Pairing B — rounded slab serif + open sans. Warm but lacked authority for executive-level credibility.
Pairing C (Selected) — refined transitional serif headline + friendly variable sans body. Struck the right balance of credibility and approachability.
Letter spacing — headline tracking set to -0.02em for a contemporary, tight feel; body at 0 for maximum readability at 16px.
Line height — body copy at 1.8x for comfortable reading across long coaching service descriptions.
Typography consumed a disproportionate amount of this project's time — and rightly so. Because the client had a design background, she had strong instincts about how type should feel. Several rounds of iteration were needed before arriving at a pairing that fully represented her brand. The process reinforced a clear lesson: when working with a design-literate client, showing the reasoning behind each typographic choice is as important as the choice itself.
Colour Palette — Earthy Identity
Palette Rationale
Warm terracotta — primary brand colour for headers, CTAs, and key accents; evokes groundedness and warmth
Sage green — secondary colour for section dividers and icons; reinforces natural, calm associations
Warm cream / off-white — primary background; softer than pure white, reduces eye strain for long-form coaching content
Deep brown — body text; warmer than standard black, consistent with the earthy identity throughout
WCAG AA compliance — all text/background combinations tested at minimum 4.5:1 contrast ratio
Critical Design Decisions
Decision 01 — Equal Service Hierarchy
The original site implicitly ranked executive search above life coaching and career guidance through visual weight. The redesign gave all three services identical card sizes, identical font treatment, and equal position in the navigation — because the client's revenue was increasingly coming from coaching, not executive placement. Visually equalising the services matched the business reality.
Decision 02 — Imagery Direction Shift
The original site used generic office stock photography — corporate, impersonal, identical to dozens of other executive search firms. The redesign called for warmer, more human imagery: people in conversation, natural light, outdoor settings. This aligned with the coaching services and differentiated the site immediately from competitors.
Decision 03 — Iterative Co-Creation Model
Rather than presenting finished designs for approval, each session offered 2–3 variations of key elements — giving the client genuine creative choices. This approach slowed the timeline but produced a final product the client genuinely co-owned, requiring zero post-launch revisions because every element had been discussed and endorsed.
Section 03 — Key Screens
Before, After & Full Redesign
Before — Original Website
Issues Identified in the Original
Colour — neutral grey-and-white palette felt cold and indistinguishable from generic corporate sites
Hierarchy — executive search dominated the visual and navigational hierarchy; coaching services were buried
Typography — single typeface with no display/body distinction — lacked brand personality throughout
Content — dense text blocks without visual breathing room; no clear primary CTA on the homepage above the fold
After — Redesigned Website
What Changed
Earthy palette — terracotta, sage, and warm cream replace the corporate greys entirely
Service equality — all three service areas in identical card components with equal visual weight
New typography system — display serif headlines create personality; variable sans body text improves readability
Clearer CTA — prominent "Book a Consultation" button visible in hero without scrolling; repeated after services section
Full Site — Final Overview
Page Structure
Hero — personal headline against earthy background with consultation CTA above the fold
Services — three equal cards for Executive Search, Career Coaching, and Life Coaching
About — human, conversational copy about the client's background and coaching philosophy
Testimonials — client quotes with role/company for credibility across all three service types
Contact / Booking — simple form with service dropdown to route enquiries to the right stream
Iteration History
Iteration 01
Visual Direction Set
Three directions presented: minimal modern, warm editorial, and classic professional. The client immediately gravitated toward warm editorial — this became the design language for all subsequent work without further discussion.
Iteration 02
Typography in Context
Two shortlisted typeface pairings were applied to full-page mockups. Seeing type in context — not a type specimen — revealed how each pairing affected the perceived personality of the entire page when combined with imagery and colour.
Iteration 03
Colour Refinement
The initial terracotta was too saturated — it competed with photography. Desaturated by 20% to let imagery breathe. Sage green was added as a secondary after the client noted the palette felt monochromatic in the hero section.
Iteration 04+
Mobile Responsiveness
Final session focused on mobile breakpoints — spacing, font scale, and component stacking. Most changes were micro-adjustments. The live site launched at searchassociates.net with no additional design changes requested post-launch.