Design

Design to code: Lessons for a unicorn workflow

by

on

View all posts

Design is a process. It involves many people of many skill sets, across many locations, being thrown many curveballs, and using many programs—always accompanied by the endless, inevitable ticking of the project clock.

At For The People, we’re constantly experimenting with tools and programs in an attempt to find the unicorn workflow that allows our developers, strategists, writers, and designers to work together. It’s crucial to have a flow that works for your whole team, not just some—or even most—individuals.

Related: Try out Inspect, your team’s faster way to certainty

To help scratch our own workflow itch, we recently reimagined and redesigned Streamtime, a project management solution for businesses and teams in the creative industry (and now, for anyone). The project required a detailed understanding of user needs and behavior, how to plan and execute integrations with products like Xero, and how to work hand-in-hand with a development team.

“Design is a process.”

In short, it was the perfect project to help us find our unicorn—an effective design-to-developer workflow. As we conceived and built the Streamtime tool, we learned some valuable lessons about designer and developer workflows.

Lesson 1: Get on the same page from the start

image00

We kicked off the project with a good ol’ fashioned Post-it session. In Post-it Land, everything is pink and the future looks bright. Everyone speaks the same language of doodles and words. The problem? Vague planning can inspire a false sense of forward momentum.

Things got hairier when it came time to turn doodles and guiding ideas into designs. “Streamtime is for creatives, so make it fun!” looks great on a Post-it, but if there isn’t room in your workflow to turn ideas, hypotheses, and assumptions into real user insights and then concrete designs, you’re going to feel the pain and suffering of a vague, poorly-built foundation—and fast.

“Vague planning can inspire a false sense of forward momentum.”

Lesson 2: Adapt personal work habits to help the team

With the broad range of skill sets in the office, everyone wanted to work with what they’re used to, even if it didn’t fit the bill. For instance, I complicated my life by stubbornly working with Illustrator. It’s a great program for many things, but designing for digital platforms is not its forte.

We had a large team of people involved, working around the clock from 3 different locations. Our first attempt at a workflow spanned too many programs, making it slow and inefficient. Filetypes, file sharing, uploading, exporting, downloading—all of it was costing us a lot of time.

Everyone on your team should be on the same workflow, even if this means having to adapt to new ones.

Lesson 3: Swipe right for the right app combo

design-to-code-swipe-right

Stick with a flow of programs that works for your team, even if this means going through a bunch to find the right combo. As Tinder has taught us, finding the perfect match isn’t easy. The more ambitious your design goals, the more willing you must be to experiment with the right mix of tools to get the job done.

Use a minimum viable combination of programs. This means using the minimum amount of programs needed to achieve this goal. When it comes to programs, more isn’t merrier.

“Everyone on your team should be on the same workflow.”

For us at For the People, the InVision-Sketch-Slack combo has become almost a guaranteed stack foundation for any product we work on. Sketch is a feisty alternative to Adobe Illustrator or Photoshop. InVision is good for initial prototypes as well as a final bridge between design and code. We use InVision as a platform to share the latest designs, where non-designers could see the product unfold before their eyes and add specific comments exactly where needed.

Related: Learn how to switch to Sketch

For projects requiring more specialized tools, we’ll add to that foundational stack as needed, always striving to keep it as simple as possible.

Lesson 4: Maintain tidiness and consistency

design-to-code-workflow

Treat your workflow and all the programs as if they were a physical space. Clutter can be your worst enemy. Resolved issues and comments should be archived every once in a while. Get in the habit of doing it before it’s too late. If you’re not organized properly, you’re probably losing time on your design process.

“Design requires a workflow to cut through the clutter.”

Lesson 5: Keep it real with design context

Another strength of this flow is it shows design in context, giving us a better sense of the experience we’re looking to create. Prototyping tools will never completely replace an actual coded experience, but it helps to remove any leap of faith that normally exists between flat designs and the vision in your head—which otherwise can get lost in translation when showing others. For that, InVision works a dream and makes my job as a designer much easier.

design-to-code-unicorn-workflow

Following these lessons in our flow, we’ve taken Streamtime to 1.0. We’re working toward banishing the traditional way of recording time, helping creatives plan their own workflow and day to day tasks better. We’ve built the product at the front of our stack—Streamtime for planning to help us get on (and stay on) the same page.

“Creativity does not need to be random—process and workflow matter.”

A common misunderstanding equates creativity and design with a lack of process. We have a mental image of creativity being random, when the reality is: to build the best products, it requires a team pushing toward the same goal.

Design requires a workflow to cut through the clutter and enable everyone excel within their skill set. Sure, there are compromises and adjustments to be made, but once you find a program stack and workflow that really works, embrace it and continuously improve.

More posts like this
Author

Jo Roca
A specialist in creative strategy, ideation and concept development, Jo is part of the team at For The People. She wholeheartedly believes in the power of design and branding, the impact they've had on technology and the influence they have on any business.

Join over 2 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 2 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 2 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 2 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 2 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.