Percy.io gets a new look
I’m very proud to announce the new version of Percy.io!
This is the first full site redesign since we launched Percy over three years ago.
We’ve completely updated the way that we talk about Percy, how we explain why we do what we do, and adopted our own new 3D illustration style.
It’s not just shiny on the outside, it’s full of new tooling as well to help iterate in the future. We adopted Contentful as our structured CMS (amazing), LaunchDarkly for developing fully in prod behind feature flags (a true joy, more on this below), and of course we added many new Percy snapshots for ourselves to test across browsers and responsive widths before launch (saved ourselves pain many times!).
We completed this entire redesign in-house, and are lucky to have talented people across marketing, design, and engineering who could tackle this ambitious redesign with a careful eye towards Percy’s brand and style.
I want to give special shout-outs to Payton, who drove the entire content strategy and revamp; Derek, our amazingly talented and masterful product designer (who did all the 3D design and rendering himself); and Lindsay, our amazing, problem-solving, data modeling, Ember wizard. (By the way, we’re hiring!)
In celebrating with the Percy team, I wanted to take a moment to share a bit about why we undertook this redesign, a bit about our process, and what’s in store next.
But first, a very quick look at Percy.io through the ages…
The evolution of Percy’s website
We recently celebrated our third birthday, wherein we reflected on three years of learnings, product feature announcements, and company evolutions. In addition to those milestones, our website has also evolved since our founding.
In the first hour of Percy’s life, written hastily at a conference, it looked like this:
Last year we got a new logo and a refreshingly royal palette (I didn’t really realize how much I loved muted colors until people started pointing it out!).
Since Percy stores a history of every change we make to our own website, I went back in time and grabbed some history of the homepage:
I love seeing this progression and how much we’ve grown across features, customers, and our unique style. Of course, the new site is much more than just the homepage — make sure you check out the design of the rest of the site.
Why redesign Percy.io?
Our past websites served us well at each stage of our growth and evolution, but we were very ready for an overhaul.
We were starting to notice a misalignment between our internal identity and external perception — it just wasn’t representing us how we felt it could and should.
It certainly was no longer conveying our excitement and passion for the product we’re building, it wasn’t telling the whole story, and it wasn’t helping us answer the questions that kept cropping up from prospective customers.
As we extend more broadly into the developer, designer, and product communities, two simple recurring questions in particular gave us our starting point:
“What is visual testing?”
We’re in a very young space. Sometimes we forget that most people don’t know what visual testing is in the first place, how it helps, or how it’s different than what they’re doing now. We want to make sure to share the tangible and intangible benefits of adopting this new way of thinking.
“How does it work?”
All of our customers have different use cases for visual testing, and want to understand how Percy fits into their environment, technologies, and workflows. We have built up quite a bit of support for CI services, languages, frameworks, etc. and it is important for us to distill down the core of how Percy works for you.
Starting to answer these questions better has been our goal.
The process
I won’t go into detail about what kinds of brainstorming sessions we had, and what CSS classes we used, but I will say that what you see today is the result of a lot of hard work from our whole team. From ideation, writing, and designing to data modeling, coding, and testing–this was truly a team effort.
👏👏👏
I would be remiss, however, if I didn’t talk about dogfooding. Of course, we built Percy.io with the help of Percy, and it made all the difference.
The combination of LaunchDarkly feature flags + Percy visual testing was a powerful one. We were able to keep our PRs lean, our team was able to see and test the new site in prod before releasing to the world, and having Percy snapshots for both the feature flag ON and OFF states gave us full confidence that we weren’t breaking the existing site while doing all of this redesign work underneath (for example, we caught it before we broke icons site-wide).
As a flow, this felt very enabling for this fast-paced project and helped us get to our deadline faster.
Being ~100% confident when launching a major website overhaul is a big deal, and still thrills me with how fast it helps us move. Using Percy itself in this redesign also spurred new ideas and plans for use cases we will experiment with in Percy in the future.
What’s in store next?
We hope that this will give us a solid foundation to iterate upon and evolve over the next several years. In that time, you can expect more customer stories to surface, more diverse kinds of content for different types of learners, and more in-depth documentation for how Percy works.
As part of this unveiling, we’re also kicking off a short four-part blog series on our product.
In this series we’ll take a deeper dive into each part of Percy—smart diffs, review workflow, rendering infrastructure, and integrations—how we’ve approached building those features, and some pro tips you might not have known. Click ‘Follow’ below to get updates!
As always, we would appreciate your thoughts and feedback! Send us a note to hello@percy.io or send a tweet to @percy_io.
Percy is a visual testing platform that gives your team confidence in every visual change before it’s shipped. Learn more at https://percy.io.💜
