animeshrai.com

Context

Animesh Rai is many things at once: co-founder of Ripples Learning, director at CHRMP, an HR consultant with 18 years of experience, the author of a book on HR analytics, a speaker and a keen traveller. His website had to hold all of that without reading like a CV, and give event organisers and companies one clear reason, and one clear way, to get in touch.

How might we present one person with many roles as a single, credible story that ends in a conversation?

What I did

• Defined the information architecture: Home, Video, Travel, Book, Blog and Contact
• Designed the home page as a story, from promise to proof to action
• Set up a small visual system (one serif, one sans, one blue) and reused it across every page
• Designed responsive layouts for long, content-heavy pages

A promise, not a biography

1234

1. 1

   A signature as the logo

   A personal brand signs its name. The handwritten mark appears again in the book section and the footer.

2. 2

   One word carries the hero

   “Work” is set at 128px in blue serif, so the promise reads in a single glance.

3. 3

   A quieter second voice

   The subtitle is spaced out in light grey, so it supports the headline instead of competing with it.

4. 4

   A real face, cut out

   The portrait breaks out of the grey band, with blue line accents that echo the headline colour.

Credentials, then roles

Straight after the hero, one paragraph gives the credentials in numbers. Then three numbered columns split the person into the roles visitors actually come for.

123

1. 1

   The numbers are highlighted

   “More than 20,000 HR professionals from 56 countries” is picked out in blue, so skimmers still get the proof.

2. 2

   Three roles, one icon style

   Entrepreneur, Consult and Traveller each get a blue icon, a serif title and two lines of copy.

3. 3

   Ghost numbers

   Large, faint 01, 02 and 03 give the row rhythm and a sense of order without adding noise.

The home page as a story

The home page is long, so every section has one job and they come in a deliberate order: who he is, proof that others trust him, what he offers, and then a way to reach him. Hover or tap a number to see each section’s job.

1234567891011

1. 1

   Promise

   “Prescribing Solutions that Work”, with a portrait.

2. 2

   Who he is

   Credentials in one paragraph, then three numbered roles.

3. 3

   Press

   Featured on NDTV: borrowed credibility, early.

4. 4

   Community

   A dark band with his social channels, to follow him beyond the site.

5. 5

   Masterclass

   A video invitation, so visitors can hear him before booking him.

6. 6

   The book

   HR Analytics, signed with the same handwritten mark, with one Get your copy button.

7. 7

   Blog

   Three recent articles as cards, proof of expertise in his own words.

8. 8

   Gallery

   Events and conferences around the world, in an even photo grid.

9. 9

   Clients

   Fifty well-known logos: “Have helped top organisations with meaningful solutions.”

10. 10

    Act

    “Want to call me as a speaker or consultant?” and one Fill the form button.

11. 11

    Stay in touch

    A newsletter card that overlaps the footer, for visitors who aren’t ready to call, then short links and the signature once more.

One system, different moods

Every inner page reuses the same parts: the hero formula, the serif headings, the blue accent, the newsletter card and the footer. The mood changes with the subject.

The Travel page (second tab at the top of this page) goes darker still, with a night-sky hero and a masonry gallery, while the type, newsletter card and footer stay the same.

The style guide behind it

Result

A live personal-brand website that brings a consultant, author, speaker and traveller together in one consistent story, and ends every visit with an invitation to talk. Visit it at animeshrai.com.