Why not do it in XD?
That is the usual line we hear before starting any project these days.
Adobe’s latest prototype software’s seemingly unlimited flexibility is not only its blessing but its curse – in the best possible sense. Its ability to lend itself to almost any creative task puts it firmly in the frame whenever we are discussing upcoming work (even if it isn’t entirely suitable) – or indeed reviewing previous projects that, in hindsight, we could have done in XD had it been in creation. Move over indesign, know your place – essentially.
And, because of XD’s complete willingness to bend itself whichever way we demand it too, we at Graphitas have taken it upon ourselves to try and bend it as far as we can to see if we can break it. We are very much advocates of blue-sky thinking and will always try to find solutions that offer the end user the best possible experience no matter what hurdles we have to jump (and sometimes trip over) to get there. So, with this in mind, when round-tabling the best way of producing an event planner for the upcoming Lowestoft First Light Festival, there really was only ever going to be one solution – an interactive XD prototype timetable application that we could share with festival goers to use on-the-go at the event. Simple right?
On the surface – yes. Take the festival information, make it look pretty within XD, join a few pages together, create the link with one easy click and then share with the public. Kudos Graphitas.
Not quite so much. With its simple toolset and interface (effectively Indesign diluted down), the design came together quite nicely, but the complexity arose taking this design and turning it into an all-singing-all-dancing ’app’ using prototype software and the limitations that come with it. And before I elaborate on this and potentially imply that XD has certain weaknesses and pitfalls, I would like to put it in some context. XD is immaculate at creating prototypes for all manner of digital design. Websites especially can be visualised for every platform and browser imaginable in no time whatsoever, and the software has positively transformed the way we work at Graphitas for the better. The problems I am about to highlight are purely due to us using XD as it wasn’t intended and urge you to bear this in mind.
Artboards are a major contributor to the challenges that can arise when creating designs that involve multiple duplicate pages – as our festival timetable app did. On the one hand it is great that you can create limitless artboards that link so seamlessly together with a multitude of transitional effects that make you feel like a master of digital animation. But on the other, if you make a mistake or want to change a small thing like the location of a home button (don’t ask), it leaves you crying out for an indesign-style master page that allows universal changes whilst you painstakingly amend each individual XD artboard one at a time. A major saving grace though is XD’s ability to allow ‘copy’ and ‘paste in place’ with pasted objects retaining the same properties as the element that it was copied from, such as page link information and any animation style that is already applied. So it is a time-consuming issue rather than a major dilemma.
Another artboard-related concern that is only discovered the further down the ‘using-the-software-as-it-wasn’t-intended’ rabbit hole you go, is the inability to link a button within a page to the actual page itself (why would you do that anyway, I hear you ask). Well, due to the shear amount of information and depth of the timetable that had been created, I felt that, after scrolling to the bottom, users might like a ‘back to top’ button option rather than spending the few seconds it would take to scroll back there manually (and as you may know, here at Graphitas we are all about the #makeuxgreatagain). So, I went naively into ‘prototype’ mode on XD (this is where the interactive XD magic happens, such as our personal favourite ‘auto-animate’ – just ask Elliott) and tried to link the ‘back to top’ button to the actual page it was on so that a simple click would magically jump the user back up the page. Nah-uh.
As it stands this is not an option within XD (and for what the software is designed to do, why would it be?).
What is an option is to duplicate the page, so that you have a replica version that you can now link your button to and therefore achieve the same desired affect. So, what is the problem? Well, when you have a document with over 20 pages already – linked together with a spider web of blue veins that is pushing all sorts of internal OCD buttons you didn’t realise you had – having to duplicate said 20+ pages… well you catch my drift. We also found to our delight, after sunlight had long disappeared from our newly created XD rabbit warren, that the more pages you have, the slower the response of the ‘app’. Not the best UX for however many thousand festival goers we were essentially targeting to give them a better event experience. So after a little deliberation, the button was reluctantly removed and over 20 pages deleted in the process. Perhaps a small price to pay for a smoother finish – but an indicator nonetheless of complications that can arise when you push the boundaries of XD.
This article may cover issues that most users won’t experience (especially if you use it correctly!) but at the same time it highlights XD’s creative ambiguity and our insane desire to push the software to its limit. And, to XD’s credit, it largely withstands the relentless pressure we place it under. Even problems that we find, such as that with the ‘back to top’ button, has a fix to it or a way round (if sometimes a little long-winded). XD also has the ability to add custom made ‘plug-ins’ that help make the general experience easier, so certain problems you encounter can be easily remedied on the spot with the right tool add-on. Such is XD’s potency to execute numerous varied projects so efficiently we could be accused of over-using it, with the timetable app a perfect example of this. And it won’t be the last time we abuse XD’s willing nature as we firmly position ourselves as pioneers of the software – something Adobe themselves are fully aware of as we keep them suitably up-to-date with our XD exploits.
Wow, this looks great! 👏 ^AF
— Adobe XD (@AdobeXD) June 21, 2019
So in summary, can this project be considered a success despite its pitfalls and stumbling blocks (several of which have not been mentioned in a bid to try and keep this a manageable read)? We think so and you can be the judge as the published ‘app’ can be found here.
The ‘app’ was well received at the First Light Festival (which was a resounding success in its debut appearance in Lowestoft) and more than 2500 people interacted with it – that we know of at least. Adobe tweeted its approval at our daring attempt and generally speaking the finished product was fit-for-purpose and a gratifying example of XD’s almost limitless potential. It certainly has given us at Graphitas food-for-thought as to how we can next unapologetically abuse the software’s flexibility and has also proved a very potent learning curve that will put us in good stead for all future XD-based projects.
