As we analyzed our app pages and the account creation/betting process, we identified a lack of consistency and adherence to web design best practices. Instead of employing a standardized method and a library of reusable elements, designers, project owners & developers were coming up with individual systems, often creating solutions similar to those on other pages. This resulted in challenges in maintaining and updating the app, causing inconsistency for users.
2 Product Designers
1 Design Director
As we began to dissect the pages on our app and the process for creating an account or placing a bet, we realized that we severely lacked the consistency and rigor that we believe to be a best practice for web design. Instead of a repeatable method for building pages and a library with reusable elements, designers and developers were coming up with their own systems and creating brand new solutions, many of which were very similar, though not exact, to solutions already implemented on other pages. Not only was the app difficult to maintain and update, it felt inconsistent for our users.
Rather than repeatedly reinventing our design approach, we examined our existing creations. Before we’d even considered creating a style guide, component library, or full design system, we’d been creating marketing pages. That meant we already had a collection of components. Sure, it wasn’t labeled properly and was seriously unorganized, but we had something to start with. Our initial step involved cataloging fonts, sizes, colors, layouts, etc., and compiling this information into a document. By doing so, we easily identified patterns and outliers. Large repeated elements were deconstructed to an atomic level, enabling users to assemble atoms and molecules into flexible building blocks for diverse page needs.
Our goal was to create adaptable components that seamlessly combined in various configurations. We streamlined similar elements, establishing standardized sizes (H1-H6) instead of maintaining 12 different heading sizes. After refining our visual language, we organized all components into a shared library, facilitating cohesive design creation.
Some of the repeated elements were quite large, so we dissected them down to an atomic level, which would allow anyone using the design system to then piece the atoms and molecules together to form organisms that fit the needs of any page and the content that needed to live there. It was very important for us to end up with flexible building blocks that could work in conjunction with one another in any combination.
Over the course of 3 months, our small team created and organized a robust, adaptable style guide and component library in Figma using toggles, text features, variables.
All our products are built with this framework. Using our Design System, we can go from concept to ship in one day.
We’re also saving time and money in multiple departments. When a designer sits down to create a new page, instead of opening up an empty canvas, she already has all the necessary pieces. She can focus on more complex problems, like how to best communicate with our audience, rather than deciding on headline sizes and grid styles.
