Dave and Busters Design System
Dave and Busters was in the process of going through a rebranding and hired us to create a design system for their website so we could make better, user-centric flows and align better with their new brand guidelines. Our UX Reacher preformed heuristic reviews, created personas, and helped us narrow down the broken part of the flows and define who we are creating this product for. Our UI/UX Designer took this information and make wireframes for new user flows.
At this point, it was handed off to me to create components that marry the brand guidelines and the wireframes the client had approved. I made a couple changes to their colors and gradients to ensure maximum accessibility. This was one of my larger projects at Ansira and I worked with a large team with many moving parts. There is so much more I wish I could make for this design system, but I was able to work with the other designers to make the most impact with the fewest components.
Elements
For the elements, I tried to stick as close to their brand guidelines as possible. I did add a darker blue for their buttons so that I didn't have to use "aqua" (as was in their brand guidelines). This allowed them to be accessible with white text.
The text stack was an iterative process. We came back many times to see if we could fit a new need into old styles and ended up needing to make more. I did add documentation on how they are used to help keep everyone aligned.
Patterns:
To define the patterns, I scanned through all the wireframes with a fine tooth comb and tried to find as many similarities as I could. Because I was on a time restriction, I couldn't organize these sections how I felt would be most efficient way, but they worked for our team.
This is the section where we see nesting start to happen. The bespoke icon collection is nested and many of these buttons and fields are used in the next steps.
Modules:
Much of the Dave and Busters website was broken up unto cards and other package-able content. There was a few ways we could go about putting that information into a design system. After some team deliberation, the most effective way to support everyone involved was through card creation. If I could define the different types of cards and spacing rules (as seen in the grid), the designers could more easily rapidly prototype whole pages.
I really enjoyed this part of the process and leaned hard into auto-layout as well as the variation settings. Many of the cards have a desktop and mobile variation so designers can just pull one and use it for both.
My job here was to go over all these items with an eye for detail to make sure these sections are pixel perfect. I checked all padding, margins, text, and color to ensure that these cards represented the brand faithfully. I also made sure all text, icons, and colors could be easily swapped out to ensure the cards were as flexible as possible.
Finished Product:
By working together with the large Dave and Busters team, we were able to create a website design that was well suited to the brand and the customers. I loved working on a design system that brought together their vibrant colors and their joyful images. It was amazing to work with a team to bring together a seamless flow with attention to detail and finesse.
Given more time, I would have loved to continue to build out web page sections with nested navigation and cards. I feel like we could really define a lot of the sections as repeatable patterns.
I am also looking forward to more user testing so that we can really refine the wonderful product that we made. We love it, but if we can get testing results, we can make sure others love it as well.
