TRANSFORMATIONAL DESIGN OPPORTUNITIES TO UNCOVER AND DEFINE A DIGITAL-LED CX ROADMAP.
Our CX vision was designed to uncover new opportunities and define a digital-led CX roadmap to create opportunities and enhance users experience from UniFirst's Product Catalog to Self-Service Portal.
Role
Product Designer
Duration
August 2022 - March 2023
Launched Date
April 27, 2023
Website
WHAT IT MEANS TO ALWAYS DELIVER.
OUR SCOPE
It's not just about ordering bulk items on UniFirst but about putting people first. How can we guide and train UniFirst users into choosing their own adventure with no strict interaction yet still be able to provide support with the proper infrastructure that's not redundant but intentional.
We stepped back and lead with vision. With vision, we were able to enhance the product catalog, add data & personalization, implement plan design tool, include direct sales & pricing and introduce self-service portal. This was one of the biggest project our team has faced. We closely worked with our dev partner as well as with our SEO teammates in order to bring this to life.
MY ROLE
Within this whole process, my role was to create the detailed experience through visual design. Working closely with the whole team, especially with our UX Designer, Abby. Joshua and I were able to bring UniFirst a fresh new look and experience based on the overall structure to the wireframes that Abby has laid out with the existing brand guideline?
THE PROBLEM
UniFirst had 3 distinct web that were causing confusion to our users. Our key goals for this project was to introduce CMS, migrate rental sites, and modernized the look & feel by adapting the existing UniFirst brand.
The three sites are:
- UniFirst.com | UniFirst.ca | rental.UniFirst.com
OUR PROCESS
We have the blueprints.
Let's build the house.
A style exploration is where we explore how to bring the intent of the wireframes to life. We provide two distinct homepage concepts showing how to build the experience. During this process we have placeholders on content or borrowed language from the existing site that still communicates uniform expert.
CONCEPT 01 | EDITORIAL
See for yourself
We want to let our users choose their own adventure with no strict interactions. With the intention of having them read and understand who we are, what we provide and how we can support them we designed our first concept in an editorial layout to help emphasize self exploration with the guidance of oversized and heavier weight on the headers.
CONCEPT 02 | CUSTOM LED EXPERIENCE
Get a guided tour
Similar to first concept we want to continue to let our users choose their own adventure, however, we want users to interact more through different features we provide to help guide them into finding solutions tailored just for them.
CLIENT SELECTION | BOTH
Merge them. Get a guided tour & See for yourself
Our client expressed interest in both concepts and has asked us to merge them. Specifically, they want to incorporate the visual language of Concept 2 – "Get a guided tour" – into Concept 1 – "See for yourself" – while retaining Concept 1’s interaction approach. This kind of request is common when working with clients, as they often seek to combine the best elements from multiple concepts
Based on their feedback, we reordered the modules, added additional sections where necessary, and applied these changes consistently across the screens.
Batch 01
We divided the designs into two batches, working in parallel with our UX wireframe deliverables. The main screens for batch 01 included: Homescreen Industry, Product Category, PDP, and CMS Content Template.
Once we finalized these screens, batch 02 was easier to tackle since we reused many components from batch 01.
During the design process for batch 01, there was extensive back-and-forth feedback, which helped us reach the final selection. We aimed to work efficiently by leveraging Figma's tools—using auto layout and creating parent components. This approach made it faster to document the style guide and design system as part of the deliverables.
Batch 02
After completing batch 01, we reused its components in batch 02 to maintain consistency, even though the content within these components varied. This approach allowed us to complete batch 02 much faster than batch 01, with fewer iterations due to tight deadlines. Additionally, transitioning the same style from batch 01 to batch 02 ensured a seamless look, which was visibly clear to our clients.
The main screens for batch 02 include: Mega Menu, Guest Quote, Contact Us, Locations, News, and Search Results.
THE BUILDING BLOCKS
As we rebuilt the experience, creating consistent components and features was essential for helping users adapt to the new functionality and interface. Developing the design system and component library was a key part of our deliverables, supporting both current development needs and future scalability as the business evolves.
One challenge we encountered was color accessibility. UniFirst’s color 339 was not AA or AAA compliant with white text. To address this, we conducted a Color Exploration to explore alternatives that could retain 339 or introduce enhancements. However, despite our recommendations, UniFirst has insisted on using 339 with non-compliant white text. Ultimately, we have communicated our recommendations and warned them about potential legal implications if they continue to use 339 as is.
END PRODUCT
Last week of April 2023 UniFirst has launched the new experience.
This project had a tight timeline, covering planning, design, implementation, and finally launch. Our design phase lasted five months—check out the website!
We developed recommendations for creating the best possible user experience. Many components were designed as modular elements, enabling the internal UniFirst design team to mix and match them when building future pages. This approach gives them the flexibility to customize the site according to their needs.
