My Role
Senior UX Designer and Lead
Main Goal
Develop a design system that designers and developers can reference to align user flows, streamline processes and speed up production.
Staples Design System
Create a design system based off the new Staples Canada brand and site transformation by Jackman Reinvents. The design system will help the product team to scale design while maintaining a high level of consistency and quality across Staples’ digital products.
Work smarter, not harder
Design systems serve as a single source of truth for designers and developers. They save time and eliminate the need to recreate the same or similar components from scratch for every project. That being said, it has to serve the needs of both designers and developers alike. Every style guide, component, reusable element or pattern must be defined and accompanied with code.
Crafting consistency in chaos
Establishing a design system is no easy feat
We kicked off the project by taking inventory of all the existing components and style guides established by Jackman and the Staples Canada team to date. This involved conducting a website and brand audit to identify any differences or gaps in the user experience of our products. It was discovered that there were A LOT of inconsistencies largely due to the fact that everyone was working in silos. The new brand colours established by Jackman and used by the Marketing and Print teams were not accessible for digital. The designs for various pages that make up an e-commerce site were not completed due to time constraints. And the development of our website was contracted out to various external agencies paving the way for conflicting programming languages and a fragmented infrastructure.
Once inventory was taken, I attempted to bridge the gap and establish a unified visual system. Existing components were streamlined or modified for digital use, and all functionality was documented in Figma using their innate tools and libraries. This library would serve as the basis for all future components and additions. Designers were now able to quickly access and use all of the digital components in their wireframes, mockups and prototypes.
However, the way in which the team was structured, collaborated, and worked with different tools and processes severely hindered the success of our design system. Not having a direct line of communication with developers, and little support from the product team, left the design system falling short of its purpose. We were unable to marry the visual design with code, which ultimately impacted its adoption and scalability.
Teamwork makes the dream work
Design systems are built and maintained by the teams that use it. It is a collective effort that should be supported by the entire product team, and include a designer and developer’s perspective when setting up the system. Though I had tried to do much of it on my own due to resourcing constraints, it takes a village to successfully implement and maintain a design system.
Lessons Learned
Adaptability is in its nature
A design system continuously evolves and changes. Managing its updates and releases ensures the team is always using the latest version to produce a consistent product.
Be an ambassador
Building a design system is only half the battle, but enforcing it is another. Become an ambassador and advocate for it every chance you get.
Collaboration is key
Design systems are a shared responsibility that should not fall on the onus of one person in order to be successful.
