Mockups for ReadLater App

Last week I completed the update to mockups (https://github.com/ruchita20/ownCloudReadLater/issues/6) for the ReadLater app based on the feedback from the community.

I received the following feedback for the first iteration:

  • Incorporate app-navigation in the design and replace the top bar. It is becoming the standard for all apps to have a sidebar.
  • The sidebar could for example show the list of tags. And the »Videos«, »Images«, etc. filters.
  • Integrate the top search bar with the one provided within the app.
  • Remove breadcrumbs
  • The reviewers also pointed me back to the previous versions of the mockups discussed within the community (https://github.com/owncloud/bookmarks/issues/55#issuecomment-28568800)

Based on these inputs, I recreated the mockups:

Mockup1: Landing Page for the Read Later app

Mockup1: Landing Page for the Read Later app

Mockup1: Landing Page for the Read Later app

Mockup2: Add content form within the sidebar and the default story layout for the articles

Mockup2: Add content form within the sidebar and the default story layout for the articles

Mockup2: Add content form within the sidebar and the default story layout for the articles

Mockup3: Grid layout

Mockup3: Grid layout

Mockup3: Grid layout

To understand the app-navigation pattern, I used the following resources:

Per recent recommendations from my mentor , listing the tags using Priority+ pattern, will allow the user to expose only the most used tags and the less used ones would be tucked away behind a “more” link.

The updated mockup for tags based on this suggestion is as illustrated below:

tags

Mockup4: Tags