Case Study · Pieces of Flair

Tackling subtle design debt in a meaningful way

user experience visual design

TL;DR: — We've all heard of tech debt, but what about design debt? Those are what I called my "pieces of flair", which are very small design tweaks on a live product to help it look more cohesive and put together.

02. What are "pieces of flair?"

we need to talk about your flair

In an agile and scrum world, our development happens one ticket, one block at a time, to build this entire beautiful product. And with that comes its share of bugs, but also design flaws that maybe weren't there before the last release. The bugs get fixed, of course, but what happens to those teeny-tiny design changes? Eventually, they build up and become more obvious, especially to a designer's eye.

These "pieces of flair," a name borrowed from the infamous Office Space reference, are a list of very small design tweaks that help make the product's UI look more put together, or "have flair." I would compile a list of at least 15 design items and present them in a development ticket (or multiple tickets, if needed) to be fixed. These tickets turn out to be great for developers who might be on a shorter schedule that week, heading into the holidays, or just looking for one last ticket to squeeze in before a new sprint starts. We were able to get through two rounds of flairs for the product, with a third almost finished totaling 38 pieces of flair completed.

03. Example Flair

the flair is about fun

1. Taking a text-transform off of title texts

Feedback from users said caps only headers were in the way of writing out elemental compounds

2. Adding decorative elements to sections

Adding a 4px border at the top of the page helped to anchor and call out the box

3. Aligning tabs between products

tabs should look the same between the two products. We went with a solid and grey approach, getting rid of the outlined ones.

4. Designer differences

before a component is officially added into the design system, sometimes different designers can come up with different looks. This flair brought them back to looking like siblings, as opposed to cousins.

5. Reducing Padding

Even a small 8px reduction in padding can make a big difference