Nestlé Global Career Site Revamp
❓ The Why
Millions of job seekers visit Nestlé's career site every year, making up 50% of viewers visiting our nestle.com site. Their purpose: to find new job opportunities at Nestlé, and learn more about the company culture and initiatives. However, the current site's flow does not optimally lead users to insightful information to support their job search, nor does it reflect Nestlé's employer brand. Furthermore, each market had its own layout design and varying levels of information, making it inconsistent and less coherent as a system. Therefore, I wanted to provide a better user experience for visitors, and improve the website's content and visuals to ensure it reflected Nestlé's new employer branding.
👤 My Role
🛠️ Tools
🤝 Collaborated with
User research, UX Design, UI Design, Co-copywriter, Supporting market implementation
Adobe XD, Adobe Illustrator, Paper Wireframes, Microsoft Powerpoint
Project Lead: Nestlé's global corporate communication
Creative Support: Mei Lee
Implementation: Nestlé's content development team
User testing: Bunnyfoot
Copywriting development: Radley Yeldar
🔎 Results
-
Improved 73% of job seekers brand perception.
-
41% of job seekers who initially had unfavourable brand perceptions had a better perspective of Nestlé after visiting the career site after 4 months.
-
Improved Net Promoter Score by 5%.
-
Credited by Bowen Cragg's user survey (An external benchmark index for corporate companies’ digital presence) for improved user interface
INITIAL RESEARCH
Reviewing initial career pages
Initial observation of the Nestlé career page and user feedback from the markets:
🔎 Main Landing Page
-
Easy and clear to view on a web browser
However: -
not mobile-friendly (a lot of page scrolling)
-
Job search could be more efficient
-
Content could be prioritised better.
🔎 Life at Nestlé
-
Quick bites of information for easy viewing
However: -
Information is generic and feels too corporate, lacking sincerity.
-
Content needs updating and alignment with the new employer branding.
🔎 Nestlé needs YOUth
-
Comprehensive information, users could dive further to learn more about the company's initiative.
However: -
Information is not relevant on a market level, does not showcase employment opportunities for the youth.
-
Pages does not give off a youth vibe
External Best Practices
To better understand how can this be improved, I looked at Nestlé's competitors & companies which job seekers often are interested at applying to
Google, Spotify*, Nvidia*, Pepsi Co, Procter & Gamble, Coca Cola*
* Career sites that I felt were not only intuitive and appealing, but also aligned with Nestlé's branding,
Main Findings
Ease of Navigation
-
Straightforward navigation, minimal clicking to get to the page needed.
-
Titles are clear & laymen friendly
-
Minimal drop down, little to none sub sectioning
Layout
-
Main landing pages focus on high level information with Call to action buttons to learn/ discover/ read more
-
Carousels are used for large information blocks
Tone of Voice
-
Job seekers are at the centre of the conversation
-
Content is written to address the reader,
use of "You"
Testimonials
-
First glance testimonials are kept short &
high level -
Some sites had stylised headings to create stronger story continuity.
IDEATION
Information Architecture
Nestlé's new EVP consist of three pillars: What it's like to work, grow in Nestlé's, and the impact job seekers can have within their job, which I decided to incorporate into the redesigned information architecture. Furthermore, I wanted to optimise the site's user flow to make job searching quick and simple, while also keeping browsing job seekers in a constant loop of information whether it is about the Nestlé culture or the opportunities at Nestlé so job seekers are well informed before searching for jobs.
The coloured sections are new proposed pages
Paper Prototypes
Multiple low fidelity prototype iterations were then created on paper to test different structures and user flows for each page. Content priorities were also listed to ensure that they were not missed out from the wireframe.
Digital Prototypes
Based on internal discussion and feedback from internal user testers, the wireframes were reviewed, developed and turned into digital wireframes on Adobe XD. This was to provide a clearer overview of the page structure, page content and how the user may move from one page to another.
Hover over to learn more about the thought process of each wireframe.
INITIAL USER TESTING
Interactive prototype
An interactive prototype was developed to test with external job seekers and internal employees. This was to gain a better understanding of what job seekers globally wanted and the pain points they may face. The user testing was a included job seekers ranging from fresh graduates to senior managers across different backgrounds, functions and countries to speak out loud as they explored the site.
Questions included:
-
How would you learn more about Nestle's value and culture?
-
How do you feel about the page?
-
What do you think of the design?
(User testing was done by an external agency: Bunnyfoot)
Feedback
✔️ The visual testimonials were appealing
✔️ User interface is engaging
✔️ Better understanding of Nestlé's values & culture
❌ The 3 EVP related pages could be condensed into less pages as
information seemed repetitive.
❌ More authentic and real life stories from employees
❌ Content focus: What is in it for me as a job seeker
❌ Deeper and more informative content
❌ More inclusive and diverse language and visuals
Restructuring content & user journey
The initial information architecture was revisited to further improve the structure of content and flow based on user and stakeholder feedback.
What was developed?
-
The main landing page prioritised job search & showcasing life at Nestlé; ensuring that job seekers always had access to these actions and information across the career site.
-
Content from working at Nestlé page & growing at Nestlé page were merged into one page.
-
A benefit section was also introduced as users stated it as one of the first things they would look for when looking for a job.
-
The impact page was restructured to showcase the impact of Nestlé's employees in their day to day jobs.
-
Quick links were introduced to allow users to easily access additional information pages such as FAQs and career areas.
-
Nestlé Needs YOUth to be converted into a page to showcase student and graduate opportunities.
Initial architecture
Restructured architecture
DEVELOPMENT
High Fidelity Prototypes
The high-fidelity prototypes were further developed on Adobe XD, prioritising visuals and vibrant colours to draw users attention to key information. Since the stakeholder's wanted the different EVP pillars of Nestle to stand out, the colours selected were based on the brand guideline colours for each pillar of the EVP, for example: Information & testimonials based on What it's like to work at Nestlé were in orange, while ones related to The impact you can make were in green.
The high-fidelity prototype also included close to the final copywriting and visuals from Nestle's photobank to have a close-to-ready prototype tested with users.
Visuals
While designing the page, I made sure to align the visuals and language with Nestlé's brand identity guidelines,
ensuring that the site incorporated:
✔️ Nestlé's main colour palette & fonts.
✔️ Use of authentic portrait photographs of employees
✔️ Conversational and inclusive tone of voice, focusing on what Nestlé as a company could offer candidates
Based on user feedback, I also proposed further designed variations of components to make them more appealing and the content easier to read. This included testimonial cards, quick links, search bars & benefit cards.
2ND USER TESTING
The external users in the first user testing were brought back again to test the updated prototype. The overall feedback was positive in terms of usability and page structure, however, content needed further development.
✔️ The employer branding is clearer.
✔️ The main landing page is sectioned off well making it easy to direct viewers.
✔️ Page structure is good and easy for users to navigate.
✔️ Testimonials are well received and were users' favourite across all pages.
✔️ The 'find out more cards' are effective at directing users.
❌ Overall messaging in our impact needs to be clearer.
❌ Quick links are barely used.
❌ Content and copywriting need more development ie. Benefits need to be clearer,
need deeper and more informative written content
Based on the feedback, I decided to streamline information, removing the Making an Impact page and incorporating the testimonials into the individual career area sections. An external agency (Radley Yeldar) was also brought in to support with further content development and copywriting.
FINAL DESIGN & MARKET IMPLEMENTATION
The career page went live in June 2021. Below is the feedback we've gotten from external users and from Bowen Cragg live site user testing.
"
The Nestlé global job search is seamlessly integrated into the Nestlé site both on web browser and mobile view.
The landing page looks more elegant.
"
"
Eye-catching summary of employee benefits
The page provides in-depth information about the work culture at Nestlé
and what impact candidates have if they are a part of the company.
"
Global Implementation (Guidebook & Standardised Template)
Since each country manages their own career site and had their own local languages, personalised benefit and culture, HR teams of each country had to tailor images and content to fit their business. To help them independently personalised the content without any design knowledge and to help them convey their personalised site to the in-house development team, I create a Powerpoint template which walked through the different elements of each page and highlighted areas which could be change such as visual images and copy.
This template ensures that the website layout was standardised across all countries and made it more efficient for the development team to implement. Furthermore, I created a guidebook, to provide the HR teams examples and guides to what pictures to use, what kind of testimonials to get from talents and the type of language to use. To ensure the different countries were equipped, I also set up meetings to help onboard them with the template and to guide them through any problems or questions they had. Once this was filled up, it could be easily sent to the company's global development team to be implemented, simplifying the UI design process for users who have no UI/UX experience.
Reflections
This pilot project was a good start to the career site revamp, however more work needs to be done such as further improvement on the Youth Pages to make it more interactive and intuitive. A map-like feature could help to make the programs across the different regions easier to search for. Additionally, further user testing should be done with fresh graduates to gather better understanding of how users would react to the page and to see which areas need further improvement.
Furthermore, as this was a project beyond my day to day role and design work was done by a team of 2 (the team's creative developer and I), the project duration was on a time constraint due to a tight deadline and budget. If given more time to work on the project and a bigger team, I hope to work alongside agencies and development team to develop new components (on-top of the company's current design system) to make the pages more interactive, visual and accessible such as new testimonial cards and adding a scroll button for easier page movement for people with limited mobility.
