The Problem
Component mayhem
If your company doesn't have a formal design system and has 28 different product teams, your engineers and designers are doing redundant work on components, page layouts, colors, typography and spacing with no ability to change any of these factors at a global level. That was the case at Ticketmaster at that time.
The Solution
Once everyone's hearts are broken, you have a design system.
I would imagine that it would take the average product designer, assuming they were not working on anything else, about two weeks to design a complete set of essential global components. Creating them is not the hard part - getting everyone to agree is the hard part. It's sad but true - you may find that the design system is successful when no one is happy.
I will illustrate with one example. Do you like your buttons with rounded corners, square corners, or pill shape?
That question alone can take weeks to resolve. Once that decision is made, perhaps two-thirds of your design team has a broken heart. Once everyone's hearts are broken, you have a design system.
Design Governance
It's a lot like the House of Representatives
To get the ball rolling, you may find that you need design governance. This small group, probably around 3 - 5 designers will have to make these decisions on behalf of their respective constituents, much like the House of Representatives.
So that is what we did, I was one of 3 members of the Design Governance team, and we were all in the position of having to collect examples from our respective organizations, get consensus, meet often, debate on Slack and then document the agreements and disagreements. It's a long, onerous slog for sure, but progress does start to happen, and buttons are a great place to start. They are called design "systems" for a reason. As you will see with buttons, the system is starting to get defined.
Sizes
It's a small, medium and large world out there
It may start feeling like you're ordering from a McDonald's menu, but it's a fitting model for design systems and component building. Generally speaking, after you conduct audits of your current UI's, you will probably find that one size of each component that used more than other sizes. You will have one-off situations where there is a need for smaller buttons, let's say within a date table or a need for a giant button, let's say on a sign-in page; but for the most part, regular size is just fine 80% of the time.
As far as the scale, you have an 8px gap between 44 and 36 and a 12px gap between 36 and 24. Why is there a difference in the scale? Why can't the large button be even bigger? That's a 3-week debate right there because people (in this case designers) have certain feelings about how tall buttons should be.
What I was particularly useful at doing was giving up my personal preferences and focusing myself and the team as much as possible on gaining alignment as quickly as possible. The longer the team debated, the farther away from we were from the goal - getting these components coded.
All The Buttons
The system starts to take shape
You got to start somewhere, and this is where we started. Hair was pulled out, teeth were gnashed, dry erase markers were mangled, but we got to the finish line and settled on this initial system of buttons.
The States
Every state must be accounted for
Moreover, here are the other states as you can start to see here that a system is beginning to develop for how to express each state.
- On hover, go 20% darker
- On press, go 40% darker
- On focus, use a blur outer shadow
- Disabled, use a 40% opacity on text and background separately
- On press, go 40% darker
- On focus, use a blur outer shadow
- Disabled, use a 40% opacity on text and background separately
Now we have a pattern we can repeat elsewhere.
Motion
It's gotta move, right?
Yes, it does have to move. At least that was my pitch to the team. I felt that all of our components need to feel like they are alive, ready to respond, and react. I was and am very passionate about the need for elements like checkboxes, icon buttons, radio buttons to deliver a sense of confirmation to users. If you press me, I respond. The motion sample above was programmed in Framer and then delivered to the engineering team using the following specs:
- Time: 0.3s
- Easing: Bezier In Out Quad
- Scale: 0.97
- Easing: Bezier In Out Quad
- Scale: 0.97
I probably tried 15 variations before we all agreed on the above.
The Results
We got there!
In the end, we got there. We got 30 global components designed and built. The entire system is on Github, and usage guidelines are on the brand site.
