Meta Careers Homepage Re-Design
I led a cross-functional project to improve the user experience, visual design and flexibility of the Careers website homepage – metacareers.com.
Skills used: user experience design, interaction design, visual design, partnership with engineering, project management
The Opportunity
The existing homepage was time-consuming to update, had little to no flexibility to its layout, and lacked engaging, interactive content to encourage users to explore the website. We identified the following goals for the project:
Improve candidate's ability to search & filter open jobs, make the search functionality more visible & accessible
Create a design framework that allows the team to make timely updates to the entire page, but specifically, the main section "above the fold" for high-priority narratives & campaign content
Create more interactive components to encourage candidates to explore media and content on the page
Increase visibility into company products & services
Increase visibility into company news – policy, product, technology & innovation news content
Provide candidates with multiple entry points to open jobs, with the ability to curate links to high-priority job functions
Ensure remote work jobs are visible & easily accessible to candidates
Ensure the company’s commitment to diversity is clearly communicated
Where We Started
Desktop Design
See the new interactive components & small animations launched on the home page.
Highlights
Header Section
Header
A flexible layout that allows the team to easily customize content – from simple copy edits to custom typography & background colors – we launched a header section that could host a variety of media assets with no coding required.
Header: Horizontal Scroll
On scroll, the header section scrolls horizontally to reveal supporting content and a call-to-action, while the job search bar remains in view.
Job Search Bar
The new job search functionality within the header section of the home page is now visually prioritized for users, ensuring they always have visibility of the search bar above the fold. The search bar also features helpful typeahead and multi-select functionality for location filtering – getting users to the open roles that match their search query and location preferences quickly.
Employee Features
Members of the diverse and global employee community are featured in this section, highlighting employees whose personal experiences of working at Meta provide proof points for the employer brand. This section of the homepage uses animation as each feature loads on the page and encourages users to interact with each panel, as well as discover the full employee stories by following the Read More links.
Products & Technologies
The focus of the products & technologies section is to clearly communicate what we build at Meta to ensure job candidates are aware of the innovative opportunities they will have to impact products used by the global community.
Diversity
We launched an interactive draggable panel design where users can explore content related to our company efforts, impact and commitments to building a diverse workforce.
Company News
In addition to building awareness of our company products & technologies, the new homepage design included a section featuring the latest company news – from news about how the company celebrates cultural moments to the latest WhatsApp updates, this section of the homepage ensures candidates have easily access to reliable company information.
Featured Job Functions & Job Search
While driving candidate engagement on the homepage was a focus of many of the previous sections, we also wanted to ensure that candidates had multiple entry points to search jobs and browse the highest-priority roles. Each job function listed displays a full bleed color hover state and links users directly to a list of open roles related to that function. The list itself is easy to update by the team with no coding required.
Mobile Designs
Tablet Designs
Other Design Considerations
During the re-design our team was focused on two additional priorities:
Accurately represent our new company brand (Meta), ensure we were representing the brand according to new guidelines, follow newly launched approval processes
Explore additional ways to encourage user interaction, including animations to provide visual variety as the candidates scrolled the homepage
Explore the new homepage at metacareers.com to see the new interactive experience or watch the video below.
Goals & Metrics
During design iterations and stakeholder reviews, we always went back to the key goals of the project – ensuring that the new designs could meet the needs of candidates.
Metrics were focused on increasing user engagement, including:
Decrease bounce rate
Increase time spent
Increase candidate sentiment about working at Meta