We are proud to introduce a ground-up redesign of Percy’s visual review experience! It’s designed to support more browsers and help you perform faster, more efficient visual reviews across thousands of screenshots.
When we took this project on, we had some clear goals in mind—we wanted to help our users:
- Work with larger builds and still be able to achieve speedier reviews
- Never lose sight of where they are in the build
- Have the flexibility to configure their layout, their way
- Tune out distractions and work with improved focus
- Leverage all this while retaining the inherent essence of Percy that they have grown used to.
Let’s go through some of the features we have added to support these goals.
1. Enhanced Performance: Review more in less time
- Keyboard shortcuts: Nothing is faster than navigating builds with keyboard shortcuts. We have added shortcuts for many common functions and here are the important ones:
- ↑ and ↓ to go to the previous/next snapshot
- D to toggle the diff overlay
- A to approve
- T to toggle between the Dark and Light modes
- Faster loading builds: We have optimized our APIs that back the UI to speed up the initial load time of the build. Minimal time is spent waiting for builds to load so you can get on with your review immediately.
- Create and review larger builds: We have rearchitected our API to make builds more scalable and performant. We now support builds with 10,000 snapshots or more.
- Snapshot search: Built-in search helps you easily find a particular snapshot, or group of snapshots with a common name, with ease.
2. Improved Context: Clearly see where work stands
- Visual change indicator: With our handy visual change indicator, you will never miss a diff again. A purple underline guides you precisely to the browser-width combo where a change has been detected.
- Snapshot thumbnails: Build details are available at a glance with snapshot thumbnails allowing you to quickly browse your build, no matter how large, at a high level.
- Filter snapshots: Filtering snapshots allows you to review exactly what you need to. Snapshots can be filtered by status, widths, browsers, changes requested, and also unreviewed or approved snapshots.
3. Better Flexibility: Customize your layout to your liking
- Snapshot review modes: Snapshots are placed adjacently in the Side-by-side mode and stacked vertically in the Overlay mode. You can toggle between the two easily and control the arrangement. Pro tip: ← and → in Overlay mode toggles between original and new screenshots.
- Configurable panels: Our flexible panels remember how they were configured. They can easily be resized, and even be collapsed altogether for a clutter-free view, with a simple click.
Pro tip: the [ key toggles the filter panel.
4. Greater Customizability: Choose what’s best for your web app
- Light and Dark modes: It's more about visual ergonomics than aesthetics. Choosing the right mode will give emphasis to the snapshot that is being reviewed and help you stay focused on it. You can quickly toggle between the two modes by pressing the t key. Pro tip: Use dark mode for lighter apps, and light mode for darker apps.
We are happy to see that the redesign has been well received by our beta users—here’s what they have to say about it:
“Fantastic, loving it so far!”
“Just tried this new experience on a few builds and it looks great overall.”
“We like it a lot so far. Just much easier to see everything at a glance, and go thru long lists of screen diffs.”
"Way easier and faster to use"
While hundreds of users gain visual confidence with their apps using Percy, our team is working behind the scenes to enhance Percy itself. You may not be able see each one of those changes, but this is one—and a big one at that—that we’re excited to share with you. We hope you enjoy using it as much as we did building it!
