CREATIVE DIRECTION + IA + UX

ZipRecruiter Website: Refresh

Challenge

After a full site audit, the next step was to implement new processes and developed a new UI system that married the best characteristics of our 3 distinct aesthetics:

  • Job Seeker - clean + showcased product UI
  • SMB - approachable
  • Enterprise - elevated feel + human photography.

Overarching Objectives

  • Build and maintain a world-class website that positions ZipRecruiter as an industry-leader embodying innovation, quality, and expertise.
  • Reduce the time it takes to publish website creative
  • Create a design system

Refresh Process

  1. Research competitors, peers, and gather inspiration
  2. Vet specific solutions from research with stakeholders
  3. Build and vet new set of UI components
  4. Start refreshing 2-3 pages at a time based on priority

The Results

  • Site visually elevated and unified before IPO
  • Built a well-adapted and documented processes and systems
  • Reduced the time it takes to launch new pages from 2-6 months to 2-5 weeks
  • Highlight: Launched a custom-branded landing page for our CEO’s book in 5 days from kickoff

Before / After

Homepage

Accessibility?

As we started the refresh we knew ZipRecruiter’s brand color (used for buttons and CTA text) was not WCAG compliant. Read more here (coming soon) about how we leveraged compliance to implement a brand update before ZipRecruiter went public.

About Page
We reduced the average time to launch a new page from 2-6 months to 2-5 weeks.
How it Works

Adding Motion

Motion in product and web design is the equivalent of body language when having a conversation. Everybody moves when they talk... especially when they are explaining something complex.

We developed this animation style to show the power of various product features and how easy they are to use. The smooth, snappy movement and a little bounciness conveys ZipRecruiter's industry expertise and approachable brand personality.

This change didn't happen overnight. It took a lot of listening on my part; learning from our front end devs and asking collaborators for ideas and things that have worked for them in the past. And we didn't nail it the first time. Our process is a living thing that adjusts as the business and teams grow.

Credits

Design: Erik Arildsson, Christina Van Lepp
Animation: Erik Arildsson
Copywriting: Kelly Donohue, Michelle Spencer, Kate Seldman
Engineering: Vu Vo, Weston Radcliffe, Jeff Wei, Gaby Dilley
Creative Ops: Jenn Yang, Devon Deter