Flowsane

Documents workflow platform for web & mobile. Flowsane automates document circulation in company, department or team.

I've been working on this product from very first day, providing not only design but also frontend code. I've had a pleasure to define how it will look and work like, but what's more important I’ve been defining product idea, features and goals.

Landing Page

From business perspective it was important to communicate who this product is for and what features it provides. General idea was not the simplest one. SasS product targeted to small- and medium-size business owners. It was important to show what values it gives and how safe it is.

Web App – Dashboard

I splitted Web App into two separate sections. First one – Dashboard – where user spends most of the time browsing and adding documents. The other section is Preferences panel where user sets everything up, and time to time update some settings. It's basically "do something and forget" type of experience.

I've decided it's crucial to keep those sections separated because it would simplify Dashboard for user.

Screenshot – Documents listing — Documents listing

Screenshot – Single document — Single document

Clean & user-friendly UI

Every UI element was designed from scratch with simplicity as main goal. I wanted to pack very powerful features in clean UI that will be understandable and delightful for users.

Custom designed file formats icons

Flowsane was about processing different formats of files. It's safe to say that Files were the most important part of the app, so I decided to design custom file icon for each supported format.

Web App – Preferences

Most of those views would be visible only by admin account. And the rest would be visited once or twice in a quarter. So keeping it within Dashboard would make it more complex and heavyweight. So I visually separated Preferences from Dashboard.

Flowsane is about circulating documents within organization. But not every document goes the same path. For example, contractor's invoice could go following path to be paid: Contractor » Project Manager » Accountant » CTO » Head of Accountants » CEO.

To make it easier, each project in Flowsane has specified flows and people in those flows. It's not super easy model to show in UI. I've added bunch of smart interactions like drag'n'drop to make whole experience more smooth and friendly.

Screenshot – Project settings — Project settings

Screenshot – Editing flow — Editing flow

Notifications is usually a boring screen with selects or checkboxes. I wanted to make that page a little bit more special and clear. I came up with idea of custom checkboxes for Mute section – just a tiny detail that make things more delightful.

Screenshot – Notifications panel — Notifications panel

Mobile apps

It was crucial for success to give users quick access to their documents and also let them upload new ones. The best way to provide seamless experience was to create mobile apps for both – iOS and Android devices.

iOS: Document Details

iOS: Document flow

iOS: Addin document

iOS: Removing file from document (that one was just an experiment)

Android: Documents list

Android: Single Document

Android: Adding Document

So what's next? You tell me!