300+ Web Pages in 3 Months

Yeah, that happened. CD Josh Souter on putting Adobe XD to work.

Image source: Josh Souter, Senior Creative Director, Adobe.

It’s human nature to stick with the tools you know best. But what if there’s a better way?

Adobe.com needed an overhaul. As in, 300+ enterprise product pages — re-architected, rewritten, redesigned, and republished.

And the timeline had just been cut from 12 months down to three.

Adobe’s Senior Creative Director Josh Souter wanted nothing more than to lock himself in his office and binge-watch YouTube videos.

To complete the project on time, he needed all hands on deck and then some. “We immediately gathered the wagons — UX designers, writers, developers, product marketers, web strategists, customer relations, and sales,” he says.

“Within a week, we kicked off rounds of customer research, brought in an army of external agencies, and even started building rough prototypes. It was kind of like hitting the ground running, but completely engulfed in flames.”

And that wasn’t all. “Maintaining any semblance of process and consistency was going to be the bane of our existence.”

Another significant factor at play was that all the webpages had to incorporate the Adobe design language, Spectrum, via the Adobe Design System team (also involved in the project). “With so many moving parts at Adobe, Spectrum is the way we ensure brand consistency across the board,” Josh says.

Sometimes insane projects require a new approach

Josh puts it this way: “Imagine you have three hours to cut down a tree, so you spend two hours sharpening the saw… only to find out there are now 300 trees.”

In other words, sometimes you need to upgrade to a chainsaw.

While first instinct was to turn to Photoshop and Illustrator, Josh’s team was willing to take this opportunity to put Adobe XD — the chainsaw — to the test.

Here were three lessons learned:

1. Consistency and accuracy become your friends

Maintaining style consistency was not only doable, it was scalable.

Both the Character Style and Symbols panels in Adobe XD were integral to incorporating Spectrum. The Symbols panel held all the typography and colors from the Creative Cloud Library, which is where Spectrum is set up and tied into JavaScript and CSS styles.

This meant that all global styles — repeating symbols that never change — were easily accessible in one Creative Cloud folder, and dynamically kept up to date, along with button styles, typefaces, etc. that had previously been extremely hard to track.

“Essentially, we were able to work with single documents of truth rather than 50 Photoshop and Illustrator documents, which is what it would have been in the past,” Josh says. “It was incredibly fast to not only jump between artboards but to make changes with a simple copy and paste. And all these things made the collaboration much, much easier.”

2. Prototyping saves far more than it costs

When you can play with the functionality instead of simply looking at it as a flat PDF, the review experience becomes truly immersive. And review cycles inevitably shrink.

In one example, the team had created a vertical carousel as a new way of exposing content vs. a more common horizontal carousel. The new design emphasized imagery and relied on movement, so the concept wasn’t exactly easy to convey.

“We tried to sell that new functionality using PDFs, and it just didn’t translate. The stakeholders couldn’t envision how the interactions would work,” he says. “Yet once we built the prototype in XD, it made all the difference.”

3. Collaboration is easier when you can publish right to the web

It sounds like an overstatement, but it’s true: team reviews became as easy as clicking a link.

With Adobe XD, you can publish a prototype right to the web — a quick and accessible way to facilitate reviews and ensure timeliness, especially when multiple teams and stakeholders are involved.

“We would publish a prototype to the web, and everybody could comment on it,” Josh says. “We used this feature with every set of page launches we did, and it was a game changer for not only collecting review feedback, but for tracking and resolving issues.”

Big stakes, big success

Sometimes it pays to try a different approach.

More than 300 web pages in three months did happen, thanks to Adobe XD. Josh’s team was able to collaborate across locations, departments, and all external stakeholders, ensuring consistency and quality control with a new level of speed — all at an enterprise-level scale.

Updates to Adobe XD are happening all the time. And be sure to check out last month’s webinar, ‘Show them what you’re thinking – Mapping the user journey,’ which features Souter along with Chris Converse, designer and developer at Codify Design Studio.