Designing a design system for PokerStars
When I started at PokerStars there was no style guide for our products. The design experience was wildly inconsistent, interaction patterns varied and usability was incredibly fragmented across web, apps and desktop clients.
6 months after joining the customer experience team, I started working on creating a design system in my down time to improve consistency.
It would become the one source of truth for designers and development and holy bible for PokerStars suite of products.
It made a global impact to design delivery of the organisation and one of the proudest accomplishments of my career to date.
PokerStars is the largest online poker cardroom in the world, with over two thirds of the total online market. Its internet site alone receives over 1 billion page views per year.
Above – documenting the design principles for colours in UI
Above – a screenshot of how the design system template was setup for button components
My goals for the project were to create a design language and pattern library of reusable components that would increase our efficiency and consistency as a design team and create the one source of truth for development. Questioning everything and testing components, it would reduce time to market and help to smooth arguments with stakeholders.
Taking inspiration from Brad Frost’s atomic design, I worked with a handful of UX researchers and designers to incorporate as many learnings into the product and present our guiding principles. Including dev in regular updates proved to be invaluable, and earned strong buy-in form their side from an early stage.
Strategically aligning to company goals
Aligning to PokerStars business goals would help in providing buy-in from stakeholders and;
- Provide long term benefits to product design and the development roadmap
- Improve information architecture, accessibility, discoverability, and usability.
- Improve ease of use, improve clarity, consistency and reduce complexity
- Unify our products
Understanding not only the what, but the why, behind the principles of the design system was critical to creating an exceptional user experience.
Creating a living, breathing system that’s usable, scalable, accessible, consistent and maintainable set the standards for success in the long-term.
Documenting and defining the intent
The UI for the pattern library was not created in a linear process.
In truth, the pattern library would count for nothing unless it was guided by a clear set of design principles and direction on approach for tone of voice, visual language, motion and product vision.
Setting out a clear philosophy helped to anchor decisions as the UI pattern library grew.
Establishing the workflow
Establishing a new set of tools (Sketch, Zeplin) with powerful plugins and integrations, made hand-offs to developers run with hyper efficiency. Having a central repository for developers to view pixel perfect assets and code vastly improved efficiency.
Introducing a new way of working within the organisation also had a huge impact – previously, designers had to communicate with dev through a BA (Business analyst) usually through a Jira request in multiple time zones. This added delays, confusion where things were lost in translation and added multiple roadblocks to the process.
Streamlining the design process to allow designers to speak directly with dev had a massive impact raising, productivity and overall consistency of shipped products.
Above – exporting components from Sketch to Zeplin
Core elements baseline inventory
An inventory of the legacy and required components were mapped out using an online tool called Airtable.
This enabled strategic planning of components in design sprints and allowed us to track the status in terms of documenting the design, reviewing, testing and approvals.
New components had to meet certain requirements, be scalable at modular level and meet WCAG 2.0 accessibility standards.
The token architecture was formulated using a straightforward decision-making, grouping, ordering and classification.
Token names were suggested and reviewed with developers to create future proof naming conventions.
Documentation of components
A UI pattern library template was set up in Sketch to document the components look, functionality and usage examples taking inspiration from Google’s Material Design.
Design principles started out as concepts that were initially documented, reviewed and iterated collaboratively.
Once completed, a UX copywriter came in to smooth over the overall tonality of the documentation.
Above – a screenshot of how the design system template was setup for prompts
The Design System had transformed the way engineers and designers now worked at PokerStars – shipping faster, improved consistency, speed in workflow, scalability, a shared vocabulary and future proofing designs across our product suite.
Gaining traction within the business
As the project started to grow, it started picking up traction with business leaders who could see it’s potential to increase usability within our products, future proofing and unifying the design experience, and reducing costs with reusable components built out in React.
From what started out as a side project, now became the focus of the biggest disrupter to design delivery in the organisations’ history, and with that, the most influential piece of work I’ve ever embarked on. It set heightened design standards, changed the way design teams interact with dev, and improved consistency on a global basis.
The PokerStars design system continues to be developed and evolve.
At the time I left, what started out as a side project to improve efficiency and workflow, had had a fundamental global impact on the organisations’ design delivery and product shipping.
It laid down benchmarks, changing the way design teams work and has been the most influential piece of work I’ve ever worked on. Setting heightened design standards, and improving brand consistency on a global basis.