Optimising the design workflow

Does your design toolkit help you achieve maximum efficiency, collaboration and cost-effectiveness? Take a look at these emerging solutions and see if you can improve performance.

By
Gafyn Townsend
• Apr 05th, 2016

I’ve been a regular user of Adobe products since Creative Suite 2 and have sworn by them. There have been some big changes and improvements to the suite over the years and it’s served me well across print and digital. However, I'm always on the lookout for ways to optimise my workflow, and there have been great strides made in design tools recently.

After all, even if you’re convinced that the products you use now give you all the features and functionality you need, in overlooking what’s new you could be missing out on benefits such as increased efficiency, collaboration and cost-effectiveness. Here are some of the key challenges around those topics that new design tools can address, along with the useful tools I've discovered that are now a core part of my kit.

Being more efficient

No matter the scale or scope of a project, being able to deliver the greatest value is very important. Reducing the effort required for the more mundane tasks allows more time to do what you do best: focusing on solving design challenges. Not only is this good news for a client who is investing in your skills and expertise as a designer, but it’s great for us too (I don’t think I’ve ever heard someone say, “I can’t wait to get this creative finished so I can write the styleguide”).

A simple review of your toolset might reveal that there are products out there to reduce these overheads. The big leap for the more process-driven designers among us is embracing the idea of change - and accepting that there might be better solutions out there than the ones we’re comfortable with. You don’t know until you try, right?

As someone who has relied heavily on Photoshop for the majority of web and UI work, trying Sketch for the first time was an eye-opener. It’s no surprise that Sketch is becoming the go-to software for User Experience (UX) and User Interface (UI) designers; it’s specifically built for them. Rapid wireframing is effortless, whether creating them by hand or using one of the many open-source libraries. These can then be used as a base to craft higher fidelity visual designs - all in one app (and one file - but we’ll get to that later).

Pages in Sketch can be used for versioning and managing artboards when building fidelity from wireframes

New plugins and integrations are emerging daily which help optimise the design workflow. It works seamlessly with Zeplin, an app that makes handing over designs to a development team a breeze. A quick export from Sketch automatically generates an interactive style guide and, by making some layers exportable in the source file (with a single click in most cases), you make them immediately available for download, directly from the Zeplin app.

Making elements exportable in Sketch will add them to Zeplin for developers to download when needed

Communicating more effectively

The big question here is, are static files the best way to communicate an interactive experience? Trying to describe a user journey or an interaction idea can be quite troublesome: “..clicking ‘button 1’ on ‘screen A’ takes you to ‘screen B’ if ‘scenario Y’ or ‘screen C’ if ‘scenario Z’. And the state of ‘button 1’ on hover is shown on ‘screen Aa’...”. Not only are these notes quite difficult to write coherently, but misinterpretation can be disastrous. A client’s expectations might be totally misaligned with your proposal or a developer could waste valuable time implementing incorrectly.

As well as validating your thinking, introducing interactivity early in the design process helps communicate interaction ideas. This way there should be no nasty surprises for:

the development team, who might not be able to implement designs in the way agreed within the scope of the project

the client, who might have misinterpreted your description of an interaction or user journey

the designer, when they realise the designs haven’t been implemented as intended

Recently, when we were extending the DesignSpark platform we've developed for RS Components, we used InVision to rapidly prototype initial designs helping to excite and secure buy-in from key stakeholders. InVision’s integration with Sketch ensured the latest designs were always visible in the prototype by automatically syncing them as fidelity was increased and screens were finalised. Comments could be added directly to the designs in InVision so there was no confusion with referencing the correct UI elements or screens.

InVision allows you to comment directly on the design so no need to reference files, versions or elements

Principle is a handy tool to create more involved interactions. It’s so simple to use, especially if you’re familiar with the Sketch interface. The output is simply a video or animated GIF which is great to show ideas, but probably not for you just yet if you want a fully interactive prototype to share.

Principle is great for interaction design and simple prototyping

Cost savings

Though expensive, I think an Adobe CC licence is unavoidable for most designers. Some clients still request certain file types (such as PSDs) as deliverables and there are some things Adobe does so much better than the alternative products. So, how could reviewing, and probably adding to toolsets, possibly lead to cost savings for designers?

Well for a start, some of the great new products I’ve talked about have cheap one-off licences; Sketch and Principle are just $99 each. And even those that are subscription-based have free starter plans or begin at around $13/month. Adopting a Sketch-to-Zeplin workflow could mean costly Adobe CC licences are made redundant on the developer side (Zeplin plans cover unlimited team members). Or for developers who like to get hands-on with the source files, Sketch is set up in a way that you can include everything needed (wireframes, style guides, vector assets and visual designs) all in one file, so no need to pay for a subscription to multiple apps.

Zeplin plans are reasonable and could allow you to cull some Creative Cloud subscriptions

Is it worth it?

Investing in new software and processes can be pretty daunting. Not do you need to commit to purchasing new software licences, it might seem like a big overhead in terms of time for testing and learning. However, it’s a small price to pay for improved efficiency and collaboration that could lead to saving costs. Using software that optimises workflow will drive up productivity, helping to minimise the risk of project overruns. Also, a tool that allows your team to communicate more effectively ensures stakeholder expectations are met; reducing iterations and re-work.

There are also some ways to minimise risk:

Introducing new software at a critical point in a project or when working to a tight deadline is not a good idea. I wouldn’t underestimate the time it takes to get up-to-speed when switching; even the simplest tools will take some getting used to.

Most software comes with a decent trial period where you can see if it’s right for you before committing to buying a licence or subscription. Start the trial only when you’re going to use it though, otherwise it might expire before you’ve had chance to explore.

Use your trial period to create at least one thing that’s both worthwhile and relevant to the work you normally do. Creating something just for fun is great but you could end up buying into a product only to later discover it isn’t suited to your day-to-day work.

Read/watch user reviews and tutorials - there are many resources out there that will help you decide whether the features are what they claim to be.

Most importantly, give the tool a chance and if it’s not right for you or your team, don’t change just for the sake of it.

About the author

Gafyn Townsend

Skilled in both digital and print media, Gafyn Townsend has built up a wealth of design experience through roles in both in-house and agency environments. Collaborating closely with the user experience team at Box UK, Gafyn particularly enjoys visually enhancing wireframes and prototypes for maximum impact and effect.