NextGen Nestlé Revamp
❓ The Why
NextGen Nestlé is Nestlé Australia and New Zealand's graduate program. Based on initial research on Google Analytics, there were spikes in visit to the career site during the yearly program application period, however data showed high drop off rates and users being led to dead pages.
Due to this I've decided to restructure the user flow and revamp the pages according Nestlé's new brand identity and employer branding, The program's landing page was also used to pilot the new employer brand - Be a force for good.
👤 My Role
🛠️ Tools
🤝 Collaborated with
User research, Co-UX design,
Co-copywriting,Employer brand implementation, Performance Analytics
Adobe XD, Adobe Illustrator, Google Analytics, Microsoft Powerpoint
Project Lead: Emma Hovart
UX design, UI design: Mei Lee
Implementation: Nestlé's website content developement team
🔎 Results (from usability testing)
-
Both Nestlé Australia and Nestlé New Zealand's NextGen landing page overtook their individual career site landing page.
-
Increased webpage views by 240% and average time spent by 241% during the campaign period compared to the prior year (2019)
INITIAL RESEARCH
Learnings from current webpages' performance
Whilst analysing Nestlé Australia's webpage performance on Google Analytics, I've noticed that the NextGen webpages saw spikes in visits during the campaign period, however, there were also issues with the current structure:
❌ Multiple versions of the pages were created throughout the years, however, they were not updated and were leading users
to dead pages.
❌ The pages were not SEO and old pages were appearing as the first result on Google search, garnering more views than the
updated pages.
Current issues with the site's UI and UX:
❌ Difficult to navigate between pages to find information as the different
pages are not connected, making it difficult for viewers to reference back.
❌ Content isn't very engaging, text can be a bit chunky and needs to be
broken down for easier reading.
❌ No obvious call to action & button for viewers to apply for the program.
Solutions:
✔️ To remove the old pages and redirect the old page URLs to the new page.
✔️ Restructure the NextGen pages to provide easier navigation and that
information is accessible from all pages.
✔️ More interactive content with bite-size information
External Best Practices
So what are some good graduate pages?
I decided to look at Nestlé's director competitors and relevant industry to see how they structured their graduate program.
-
Unilever
-
P&G
-
Shopee*
-
Shell*
-
Deloitte*
*Career sites that aligned to what the team and I wanted for NextGen
Main Findings
Layout
Tone of Voice
-
One-pager with a CTA to apply at the end.
-
High-level information with the option to learn more
-
The order of information is generally the same across all pages.
-
Casual, conversational tone
-
Addressed the audience directly - "You"
Information Architecture
After discussion with the team and stakeholders, we agreed on the NextGen information architecture. I've decided to keep high-level information on the main landing page, enough for users to understand the program and apply. The additional pages were provided for users to learn more about the company and the program.
All 3 pages are looped and connected so users can easily explore and backtrack to the other pages.
IDEATION
Digital Wireframe
Based on the agreed information architecture, an initial wireframe was created for the stakeholders to review the layout of the pages.
Application banner
Straight to application for those who are looking to apply.
About NextGen
Multiple tabs for users to learn more about NextGen
Career streams
Descriptions of the different program streams
Testimonial
Stories from alumnis or current trainees of the program
Application steps
How users can apply to the program
Links to the other pages
Talent Network sign up
Stakeholder Feedback
-
Key information such as why join, who we are looking for, to be visible at a
glance and not hidden behind tabs.
-
More information about Nestlé's work culture on the main page before users click off to learn more.
DEVELOPMENT
Developed Wireframe
Based on the stakeholder's feedback, the information on the main NextGen page was expanded and highlighted on the page for easy visibility. I tried to also keep the page visual-centred, making visuals the main focus of the information.
Visuals
The stakeholders wanted a professional yet youthful look and feel for the website. With that, the team's graphic designer and I looked into the use of iconography and images while still incorporating Nestlé's visual identity. Since the NextGen Nestlé main colour is a mid shade blue, we chose lighter shades of grey to complement it. Testimonial format also closely followed Nestlé's visual identity with curve edges, however, we played around with the visuals to give it a younger vibe.
Since the pages are a continuously improving project, feedback from both external users and stakeholders at the end of the 2020 campaign were used to further improve the page for 2021. This involved:
-
Including a pop of vibrant colour to give the page a more youthful look and feel.
-
Increasing visibility to other NextGen related pages.
-
Allowing users to easily backtrack to previous pages.
Based on the feedback, I've decided to further develop the elements, incorporating pink into the colour palette to give the visuals a pop of colour. In addition to that, I've incorporated cards at the bottom of each page, allowing users to easily backtrack to old pages and clear see that there are other pages to explore.
FINAL DESIGN
Below are the visual updates of the initial revamp in 2020 to the 2021 visual update. The page structure was kept the same throughout the years.
2020 visuals
Updated 2021 page
The main landing page was designed as a one-stop page for users to find all high-level information regarding the program and easily apply.
These includes:
-
Streams they can apply to
-
Who are we are looking for
-
Nestlé's culture
-
Interview tips
-
How to apply
2020 visuals
Updated 2021 page
The Our work culture page was designed as a subsection of the NextGen landing page, allowing users to better understand the company's work culture, benefits and initiatives.
Updated 2021 page
Updated 2021 page
2020 visuals
For applicants who have more questions, the FAQ page was designed to answer the most common questions asked by previous applicants. The page was also updated with new questions & answers each year to reflect questions asked by applicants each year.
This pilot project also helped set the page structure for other markets' youth program webpages around the Asia, Oceania & Sub-Saharan Africa region. Here are some of the web pages that I've designed & worked alongside the Nestlé content development team to implement:
PERFORMANCE ANALYTICS
Since the 2020 site revamp was the first pilot and massive change to graduate program sites in the region, I analysed the career site performance after the 2020 campaign was over, comparing its performance to the previous year. The data was gathered from Google Analytics and was based on a one month application period. Results showed:
⭐ The revamped site was performing a lot better compared to its previous year, garnering not only more unique views, lower bounce rates, but also increased dwell time, showing that users were finding it easier to navigate and find information throughout the pages
