7 min
read
UX UI CASE STUDY | Web | B2B
Tate & Lyle
Onboarding employees to a new Chapter of innovation
Client
Tate & Lyle
Industry
Agency
Bulletproof
Year
2025
Challenge
Tate & Lyle joined forces with CP Kelco and begin a new chapter in Tate & Lyle's long and rich history. Set with the task to delight to welcome their new colleagues from CP Kelco, as well onboard all of their existing employees by creating an engaging and personalised brand experience.
An experience designed to unite, build brand trust and provide transparent information.
Through an interactive Employee Portal, we celebrate change and encourage employees to become part of the amplified brand by creating their own unique ampersand.
Understanding Users
My starting point was a deep dive into understanding what impact to the employees as when companies merge, employees often face a range of challenging issues.
Although this onboarding experience wasn't to address each of these issues head on, it was important to understand that the blending of different company cultures can disrupt established work routines and values.
Effective onboarding to a new brand during a merger means making employees truly understand, connect with, and embody the new brand’s identity, values, and culture from their first interactions.
exploring the User Flow
We created a linear user journey because it provides clarity and simplicity, ensuring that new users progress through necessary steps without confusion or being overwhelmed. This approach reduces cognitive load and increases the likelihood of successful adoption and engagement.
It was also important the the employee felt happy with their Personal Ampersands, after all this would be used be used for their own avatars and profile. users needed to previewed and provide a way to let them them go back and make some edits and change the look and feel.
Ideation & WireFrames
Starting with quick loose sketches to outline ideas of motion principles as well as start to understand how the content could be structured in a way for seamless page transitions.
Once I had worked though I created slightly higher fidelity digital wireframes for use for internal viewing, just to help with clarity and checking all needed elements have been included.
Developing the digital DEsign System
Bulletproof had recently updated and did some amazing work on Tate & Lyle's new brand identity. So with the latest guidelines by my side, I took some time read and understood the new brand.
However this well-established visual identity had not been optimised for digital, and as such I needed to created and define a full Digital Design System that would reflect the same energy, personality and DNA and well as incorporate some of the motion principles.
Defining rules for: spacing, grids, colours, typography, motion etc and creating a design library of flexible components.
Colour Pallet
Our Core colours are those that are most strongly associated with the bran: Slate Grey, Coral, White and cream.
Our Expressive colours allow us to vary the energy from the more corporate core pallet and gives us a wider ability to pair colours with imagery.
FONTS
Custom font was created, born from the DNA in the Ampersand. Balancing humanity, functionality and legibility.
Typography
Using too many font sizes in a single design creates a disordered and inconsistent visual experience, making it harder for users to read and process information.
Instead, I establish a clear hierarchy for your content by using a limited set of font sizes that clearly differentiate between headings, body text, and other information.
Dynamic CROPS
T&L identity system uses a dynamic angle but introduces curves from the ampersand to show our more human side.
DEfining the Dynamic GRID for screen
It was important to define a flexible dynamic grid from which all the pages and layouts can be created. I decided to pick a standard 12 col grid but with a dynamic 60 degree grid to form the image masks.
The dynamic angle grid splits a page between a solid colour section and an image. This system offers the opportunity to create another type of deliverable; one which creates a juxtaposition between two (or more) images.
Prototypes & Testing
As a proof of concept I chose to prototype and test each sections flow as soon as possible, as I wanted to test how the brands existing motion principles could translate to an interactions on screen.
These early designs ideas and prototypes where also shown in meetings with stakeholders to help align our vision and concepts. Testing these flows also came back with some positive feedback but did outlined some pain points around "being lost". To fix these issues I looked at extra design ideas of to show progression and looked at the overall pacing to each section so nothing felt too long.
Solution - ONBOARDING
The Onboarding section of the site is an engaging brand experience to onboard employees old and new to T&L new chapter.
Streamline navigation with intuitive, short, and familiar UI, making it easy for users to explore and learn within just a few clicks. The design shares the same DNA with the latest brand refresh. Strong use of clean, visually engaging layouts with consistent branding, incorporating imagery to support messaging and improve engagement.
Solution - Your Ampersand
With a set of simple questions, we have a range of 240 unique combinations. Based in users choices we build Your personal ampersand - inspired by your interests, your mind, and what makes you, you.
We celebrate change and encourage employees to become part of the amplified brand by creating their own unique ampersand, which they can download as a full media kit to upload to their T&L and linkedIn profiles.
To insure quality we pre-generate and audit each AI generated images to ensure each ampersand is aligned with Tate & Lyle’s amplified brand identity.
conclusion
By creating a well defined, engaging linear flow, users data shows a very high completion rate. Making this Onboarding process successful. Personalisation significantly improved user engagement by making the experience more relevant, efficient, and trustworthy for each employee.
Streamlining the user journey I was able to remove Information Overload, this not only simplifies access to information but also aligns with employees’ expectations for modern, tailored digital experiences—driving higher satisfaction and ongoing engagement.
