Why My Agency Made the Move from Sketch to Adobe XD

Image courtesy of MullenLowe Profero.

by Rachel Wells

posted on 12-19-2019

When designing digital experiences, one of the most common challenges we’ve faced historically has been helping clients to visualize what an end experience will look and feel like. Some clients find it easier than others, but understandably for those who are newer to digital transformation, a high-fidelity prototype is needed to help them understand our vision of the final experience before they feel comfortable to sign it off as a concept.

Adobe XD has been an amazingly powerful tool for our digital design team at MullenLowe Profero in London and has offered us a totally new way of working. In the last year, we’ve completely switched from Sketch, standardizing and streamlining our design process exclusively using Adobe XD. What we’ve discovered is a whole range of benefits for our clients as well as for our own internal team.

Making XD the standard

We first introduced XD into our design process during a project to redesign the website for Wagamama, a large UK restaurant chain. Our brief was to completely reimagine the site, encouraging discovery of their extensive menu and better telling the brand story by bringing soul to the experience.

Using a sprint methodology, we bought together an internal team of strategists, technologists, UI designers, UX designers, and motion specialists to tackle the challenge. XD allowed us to experiment with various iterations of our prototype that the whole team was able to work into before presenting to the client.

As avid users of Photoshop and After Effects, we found the cross-platform support and integration with other tools that Adobe XD offers were especially helpful throughout the duration of the Wagamama project. Whilst prototyping in XD is usually enough, this redesign project involved some heavy video components within the creative solution. For the first time, we were able to export from XD to After Effects simply and easily. If we had done this in Sketch, it would have required multiple file conversions or plugins to begin animating it in After Effects.

At the start of this project, we were a Sketch shop. In less than a year, we switched to and standardized on XD and now use it to work with Wagamama on several other digital initiatives.

Winning over clients faster

The nature of digital transformation and working in agile means very fast paced projects. We’re a small team who punch above our weight and so are always looking for ways to make our design process more efficient. Being able to do everything in Adobe XD— wireframe, design, prototype, present, and share—has allowed us to iterate so much faster than we were able to before.

With our client Art Fund, a national UK art charity, we had just six weeks to deliver a redesign for the Student Art Pass website. Within a few days from briefing, we had designed a small animated first prototype to share with the client. Having such a realistic example to show in the first design review has been a game changer for us because clients don’t expect that level of polish so early in the design process.

With XD, our UI designers can quickly create demos for clients that are much more highly animated than they were using Sketch, without the assistance of a motion designer or the need to convert files. This alone simplifies the workflow significantly and keeps our teams lean. With fewer people involved, we’ve found the other advantage is that designers working on the project have a much greater sense of ownership and can see their own creative idea through from start to finish. A more concentrated team results in products that are truer to the original vision.

If we had done this in Sketch, we would have needed a UI designer to first create the layout and design elements and to then bring in a whole host of plug ins or alternative prototyping software in combination. We may have even engaged a motion designer for a longer period.

Working better together

Handover of projects between the design and tech teams was also a challenge in cases where we use our global offices to support with larger projects or third party suppliers. Our International Delivery Centre (IDC) developer teams work on PCs. Because Sketch is incompatible with PCs, we had to convert design files before sending them or use other software such as Zeplin to help provide a detailed package to ensure a smooth build. This was often a lengthy process and still meant that our developers didn’t have the original files to work with.

Switching to XD solved this problem and made it easier for us to collaborate with our developers and with agencies abroad whose developers use PCs. Our developers were also really impressed with the quality of the code and CSS design snippets that XD is able to provide, which makes the design-to-development process run even more smoothly.

XD has also meant that our clients are able to collaborate with our team much more easily. During reviews, clients can access prototypes with a browser link and add feedback right over the specific design element that needs work, rather than trying to explain exactly where they’d like changes made, a process that often resulted in miscommunication or lengthy emails. Adobe XD eliminates a lot of guesswork, so we don’t have to go back to them for clarification, or risk redesigning the wrong elements. We can also share assets internally and externally through Adobe Creative Cloud Libraries.

Pushing the boundaries of design

We’re continuing to experiment with the tool. For example, we’re seeing more demand for voice work from some clients. Before XD, our development team handled this. Now, we can save some of their precious time and create voice prototypes within the UX and UI creative team using the voice triggers and speech playback features in XD.

Adobe XD enables us to work a lot more efficiently and collaborate more effectively with our team and clients alike. We are excited to continue pushing the boundaries of XD to create exceptional digital experiences.

Topics: Creativity, Design

Products: Photoshop, Creative Cloud