Promoting colaboration in Flow

As the sole product designer on Flow, it was my responsibilty to carve out the look and feel for these pages, as well as solve the UX problems they presented.

UX Problem

How to we create a space for Organization members to collaborate and find eachother? How do we encourage users to spend more time on flow?

Solution

I created a set of profile pages that displayed member lists for organizations, encouraged customization, and promotes more time spent in flow by allowing networking to happen in app.

 

Goals

Encourage collaboration in Flow

Encourage users to spend more time in Flow

   

Early Development

This set of pages would create a lot of changes for the existing app, so refinement in early & low fidelity stages was crucial for its success.  While crude, a look at my early sketches provides valuable insight into the structure I wanted to create for the pages at early stages. Frequent communication and feedback made this stage the best it could be.

   

Page Overview

The profile pages for organizations and individuals pictured in the carousel below were the central solution for the problems presented to me. For these pages, I lifted the existing members module on the right side of the page, to give it more realestate and make it more robust in terms of information. I also created timeline pages specifically for these pages with more personalized events, as well as a new way of displaying products in the second rightmost column.

   

Profile Settings

The customization of the profile page aimed to be a huge factor in keeping customers engaged with the app. Here are the high fidelity layouts

   

Members lists 

Depending on the context in which you are viewing them, Members lists provide a grounding place to view how someone can access a product, and their role on said product. In the case of a members list on an organization  profile, the list shows the primary stakeholder, or ‘owner’ of the organization while also showing each member.

Mobile Layouts

The Profile pages felt especially critical to get right on mobile, here are a few examples of how the pages look on smaller screens, from core experiences to editing pages.