Baking the PIE design system with a global product team
Scope
UI/UX Design, Design System, Product Design, Mobile & Web Design, Prototyping
Tools
Figma, Sketch
Outcomes
Designed and established functional patterns for various components in Figma and contributed in building the component library.
Hero image courtesty of JustEatTakeaway.
With a diverse range of digital products, establishing a single source of truth poses a valuable challenge for an international team of designers and software engineers
Build it once, use it everywhere
At SkipTheDishes, developing a design system for all of their products was a "nice to have" that became a goal among the design teams. In light of the company's products reaching a stage of maturity, there was a lack of cohesion. The only commonality between them was the company logo and common design practices. These products had differences in user groups that didn't adhere to a foundational single source of truth. The design team wanted that common foundation so that SkipTheDishes had not only a lot of great products, but a family of products.
JustEatTakeaway's "Business areas" product structure with the PIE Design System at its core.
At the time, design would often recreate the same things many times over and the same was happening in engineering for certain components. A design system would solve this productivity problem and allow the teams to prototype, create, and build efficiently. Design wouldn't need to recreate components if they had a library that was ready for them to pull from. Engineering would have a single source of truth for components instead of having multiples of the same component rebuilt and spread across different teams and products. At the stage of maturity for Skip's products, a design system is an investment for future growth and scalability.
More than colour hex codes and font sizes
Deeply rooted in the beginnings of design at SkipTheDishes' was Material Design by Google. It's widely considered as the gold standard of design systems and many of Skip's early designs used Material and was inspired by it. By the time we tackled building a design system for Skip, we were familiar with design systems in general but there was a lot more to learn.
Our research included looking at many other systems such as Material Design, Shopify Polaris, IBM's Carbon, and many others in order to see what makes a successful design system. What makes it work and why can these systems function properly? We knew that design systems bring consistency and efficiency to our workflow but we quickly realized that it was more than just colours and components.
Diagram of a basic token structure.
Dozens of token values can exist within a design system.
Establishing a foundation of principles was a common element among successful design systems and we looked to do the same. Having a set of guiding principles helped give us a common ground to making decisions on the subjectivity that is often associated with design.
During the progress for this project, accessibility was one of the things that became a frequent topic for conversation. Accessibility was a huge focus when defining foundations, choosing typefaces, and choosing colours. When building and designing components, we made sure to keep accessibility best practices in mind.
A button component built using tokens.
SkipTheDishes changed their primary brand colour from red to orange.
So many data tables
Shortly after we started, the teams at SkipTheDishes and JustEat joined together and the design system project became a company wide effort. We shared our knowledge and learnings amongst the teams. One of the concepts we got familiar with are "tokens".
Tokens are the backbone of design systems because it holds values such as colour hex codes, font sizes, and gives those values a semantic name (alias token) so that values can be changed easily. Tokens were named in a way to make it easy to remember as well as give meaning and purpose. Tokens can have many layers built upon it which is what allows light and dark mode theming to be possible for our products.
We had large spreadsheets filled with many tokens and assigned values that were constantly being changed and tested.
All variations of a text input field were needed to be considered since each product in the JustEatTakeaway family may need different requirements.
Changing from red to orange
After the JustEat and Takeaway merger in 2020, the design teams were tasked with updating brand colours to adopt the Takeaway branding. Although this was a tedious task for designers due to the project still being a work in progress, it was a quick change on the engineering side since most of the groundwork for the design system tokens were in place. From red to orange, tokens that took on the {brand primary} token would be automatically updated.
Evolution of the basic text input field.
Software migration
Upon reaching a certain level of progress on the design system, the design teams began testing out Figma and thought about switching from Sketch. At the time the SkipTheDishes team was using Sketch and a third-party application called Abstract to manage team projects and design components. Figma offered all the features we needed as a team after a couple weeks of getting familiar with the software, the decision was made to switch.
Partner Portal built with the PIE Design System.
Application of the design system
Once Figma was up and running across all teams, I helped build several components for PIE using Figma's robust features for managing design systems. Some notable components I contributed are input field, drop down, and tab navigation.
These components included different states such as error, hover, and focus and other variants for size, icons, and many more. When building these components, I established design patterns regarding accessibility and other common functionalities. Once a majority of the components were built in Figma and approved, there was an opportunity for me to apply PIE to one of the many products owned by Skip.
Click here to read more about Partner Portal.