Case study — leadership coaching website

From a Client's Vision to a Digital Experience

How I transformed a challenging client pitch into a complete leadership coaching website.

My role
Sole Designer & Developer
Scope
UI/UX Design, Website Development, Client Collaboration
Client
Kanika Vijai — Leadership Coach
Live site
kanikavijai.com
Kanika Vijai leadership coaching website homepage

The challenge

The challenge wasn't just building a website. It was creating the right impression.

The client showed our team her existing website and explained the kind of impression she wanted her personal brand to create. The site did not yet communicate the brand experience she was describing — and we were running out of opportunities to secure the client.

The turning point

I stopped explaining the idea and started showing the vision.

During the meeting I took a different approach. Instead of simply discussing ideas, I developed a new design direction that demonstrated how her website could better communicate her personality, expertise and leadership philosophy.

That design direction helped us secure the contract. I then independently designed and developed the entire website — working closely with the client through continuous feedback, reviewing design decisions, and refining the visual hierarchy until the final website reflected the impression she wanted to create.

Design breakdown

Six decisions that carry the page

Every numbered marker sits on the part of the live website it describes.

Kanika Vijai website hero section
01

Hero Section

A bold headline with the key words picked out in gold, a portrait held in a diagonal mask, and one clear booking action. The eye lands on the promise first, the person second, the button third.

  • Visual hierarchy
  • Contrast
  • Whitespace
Dark green credentials strip with four stat cards
02

Trust & Credibility

A deep forest green strip carries four credentials side by side — ICF accreditation, Gallup certification, coaching hours and global client experience. Proof sits directly under the promise, before any service is explained.

  • Contrast
  • Content grouping
  • Social proof
Three numbered service cards
03

Services & Offerings

Three image-led cards, numbered 01 to 03, each with a badge label, a short description and a details list. Same structure on every card makes three different engagements easy to compare.

  • Content grouping
  • Typography
  • Whitespace
About section with portrait and biography
Coaching philosophy section with the knowing-doing gap diagram
04

About & Philosophy

Portrait and biography balance each other in two columns, so the story reads as calmly as it is told. The philosophy section below turns an abstract belief into one diagram — the knowing–doing gap — instead of another paragraph.

  • Balance
  • Typography
  • Content grouping
Grid of fifteen client logos
05

Client Logos

Fifteen organisation logos in two even rows on white. Nothing decorative — the grid is quiet so the names do the talking.

  • Social proof
  • Alignment
  • Whitespace
Six large client testimonial cards
06

Testimonials

Six large cards — two email notes and four LinkedIn recommendations — each showing the person, their role and their organisation. Long feedback stays readable instead of being clipped into a slider.

  • Social proof
  • Hierarchy
  • Readability

Design system

A visual language built on three colours

#22392D

Forest green

Depth and authority — used for the credentials strip and the turning-point panel.

#F8F6F1

Cream

Openness and readability — the page background every section sits on.

#CDB57A

Muted gold

Emphasis and important actions — highlighted words, labels and the booking button.

#EDEDED

Neutral grey

Quiet alternation — separates philosophy and client-story sections from the cream.

Typography

One elegant serif for headlines, one quiet sans for body copy, one mono for labels. Sizes step consistently, so a heading is never competing with the paragraph under it.

Spacing

Generous whitespace between sections lets each idea finish before the next one starts. Nothing is crowded, nothing needs a border to be understood.

Composition

An asymmetric hero — text left, portrait right — balanced by structured grids below, so the page feels expressive at the top and organised everywhere else.

My process

Five steps, one owner

Design and development stayed with me throughout, while the client stayed close to every decision.

  1. 01

    Understand

    Reviewed the existing website and the impression the client wanted her brand to make.

  2. 02

    Design

    Built a new design direction that showed the vision instead of describing it.

  3. 03

    Develop

    Designed and developed the complete website independently.

  4. 04

    Review feedback

    Walked through design decisions with the client as the pages took shape.

  5. 05

    Refine

    Adjusted visual hierarchy and spacing until the site matched the intended impression.

Final outcome

A cohesive digital experience, built around the client's vision.

Final kanikavijai.com homepage

Final homepage

Full page preview

Full page preview of the kanikavijai.com homepage

Scroll to review every section

  • A consistent visual identity across every section.
  • Coaching services clearly structured and easy to compare.
  • Professional credibility presented with proof, not claims.
  • An accessible path toward booking a discovery conversation.