How to Make UI/IX Flows With Overflow
Create flows rapidly & amaze all of your co-workers.
|Apr 4, 2020|
OnPoint Prototype done using Figma.
The global pandemic has now affected how we work at scale. With many more businesses are forced to work out remote working, designers need to up their handoff game to make sure ideas are being communicated effectively and more concise, more now than ever.
In Product Design, handoff doesn’t stop at screens, assets, and fonts. Tools such as Zeplin, Invision, and Avocado has changed the way we work collaboratively with our teammates. Documentation such as UI/IX flows can play a huge role in how we communicate.
Meanwhile, these flows can take a lot of time and effort to create. Time is precious, especially in a fast-paced product environment. The time you may not have to make a perfect flow from scratch.
This is where Overflow comes in. Overflow helps you create flow diagrams in an instance. Many tools are trying to solve this very problem, most dominantly, Flowkit by the amazing MDS. Whimsical also offers the ability to create diagrams at a lower fidelity.
What’s so powerful about Overflow is you can use it to build user flows or task flows from scratch as well as import screens directly from Sketch, Figma, and XD. Overflow is not a design tool but it “reads” your layers so that you can create connectors from one element to a destination with a quick drag-and-drop. In short, Overflow is the baby Flowkit and Whimsical never had. This simple premise is what makes it so attractive.
Further in this post, I’ll show you a step-by-step to create an IX flow with Overflow. But first, let’s talk about IX flow. IX flow a.k.a interaction flow is the term coined by Havana Nguyen. Her story was one of the first stories I read on Medium; I thought I’d found gold. IX flow is the perfect way to show my engineers how an application should behave, instead of going back and forth, leaving free time for deep work and in turn, increasing productivity. My introverted heart rejoiced.
Screenshot by Havana Nguyen.
In short, IX flow, just like UI flow, is a combination of UI screens with flow charts. But IX flow goes one step further and incorporates detailed information on interactions. In other words, it is a static prototype. Even though IX flow can take time to create, it doesn’t take as much as animated prototypes while providing more information, especially in the cases of complex products with multiple decision nodes.
To make the IX flow even more powerful, I added Animation Specs to the Details Panel. When the circumstances allow, I make both an IX flow and prototypes to communicate what I want to achieve.
In her article, Havana mentioned that a flow would take around 5 hours to create after some practice. With Overflow, I’ve created a simple UI flow within 1 hour, and a complex MVP flow with many animation specs took me around 5–6 hours (including the time I spent tinkering microinteractions in Principle).
OnPoint Prototype done using Figma.
For this demonstration, I’m going to use OnPoint UI Kit by Lukas Jurcik, a design concept for an E-commerce app. Lukas was also amazing enough to make a prototype in Figma for us already, so I went ahead to make a little animation to show how the app looks like.
OnPoint Hotspots by Lukas Jurcik.
First, I import the screens from Figma (learn more about Overflow’s Figma integration with this article by Stefan Mansson). As you can see below, all hotspots are imported into Overflow. Although they don’t look great yet.
Now, I need all connectors to be separated from each other and the screens to leave space for the Interaction Details Panel. Simply grab the node or line you want to adjust and move it to the desired position.
You can select any side of an element to start a connector by hovering on top of the screen.
I don’t want this flow to be to big for this demonstration, so I remove some of the screen, e.g. the sign-up flow. The flow is simplified, starting from the Onboarding screen to Checkout. Our imaginary user would go through the home screen, select a product and check out at the end.
Next step, I created an Interaction Details Panel consist of Triggers, Feedback, Rules, Modes, and Animation Specs. Depending on the screen and/or the elements you’re making notes on, only include the information you think that is required to reduce unnecessary work. In different words, keep in concise. The more product design knowledge your engineers have, the fewer details you have to put in here. No one wants to read essays and essays on microinteraction details. Neither do you want to spend time writing them.
By press Cmd + D, you can quickly duplicate Panels to speed up the process.
You can also change the styling of the connectors and the panels to suit your brand. Or for accessibility, always a good practice.
Below is the final deliverable. If you want to have a look at the flow screen-by-screen, you can find it here.
Not only does IX flow reduce miscommunication among the team, but it also reduces the need to have multiple deliverables, which can lead to difficulties in file management. IX flow is your source of truth. Moreover, while creating the flow, you can view how your product functions as a whole, edge cases, you may not have thought of before may also emerge.
Have you done anything similar to this? Have you tried Overflow? What do you think?
If you try this out and have feedback, please let me know so we can continue improving the handoff process.