Redesigning with confidence

How I used Percy to redesign Percy without breaking a sweat.

At some point, everyone ends up with a UI that looks dated. Our collective tastes change over time—shiny becomes matte, squares become rounded, skeuomorphism becomes flat, or maybe even your logo changes!

We recently went through this transition ourselves. We picked a new color palette, launched our logo, and refreshed our whole site to match. It was pretty surprising to look back at the end and see how dated and old our previous design looked compared to the new one:

“Percy classic” vs the new Percy

No matter how hard you try, it’s just inevitable that one day you’ll wake up and realize that it’s time to embark on a redesign. You’re super excited! You spend weeks or months of effort iterating on designs. The process goes well and your new design is ready. You’ve done lots of manual testing, your QA team is happy, and management loves the new look.

It’s time to deploy, but you’re feeling a little nervous. Why? It might be that sinking feeling when you realize there are literally thousands of UI states in your app and there’s simply no way you can check them all.

For each screen you might want to check:

Different user journeys

Different data states

Different screen sizes

Success and error states

And the list goes on, and on.

For any app, number of screens × user journeys × data states × screen sizes × success/error states = 😱 a tremendous amount of manual QA to do.

In reality, you simply don’t check everything. Instead, you cover what seems important and hope for the best! It’ll be fine, right? Right??

Not even the most diligent teams get it totally right. Shopify for example, recently rolled out a new design system called Polaris, which essentially redesigns their entire product. Soon after launch I found an issue and tweeted:

A misaligned logo in the footer. It appears the ‘Creating a staff account’ screen had not been checked recently before the UI roll out, an easy mistake to make.

So, how can we possibly have full confidence in our redesigns?

Redesigning Percy with Percy

For our redesign of Percy, we of course used Percy itself to review every visual change before it was even merged in.

I’ve done two major design updates to Percy recently, including changing our logo and entire color scheme. Was I nervous on deployment? Not even a bit! Only excited! 💃

Design Iteration #1 : UI consistency

There were a number of visual inconsistencies around the UI that had collected over time. They really bugged me so I decided to dive in and fix them. Soon enough I was changing stuff that affected the entire app and I was getting worried that I’d broken something that I hadn’t manually checked.

Thankfully though, we have Percy set up to take snapshots of our app at key points in our Ember test suite. I was able to quickly review exactly what visual changes I was making across hundreds of screens.

For example, here is a snapshot from one of our acceptance tests which creates all possible states of a build row component: