Podio Item Redesign

The Brief

Podio is the the tool helping people to manage their projects by allowing them to customise their own workflow. Although flexibility is the beauty of Podio, at the same time it adds more complexity to the system.

People use Podio differently. Ads agencies might use Podio activity stream. Recruiting companies might use only task. However, in order to get the most from Podio, the users have to follow Podio structure -Items, Apps, Workspaces, and Organisations.

Podio structure

Item is the generic term for users' content. It could be meeting, contact, project or sale-lead. They can name it whatever they want. The problem was there were less new users create items.

So how could we, as a Podio design team, make people understand Podio core value and create more items?

Why users didn't create enough items?

The Process

We started briefly by researching on 2 main concepts of how people use Podio: Overview and Content Details. Overview happens in Activity Stream, Inbox Notification and App Layout. Content Details, where people can add more content, change the status from 'Working on' to 'Done', comment on the project or assign tasks, happens in item page. We found out that there is very high frequency from all the workflow that people move between Overview and Content/item page. The good example is Kanban board which is good for overview. people can visually see the working progress but it lacks the detail on each card. Moreover, this activity should be so effortless that they should not use their cognitive load for navigation. It's their Content they should focus on. So we come up with the big term here: Content First

Old solution

On old solution, we heavily focused on the flow between App layout and item page by implementing the interaction feature called internally Slidy Panel. When users are in App layout they can click on the item list and the item details will Slide in from the right of the screen. By doing this users can see more details without leaving the page so the experience of moving between overview and detail is not interrupted by page loading time. However, we realised that this solution has solved one thing but added up another complexity.
image

  • First, it's the pattern that appear only on App Layout and not anywhere else.
  • Users can only read on that extra information. They cannot edit the content or comment on it since it needs submit button.
  • Reading on small area like Slidy Panel didn't provide the best reading experience: space is limited, the content is surrounded by too many other irrelevant information, the moving in and out of Slidy panel made people feel uncertain.

The Solution

Paper Based Metaphor.

We decided to remove Slidy Panel and came up with the new pattern of the flow — navigating between overview and detail content. This pattern should be used all over Podio. After a couple of days workshop in shipyard area on the outskirt or Copenhagen, we came up with Content First. It leads us to design the new item page where users just focus on the content. And paper metaphor is close to what the content should be presented.

Each item is represented as a piece of Paper.

The concept of Paper help us to explain how information is structure in Podio since it's tangible. It also reflects in visual representation - item is a white piece area on top of subtle grey. The comment is additional element attached to the right of it.

Podio item as a piece of paper

Good Old Breadcrumb

We tidied up the navigation by analyse users behaviour. We removed app navigation since we found that not many people navigate between apps. We used Breadcrumb as the main navigation since it took less space and its' very descriptive. We use less icon and be more explicit using text.

No Edit Mode. It's paper. Just write as you write on Paper.

Ultimately, we would like to deliver the full experience of reading and writing on the paper by use less web interface controls as possible. For example, people should just write and change the content without changing from reading mode to writing mode. So we removed Edit Mode and let them write on the item page as if they write on word processor — No boxy border around the content.

Animation is crucial to explain items and their relationship

We have learnt that the transition between overview and content needs to be seamless. We again used the concept of Paper popping up on top of any overview pages — App Layout, Activity stream or Inbox. We presented the concept to the developers to convince them that loading content on top of existing one need to be very fast and it shouldn't make people feel that they have left the the page. They should still feel that they are reading something on top of the overview page. The animation below shows how to create item on top of App Layout page.

Create item animation

Using paper metaphor also helps us visualises the relationship between items. I have developed a lot of diagrams by studying the arrangement of stacked paper as the reference point. Referencing an item to another item is one of the most advance and complicated feature in Podio.

Diagram showing how to use 3 dimensions space to explain the relationship among items.