How Adobe XD Makes it Easier for Our Designers and Developers to Work Together

Image credit: Posterscope.

I got into the design field at an early age—12, to be exact. Back then I didn’t think that getting caught drawing Batman on the covers of my school books would lead to anything other than detention, but I was wrong: two years later, my first commercial illustrations appeared in the secondary school exams given to students in the UK.

A few decades and several jobs later, I became the global design director for Liveposter. Liveposter is a dynamic adserving, digital out-of-home (OOH) platform that allows us to create campaigns that connect with consumers’ behaviours: delivering the right message, at the right location, at the right time. Rather than the traditional two-week posting, Liveposter capitalises on the digital OOH revolution (now over 50% of all OOH revenue in the UK) by serving dynamic creative solutions that can be updated in real time by week, day, or time, or by any other selected trigger such as client sales, location, and so on. For example, we can serve an ad for an ice cold beer when the thermometer reaches a certain temperature, or a brand can change their prices at the drop of a hat in response to a competitor’s offer.

In 2016, Liveposter was fully acquired by Posterscope, the world’s leading location-based marketing agency, in recognition of the importance of being able to deliver dynamic content on a global scale. From 2018, dynamically-enabled campaigns accounted for 40% of digital OOH spend within Posterscope UK, and is growing in other network markets. These highly customised campaigns on behalf of our clients – including Microsoft, Diageo, BT, Shop Direct, Mondelēz, CCS, PVH, Dell, and Heinz—delivered noticeable success on performance. Liveposter is now fully integrated into Posterscope’s ECOS platform, an award-winning proprietary analytics, planning, and trading platform.

It was here that I was introduced to Adobe XD. Today, I use it regularly in my role as a consultant for Posterscope, in my ongoing work on ECOS and Liveposter Platforms.

Built to scale—quickly

Prior to Posterscope’s acquisition, we used Sketch. However, due to being a Mac-based product only, developers and product managers at Posterscope who were PC-based were unable to use it. We needed a solution that worked across all parties – designers, developers, and product managers. The cross-platform abilitities of XD provided the answer we needed, with the added benefit of working seamlesslessly across our other Adobe Creative Cloud workflows involving Photoshop, Illustrator, and After Effects which enabled our designers to learn the ropes quickly.

Our first project using XD was to protoype the Liveposter website. However, it really came into its own when we start the process of improving and redesigning the UX and UI for ECOS platform.

We focused first on creating a UI kit, which then lead to a full design system built and subsequently updated in XD. The UI kit enables us to create workflows that are completely ingrained into our process. Our Design System enables our teams to standardise and consistently create and develop components and products. We’ve gone from having minimal collaboration between developers and designers to cultivating a core group that builds functional design systems using human-centric design principles and agile development.

With XD, we can release updated prototypes on a weekly basis and skip wireframes altogether. We test our ideas using fully rendered UI components in XD—the same ones our developers use in their UI component library. This alone has saved us an incredible amount of time as we no longer need developers to mock something up so that we can test it with users. Now, what you see is very close to what you’ll get. We cut the feedback loop from months to days.

Updates to the master UI kit are reflected everywhere, giving us control of all the components within the design system. That means people can use approved assets to build their own workflows and remain on brand. Before XD, we would often receive requirements without any of the required design. Having specs accessible to developers in XD eliminates this and saves us hours on projects.

Intuitive for all

Our process efficiency will only accelerate as we build more components and teach more people in the organization how to use XD. For example, project managers and business analysts are catching on to XD quickly, and can build components in XD to test out an idea on their own using existing patterns we’ve already designed rather than having to allocate time with a designer.

One of our first tasks was reworking the Liveposter scheduling system in XD. This system allows for unlimited creatives to be automatically scheduled. As some of our client’s OOH campaigns can include literally hundreds of different OOH creative, this has produced massive time efficiencies. As we continue with our UX and UI redesign of the ECOS platform we are seeing these savings and better engagement from our users, at every stage.

By using XD to create our own UI Kit, using shared libraries, we have also standardized the look and feel of the platform with obvious yet effective design principles—such as consistent typography and button placement. This lets us bypass low fidelity wireframes and instead create high fidelity clickable prototypes in XD that we can test with users immediately.

We couldn’t have done this without XD. It’s been a hugely valuable tool as we look to scale our services and keep iterating at the speed our clients need.