Solving a common UX debate: which design tool to use?
Has your design team been trying to figure out which UX design and prototyping tools to use in your design process? You’re not alone — here at Alchemy, we’ve been finding ourselves using a mix of traditional design software and UX prototyping tools throughout our design efforts and began to discover it was becoming disruptive to our process.
Our design team comes from a variety of backgrounds and adopted design tools. With diversity across brand, visual, user experience and interaction design, we’ve each had familiarity with a host of tools so many of us in the design community have used for years. From Adobe tools such as Photoshop and Illustrator to newer tools like Sketch, Figma and Adobe XD, we’ve been debating what it would look like if we all adopted the same platform in our design process to reduce disruption and design inefficiency.
Our design tool problem
There’s nothing wrong with picking up a variety of tools to knock out your design work, but the repeated issue our design team began to encounter was, for design teams that commonly collaborate and share, switching tool context between (as an example) Illustrator to Sketch can get really difficult, especially in team collaboration. When you’re building a pattern library, you can’t easily take Illustrator patterns and plug them into Sketch. For multiple designers working across a single product, it becomes impossible and time-consuming to share assets. It results in duplicated work, repetitive pattern building and the bigger risk of fragmenting your UI patterns as each designer might have a slightly different adoption and integration. There is a lot of wasted time through inefficiencies that can, with today’s emerging tools, be drastically cut down to streamline productivity.
The impact won’t stop there — it will spread outward as we share our designs with our engineering team, which will be looking at each design to determine and follow our design specifications to help guide their front end work. We don’t want 3 slightly different versions of a primary button call-to-action or any ambiguity in the way we lay out form fields within a view.
The solution and challenge? Let’s find a common toolset we can all adopt and share as a team for greater productivity, efficiency and to preserve our unified design vision.
But how do you determine what tool to use?
To start, our team shared UX design and prototyping tools they’d used or knew were highly successful in design work. Our top UX prototyping tool candidates came down to:
*Not yet released, so this was crossed off our list (to our chagrin — we can’t wait to get our design hands on this and test it out)
Wait … but how can you abandon Photoshop and Illustrator? Before we dive into our process, I want to address that nowhere in this list was our most historically well-known design tools. This was because, while those software programs have long been our go-to best friends in our design process, we quickly compared capabilities and knew that these tools wouldn’t fit our current needs. There is a lot of lost time wasted through inefficiency of having to repeatedly revise elements to repeat patterns already existing in our designs. While they have their use in our design process, they are now lacking in many of the capabilities the newer prototyping tools offer.
Tools like the ones we reviewed above make it far easier to create these UX/UI standards and retain them — quickly using them over and over without having to ever waste time revising and perfecting in pixels. So for that reason, we agreed those tools would be used for more graphical and vector-based purposes only.
Our final chosen team candidates: Sketch and Adobe XD* due to the most robust, customizable features that we could quickly adopt as a team
*Figma was dropped as we found it didn’t have all the capabilities the other two had — plus we wanted to minimize the comparison time to quickly get our team adoption process up and running
How do we fairly assess which tools to use?
This was our next question — we had our top candidates, but now we needed a method to compare and contrast their capabilities in context with our needs and processes.
Enter the scene: a team mini-design hackathon.
We decided we would pit these tools against each other in a mini-design hackathon: take a common problem (our constant), and test each tool (our variable) against our natural design process. We highlighted the top needs and common usage patterns we found ourselves individually and collectively adopting when using these tools. From this, we had a decent baseline of criteria with which we could narrow our list:
From this, we could better rank and analyze the usability, effectiveness and customization of each tool within our design process.
And so our adventure began — ready, set, prototype!
We kicked off our hackathon and the biggest three activities for our session included:
- Tool Demonstration (15 minutes per tool): A quick overview of the tool followed by demonstrations of top features and capabilities
- Tool Challenge (20 minutes per tool): Review challenge problem and use each tool to produce low-fidelity wireframe designs through high-fidelity mockups*
- Team Review & Voting (20 minutes total): Use a modified version of the Agile-esque 4L retrospective method to review the tools
So … which one did we land on?
The moment finally arrived — we went through our 4L review and gave ourselves 4 minutes to individually review and vote. The silence was fraught as we pondered and fretted over the criteria list and our knowledge and takeaways from our demonstration and challenge exercise.
Having reviewed and discussed our considerations, we cast our votes and …
As you can see from our photo vote spoilers, this was no easy feat. Two solid Sketch votes (one from a strong Adobe XD proponent to boot!), and one tentative Sketch vote (from myself, who had admittedly been leaning very heavily in favor of Sketch at the start) and an XD vote (which came down to global symbols as the deciding factor).
The decision was made: we reviewed our votes as a team and came to an agreed team adoption that we were comfortable adopting Sketch with Craft Manager as our new unified design tool to be used in conjunction with InVision App. We acknowledged some of us were more familiar with the tool than others, and planned as a team how to help onboard and make the learning curve for anyone less familiar an easy process.
How has our team use of Sketch fared since that time?
We ran this hackathon December 19th, 2017 and have been actively using Sketch across our entire team since that time. Excitingly, we’ve continued to use Sketch and found that we were able to navigate learning curve limitations well both individually and as a team. It’s also allowed us to better establish a global pattern library and design language across product work and easily share and collaborate across our design team. We will continue using this and evaluating any new tools.
How was this process? Overall, our team felt this process was a helpful way for us to truly compare, analyze and test tools in our design process so we could feel confident in choosing a platform that worked for our design process and work.
Questions? Comments? You can reach out to me at becky@alchemy.codes or contact our design team at hello@alchemy.codes.
Fun fact: Alchemy is hiring!
We’re excited to be growing our team and are currently on the lookout for: UX designers, UI designers, front end developers, and backend developers. Apply in the Join Us section of our website: http://alchemy.codes/ (or just email us too — that works just fine). Perks include an awesome team, downtown Cincinnati views, daily ping pong battles and occasional team french toast brunches. It’s pretty rad.
