Aug 23

How Orange Bees uses Overflow as a single source of truth for design work

Overflow Team in Overflow Storybook

With Lee Garkusha, Lead UI/UX Designer, and Erin Morris, UI/UX Designer

Lee and Erin discussing one of their projects in Overflow.

Introduction

Orange Bees has a small in-house team of designers taking care of tailor-made projects for multiple clients. This created a need for higher levels of alignment, both internally as well as with external stakeholders. Lee Garkusha, the company’s Design Lead, and Erin Morris, a UI/UX Designer at Orange Bees, spoke to us about how Overflow complemented their existing Adobe XD workflow and helped them create their own internal hub for design feedback and documentation.

The challenge

Mistakes and misalignment became a norm, especially as design projects scaled up

Orange Bees offers a range of services to their clients, from design-only engagements to turnkey software solutions. Each project, such as the development of a mobile or web app, has an assigned production team comprising a UI/UX designer and several software engineers. Designers are key players in the process; as Lee explained, she and Erin don’t just work on multiple parallel projects with different teams, but they also communicate directly with both internal and external stakeholders.

Until recently, the two designers mostly used Adobe XD and various other ways to seek client feedback, as well as hand off work to their colleagues in product development. The main issue was that looking at a click-through prototype without a bird’s-eye view of all screens made it difficult for stakeholders to navigate through the project and understand where each subflow started or ended. Additionally, Lee recalls being forced to generate separate share links for how the app design would look for each user persona, something that made alignment with internal and external stakeholders difficult. The situation only worsened as projects scaled up since it only became harder to keep all links up-to-date and make sure that everyone was using the right links to review design work.

A detailed documentation of one of Orange Bee’s design epics.

The solution

Introducing Overflow as the company’s hub for all things design

Lee randomly discovered Overflow on one of the most popular online design news aggregators. She first tried it for herself before quickly introducing it to the company. Today, the team over at Orange Bees basically uses Overflow as a single source of truth for all their design documentation, feedback, and handoff needs.

The designers use the Overflow plugin for Adobe XD in order to sync their design artboards into Overflow and put together user flows and design presentations to share both internally and externally. Everything remains on file and gets updated by simply resyncing from the latest Adobe XD designs every time there’s a new iteration. The team’s best practice is to maintain one publication link with multiple boards for each project, splitting different subflows, variations, or responsive designs on different boards for an easier navigation experience.

“Pretty much everything we do goes back to Overflow. We don’t just use it for user flows, but also to document what each screen looks like in different states, or to add notes and hyperlinks.” — Lee Garkusha, Lead UI/UX Designer

Use cases

As already mentioned, Orange Bees uses Overflow for pretty much everything that comes after designing their screens in Adobe XD. More specifically:

  • Asynchronous design review: When the designers have the first solid samples of work to share with the client, they generate an Overflow publication link, which they share with their stakeholders. It’s then up to the client to check and leave their feedback at their own pace. New clients with no prior exposure to Overflow’s interface get introduced via a quick onboarding call before receiving the link.
  • Developer handoff: The design team at Orange Bees uses Overflow as their sole developer handoff tool. They like to split complex flows into different subflows, each presented on a separate board. They leave notes and external URLs (such as Adobe XD design specs) to developers to make their life easier and add context to the document.
  • Design documentation: The team likes to keep all their past and present projects well-documented inside Overflow. Erin said the possibility of adding an infinite number of boards to each Overflow document stands out, as both designers like to present variations of their screens separately, based on different user personas, device types, or similar.
The two designers working on their laptops in the Orange Bees office.

The results

Time and productivity gains across the wider team

Both designers are certain that the combination of Adobe XD and Overflow has saved them significant time in transforming their XD designs to interactive user flows. Not only that, but the capability to simply update the Overflow diagram with the latest Adobe XD iterations at the press of a button has left little space for human error throughout the different stages of the design process.

“I can’t put a number to it but Overflow is infinitely faster than other tools I’ve tried.” — Erin Morris, UI/UX Designer

When it comes to presenting, Lee said that Overflow solved the long-standing issue of having to present design documents, even when parts of the project were unfinished. Overflow’s infinite board feature allows both designers to hide sub-flows that are not ready to share with clients, as well as maintain their own hidden boards for brainstorming or testing purposes.

Additionally, the design team sees that adopting Overflow created a beneficial halo effect of increased productivity and better alignment throughout the whole company. This has allowed the team to focus on more important things than resolving misunderstandings or spending time in endless review and handoff meetings. It has also brought the two designers, who traditionally find themselves in the middle of all communication between internal and external stakeholders, some much-needed peace of mind.

“Overflow not only saves us time as designers, but everyone internally that uses the link as a single source of truth for design handoff, which increases efficiency for the company as a whole.” — Erin Morris, UI/UX Designer

When it comes to clients, both designers mentioned that nowadays, one quick onboarding call with each client is enough to help them understand how Overflow works and navigate through the user flow diagrams of their requested projects in their own time. Miscommunications have diminished and overall, the whole collaboration feels smoother and more structured than ever before.

The company

The Orange Bees company logo.

Since 2013, South Carolina-based Orange Bees has been developing premium software solutions for enterprises of all sizes. From full-stack development to cloud computing, automation, and even UI/UX design-only services, the company is eager to find the ideal solution to any request, following a well-rooted client-first approach.

Do you have a similar story to share? Let us know via comment here or on our Twitter, Facebook, or Instagram accounts, and we’ll get in touch!

Article written and curated by Constantinos Vitoratos.

Build meaningful design presentations and engage your audience in design critique