Lot of primary, secondary, tertiary, icon only buttons
Patrick Loubet
Senior UX designer
Summit Engine Design System
Empower design decisions, accessibility, consistency,
and rapid development
Atomic design and Design tokens to enhance user experience.
Web Summit events digital solutions (Web Summit Lisbon, Web Summit Rio, Web Summit Qatar, Collision Toronto, and Rise Hong Kong) are built in-house by a small group of Product Managers, Product Designers, UX designer, and Developers.
As a UX researcher and UX designer, I have to make sure that internal and external products are inclusive, easy to use, and consistent across the user journey.
Problem
The company is divided into 5 verticals (Acquisition, Ticketing, Attendee Web portal, Mobile app, and Admin tooling), each vertical, with the exception of Admin tooling, has currently 5 themes to maintain (one for each event).
Updating themes and creating new events is quite a challenge for the Product team. There is no Design System, a lot of the design variables are hard coded, and a lack of communication across verticals to have a cohesive user journey.
This results in a lack of consistency across products, poor accessibility/usability, and a costly need to involve developers in any design update.
Goal
accelerate the design and development process.
improve designers'/developers' collaboration.
Improve consistency across the attendees' journey.
improve accessibility.
simplify theming updates by using Design tokens.
Solution
Pilot phase
Building a white-label Design System for the least risky vertical, (Admin tooling) to pave the ground for the other teams.
Long term
The design system will be centralized for all the verticals to use. Theming and technology specificity will be handled by Desing token.
Tools
Miro
Figma
Storybook
Team
1 UX designer
1 developer
1 project manager
My Role
UX research
UX design
Product design
Workshop facilitator
Timeline
Discovery & Research: 2+ months
Design in progress
Development in progress
My Design Process
Visual audit
we conducted a visual audit of the existing designs, documenting all the variations of our components, including grids, colors, typography, spacing, and sizing.
This inventory across the platforms allows us to:
identify the use cases.
Visualize the level of inconsistency.
analyze the level of compliance with WCAG 2.1.
identify the technology used to build them.
Research
We conducted comparative research to gain insights into the Design Systems of the digital leaders that include accessibility into their process (REI, BBC, IBM, Atlassian, etc).
We also learn about how to use and how to successfully implement Design tokens from Jan Six, Jina Anne, Nathan Curtis, and Lukas Oppernann to name just a few.
Finally, we researched articles, UX best practices, and a11y specialized sites for information on each component we were going to document and build. Starting with the most commonly used.
Workshop
During the project, we facilitated a workshop dedicated to bringing together everyone who will soon or later work with the Design System and Design Tokens (Product Manager, Designers, and Developers.
We started by introducing Design Tokens. Then we voted to decide on a common language for the token format and component naming.
Design
Using Figma, Design Studio, and Eightshapes plugins, I translated my first sketches into a high-fidelity design with detailed documentation.
In parallel, I was also using those new components in the latest projects I had with the Admin tooling team. Testing and iterating them with real use cases.
Next steps
A project like this one takes months before being able to move to the next phase due to the lack of a dedicated team of Designers and Front-end Developers. Hopefully, now that some of the based components are ready the Design System will be used in more protects creating some momentum. The goal is to move from a Centralized team model to a federated team model.
Learnings
This project emphasizes the importance of establishing a shared language and standardized design attributes, enabling consistent and efficient design and development processes.
it also highlights the significance of collaboration and documentation, ensuring that all stakeholders are aligned and have a clear understanding of the design principles and guidelines.
Lastly, it underscores the need for adaptability and scalability, as Design Tokens allow for easy iteration and updates, accommodating evolving design requirements while maintaining a cohesive user experience.
Thank you for reading my case study!
Want to work with me? Feel free to contact me!
...or just say hello on my social media.