Design to code: Lessons for a unicorn workflow

4 min read
Jo Roca
  •  Dec 28, 2016
Link copied to clipboard

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.”

Twitter Logo

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

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.Twitter Logo

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.”

Twitter Logo

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 workflowTwitter Logo, even if this means having to adapt to new ones.

Lesson 3: Swipe right for the right app combo

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 programsTwitter Logo. 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.”

Twitter Logo

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

Treat your workflow and all the programs as if they were a physical space.Twitter Logo 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.”

Twitter Logo

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.

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.”

Twitter Logo

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 clutterTwitter Logo 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.

Collaborate in real time on a digital whiteboard