1. Web Design
  2. UX

Ship Better Experiences with a Lightning-Fast UX Workflow

Read Time:3 minsLanguages:

Efficiency is a nerdy fetish of mine. As User Experience Designer on Envato Market, I’ll look into anything that even hints at speeding up the process of getting feedback on a design idea. A shorter feedback cycle means shipping higher quality features faster to the benefit of our community.

Swiss Army Knives are False Promises

My first Eureka moment on the quest for the holy grail of design workflows was discovering Axure (and subsequently UXPin). I would spend weeks in it designing, then validating the prototype with user tests and refining as needed. This process is infinitely more agile than the traditional way of keeping a myriad of Photoshop files up-to-date, but it leaves out a key factor: constraints emerging during development.

Sure I’d share the prototype with developers to get their input, but one can only predict so many hurdles in advance, and not all of them were “developer problems” anyway. The logical nature of programming reveals design flaws that cannot be foreseen when looking at a paper sketch or wireframe. Knowing this earlier would have saved me from iterating on a design that was destined to head down the wrong direction from inception.

Like others aiming to get out of the deliverables business I needed a workflow that would encourage designs to be a disposable communication tool, and not a deliverable.

The Über-efficient Way to Get Fast Feedback

The following tools are the ingredients to the most efficient workflow I’ve discovered to date.

Sketch for Wireframing

Clean, simple and vector-based, Sketch has about 95% of all the features I used while designing in Axure and Photoshop. It strikes a balance between features and simplicity making it easy to communicate your message without being able to venture too far.

InVision for Lowfi Prototyping and Quick Feedback

With InVision I can communicate my idea and get feedback in a snap from managers, developers and test users. It integrates magnificently into my workflow with two killer features: Design File Syncing will soon eliminate the need to export images from my Sketch project, and Dropbox integration means there’s no need to manually upload anything. Make any necessary changes, hit save, and let colleagues know that changes have been made. Any InVision wireframes they’re looking at will automatically update. They don’t even need to hit refresh. Now that’s silky smooth!

Trello to Stay on Track With Progress

InVision integration with TrelloInVision integration with TrelloInVision integration with Trello

On the Discovery team at Envato Market we use a Trello board as our sprint board. If you’re not familiar with Agile terminology, think of it as our project management tool. I’ll attach any designs to the cards on this board to communicate to developers what needs to be built. Previously making a change to the design would mean that I’d have to come back to Trello, find the card it has been attached to, remove the old one and upload the new design. Did I say InVision had two killer features? Well make it three. Live embed takes care of all this work. All I have to do is make the change, hit save and it’ll update the wireframe in Trello as well. Henry Ford would cry tears of efficiency!

Not an Excuse to Forsake Users

For brevity I haven’t mentioned the prior research phase or the subsequent feedback we solicit from real users, which is part of our workflow. The idea is to shorten the time it takes to create a functioning prototype, to get feedback and start iterating earlier. It is not an excuse to stop talking to real users, only a way to make it happen quicker.

Recommended reading:

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.