The One Where We Screenshotted 100s of Pages

Using 100's of Screenshots to Templatize Design Variants

Dealing with uncertainties in a migration project

Flashback to early 2022, we landed our biggest migration project to date. Which, for the purposes of storytelling we will call Project X. Champagne was poured, and fireworks were set off. Jokes aside, the team was absolutely pumped about this challenging and exciting new project. It all seemed like a fairytale. The team was confident that we had both the resources and knowledge to ace the scope.

Little did we know, during the discovery phase of the sales/technical audit we committed a critical mistake: we underestimated and oversimplified the scope of the work. Our team was so eager to start working on Project X that we missed analyzing the nuance of it.  

It was not until we started to manage it and look at the data exports of the migration process that we quickly started to encounter some uncertainties:

• There were many stakeholders involved - more than 10! So you can imagine how ambitious it was to get us all on the same page.
• We were working with externally created designs, and we did not get a chance to see all of them beforehand. We discovered along the way the provided designs didn't necessarily align with the existing content and all its variants (but, our lovely clients helped us fix this along the way!)
• We were migrating from Craft CMS - a platform that we have had some experience with, but weren't experts in.
• There were important technical details that slipped through the cracks and we were looking for thoughtful ways to communicate them. The stress was kicking in!
• We were getting ready to migrate thousands of pages, but having a full understanding and visibility of all of them proved to be harder than anticipated.

As you can see from this Slack convo, we knew we faced some challenges ahead, but we accepted them gladly and were determined to find the solution.

Now, spoiler alert: Project X ended up being a huge success, and the client was amazing to work with throughout the whole process. But it almost burned out some of our best people (Max included) along the way. We learned a lot from this experience and we would love to share our insights with you.

In this episode of Insider, Max and Seb share how they managed to standardize dozens of templates with the help of screenshots — and the process that helped bring this project to life along the way.

The biggest challenge: Templatizing

Project X went through many phases and unpredictable challenges, and navigating it felt like going through the weeds. We actually have enough material to make several Insider episodes out of this experience, but today, let's focus on one of the biggest issues we faced: templatizing.

Sooner rather than later, we realized that the deepest challenge was the number of design variants among the pages we had to migrate. There was a lot of complexity to the data that was exported because the template page designs provided by the client hadn't yet accounted for the many legacy variants currently in Craft, or how they could be translated into Webflow.

No one in the project understood the scope of design variance. We were having a hard time getting to the bottom of the total amount of occurrences in Project X. So we started zooming in, and exploring solutions for this.

Key Takeaways

• We do not recommend starting a project without enough visualization of the full scope for migration. Having design variations among pages can set you back weeks of the original scope. So keep an eye on those before closing a project.
• The Blog content we were trying to migrate at first glance appeared compatible with Webflow but ended up having quite a few non-native rich text components. This is something you should look out for during discovery calls with your clients.

Zooming in - Exploring Solutions

1. First Approach: Data-Centric

Having identified the biggest blocker of Project X (design variants), we knew we had to find a way to consolidate all the information and templatize them all. Now, all we had to do was come up with a way to both: (1) explain why templatizing was a good Webflow strategy and (2) set up a process to identify and consolidate variants with the client.

First, we approached the issue by writing an Airtable script to surface these issues. We called this process: HTML Elements Visualization. Then, we organized all the links/pages the client provided in Airtable and looped through them. Finally, we surfaced all the different HTML components they were made up of. This allowed us to compare their structure at a glance.

It was a good start, but not quite the answer. We were able to see some patterns but were still not able to see the full picture. This wasn't super effective because, although we confirmed pages were different and we had to make changes, this tool didn't provide us with a good platform to start working on the fixes.

2. Next Approach: Manual Screenshots

The HTML Elements Visualization was helpful because it clearly confirmed that we had plenty of variants among the templates that needed to be consolidated. But, the hundreds of Airtable records + their HTML elements were very intimidating. And hard to act on. So what did we try next? Manual screenshots.

Taking screenshots of each page (dozens of them) was not going to be a breezy task. We hired a contractor to help with the manual and time-consuming part, and then we created a process:

1. Screenshot every page (using a Chrome extension).
2. Group them by the desired CMS collection.
3. Add the files to Figma.
4. Compare and contrast the sections in Figma, commenting on the differences and potential optimizations to make.
5. Have group sessions with the client to tackle CMS collections one by one, making both design and development decisions.
6. Create optimized/Webflow-ready templates for each CMS collection.

We knew at the moment that it was not the perfect solution either, so we actually played around with the idea of doing it via an API. But, after analyzing that option, we thought it was overkill. The clock was ticking, the client had a hard deadline and this was a good-enough solution.

We are happy to report that it did the trick for us! We managed to templatize the thousands of pages involved and migrate the Blog content for Project X successfully.

Key takeaways:

• Although screenshotting was time-consuming, it really helped align the client and visualize the conversation.
• We did not do this on our own. Our awesome clients from Project X stepped up and aligned their designs to consolidate design ideas in days. They helped us standardize a ton of things.
• We did not come to this process on the first try. Sometimes you just gotta build the house with the materials you have at the moment. And then, you can rethink the whole process for the next project you have.

3. Optimized Approach: Bulk Screenshots via Screaming Frog

Project X launched. Thanks to a great collaborative effort between our development team and our awesome clients, it was a huge success and we were very proud of the outcomes. We trekked forward with the promise that someday we would have an optimized solution to templatize pages during another client migration.

So one lucky day, Max was watching Mason Poe from Edgar Allan use a tool called Screaming Frog (a website crawler that helps you improve onsite SEO) in a Youtube video. We had actually used this tool for a while to do SEO audits during discovery calls with clients but something sparked Max's curiosity from this video. Therefore, he decided to learn more about the tool and present it during our bi-weekly 8020 developer show and tell meetings.

It was in this process of reading docs and digging into Screaming Frog tutorials, that Max discovered the holy grail for our migration dilemma. A feature we've been needing from the beginning: Bulk Screenshot Creation and Download. This allows you to render screenshots from a list of URLs (in different devices) and bulk export all of them. GAME CHANGER! Now we could just export the bulk files directly into Figma to analyze them.

At first, we cried a little to think about all the time we could have saved by using this tool for Project X. But, after that, we were thrilled to have encountered it. We actually just used it in the discovery phase for a potential client with great success. The bulk screenshots help them understand the complexity of their project and visualize challenges beforehand. Full circle completed!

Key takeaways:

Creating screenshots in bulk is very helpful for:

• Spotting design patterns and re-factoring components across a website.
• Dumping screenshots into Figma and doing a technical audit during a migration to spot and comment on technical challenges.
• Determining the information architecture of CMS pages during a migration.
• Spotting bugs or layout issues across a whole site quickly.

Disclaimer — sometimes issues like cookie consent, and interactive pages, can cause issues with Screaming Frog but for the most part, it gets the job done.

Zooming out - Getting visibility on your projects

Now that we have the full picture, we want to share with you some final recommendations when dealing with big or tricky migration projects:

1. The way we navigate the web makes it hard to see things at a high level. It's time-consuming and hard to spot patterns and issues across a large website when the medium is clicking through single pages at a time. It's helpful to find ways to "zoom out" and get a better idea of the whole picture.
2. Quite often, when a project goes off-the-rails, it's because you're caught in the weeds and your team/partners need context (especially visual).
3. Communicating technical ideas in a visual way can be very helpful. You don't know what you don't know and seeing something can be the first step to understanding.

Keep an eye out for future episodes on how we use tools and techniques to visualize big projects.

Key takeaways:

• Don't assume your client knows everything about their own website. Sometimes, team members who built parts of the site are no longer with the company.
• You will be your client's best friend if you can show them information that helps them make decisions or understand a concept.
• Do your best to visually communicate what you're thinking and what you want to share.
• Trust your client. Remember that you are both working towards the same goal. As long as both parties are aligned, you should be able to rally around a common objective and come up with creative solutions that neither could've envisioned if working in silos.

Stay tuned! The next episode of Insider comes out in two weeks. In the meantime, we would love to know: How do YOU help your partners, clients, or teammates zoom out and see the full picture of the projects? Share with us your tips and tricks here.

Hasta la próxima, no-coder!