Flowsane

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

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

What we did

  • Strategy
  • Branding
  • Product Design: Web & Mobile
  • Frontend Development
Flowsane logos
Logo and iOS icons for Flowsane.

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. We had to be very clear about what value it gives but also how safe it is.

Screenshot: Flowsane Landing Page
Brand guidelines teaser for Flowsane Landing Page
Brand guidelines teaser for Flowsane Landing Page

Web App – Dashboard

We splitted Web App into two separate sections. Frist one is Dashboard where user spends most of the time using 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.

We've decided it's crucial to keep those sections separated because it let us simplify Dashboard for user.

Screenshot of Dashboard
Main view for user dashboard.
Screenshot of Dashboard
Single document view.
Screenshot of UI elements: dropdowns
Dropdowns for filtering and actions.
UI elements: icons
Icons showing various file formats.

Web App – Preferences

Most of those would be visible only by admin account. And rest would be visited once or twice in a quarter. That made us feel keeping it "around" Dashboard would make it more complex and heavyweight. So we 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.

So Flowsane has Projects to specify people and these flows. It's not super easy model to show in UI. We've added bunch of smart interactions like drag'n'drop to make whole experience more smooth and friendly.

Screenshot: Flowsane Edit Project
Project settings.
Screenshot: Flowsane Edit Flow
Editing flow.

Notifications is usually a boring screen with selects or checkboxes. We wanted to make that page a little bit more special and clear. We came up with idea of custom checkboxes for Mute section – we used icons to make its purpose obvious.

Screenshot: Flowsane 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.

So what's next? You tell us!