Careers page UX/UI for Clearly

Selling the workplace and attracting more job applicants

Overview

Client: Clearly (formerly Clearly Contacts), an international online retailer of eyewear headquartered in Vancouver, BC

 

Role: UX/UI designer, via Recruiting Social

 

Team: On behalf of Recruiting Social, partner Barb Agostini managed the client and led the briefing process. Via TACN, our partner studio, designer Talia Cohen polished the visual design and developer Lance Cummings built the site.

 

Project duration: 3 weeks

 

Skills: Employer branding, copywriting, and user interface design

 

See the careers page (via Wayback Machine)

Clearly careers page responsive mockups

Clearly’s redesigned careers page.

Problem

Clearly was preparing to launch its new consumer brand and website – in just 3 weeks. Their careers page, however, was forgotten in the process. It didn’t match the new identity, was dated in functionality and appearance, neglected to make any case why people should want to work at the company and was failing to convert users into job applicants.

Desired outcomes:

 

  • Increase job applicants

  • Show potential candidates why they should apply

  • Stand out among local technology employers

  • Seamlessly integrate the careers page into the company rebrand

 

Requirements:

 

  • Responsive landing page

  • Integrate the company’s Jazz ATS job board

  • Use the limited selection of low-res employee and workplace photos

  • Launch within 3 weeks

The previous Clealy careers page design

Clearly’s previous careers page design (doesn’t it make you want to apply?).

Design

Navigation:

 

The header nav reflected the simple user flow: learn about the workplace (Working Here), then see the openings (Current Jobs). Because the page would exist at its own domain, a contrasting link back to the corporate website (Clearly.ca) was also provided. Because the landing page was long, the footer nav offered a handy “Back to Top” link.

 

Hero section:

 

Most careers pages open with, “We’re hiring.” Instead, I made sure to open with a bold, user-centered headline. I generated a long list of options. Working with the client, we narrowed the list down to messages that most closely tied-in with Clearly’s employer value proposition.

Clearly careers page hero section opens by saying, "You, helping people see."

The hero was designed to draw in potential applicants and help them imagine themselves at the company.

Content:

 

Every message was designed to point out the user-benefit first, then describe the related workplace feature or perk. Employee photos, especially close-ups, were key: they help the user “meet” potential teammates and “see” themselves at the company.

 

Calls to action:

 

“Apply” is a pretty big ask. I stepped back the primary CTA to a less-committed first step: “Check our out our jobs.” I also made sure to provide users with an alternative option, at the bottom of the page: “Follow our team and #seelifeshine.” Both of these are meant to lower the barrier to and increase the likelihood of potential-candidate conversion.

Secondary call to action

A secondary call to action ("Follow our team and #seelifeshine") gives non-applicants (potential future applicants?) an opportunity to connect.

Takeaways

What I learned:

 

HR teams aren’t usually involved in web design projects. That meant every step and the reasoning behind every design decision needed to be clearly explained. Doing this helped me clarify my thinking, too!

 

Biggest challenges:

 

For such a modest-sized project, there were a lot of stakeholders involved. Particularly with the copy, it was difficult to push back on the client’s desire to include (a lot) more text.

 

What I’d do differently next time:

 

With more time, it would have been great to interview a couple new hires or recent applicants, to hear in their own words, what they thought of the employer.​