Page MenuHomePhabricator

Navigation redesign of the Commons Android app
Closed, ResolvedPublic

Assigned To
Authored By
May 13 2019, 6:58 PM
Referenced Files
F29114272: explore-redesign-full.png
May 18 2019, 5:40 PM
F29114287: Screenshot_20190518-193108.png
May 18 2019, 5:40 PM
F29114301: explore-redesign-full.png
May 18 2019, 5:40 PM
F29105080: C-commons-app-nav-clean-02.png
May 18 2019, 9:35 AM
F29105004: A-commons-app-original-01.png
May 18 2019, 9:35 AM
F29105071: B-commons-app-nav-02.png
May 18 2019, 9:35 AM
F29105023: C-commons-app-nav-clean-01.png
May 18 2019, 9:35 AM
F29105006: B-commons-app-nav-01.png
May 18 2019, 9:35 AM
"Love" token, awarded by Kaartic.


The left Navigation drawer, that opens when the Hamburger menu icon is clicked, is a bit overcrowded.
It has a set of entries that are related to navigation like : 'Home', 'Explore', 'Bookmarks', 'Review' and the rest are
a set of actions that are related to the User - Profile and preferences related.

This task is to segregate them into :

a. Bottom Navigation, and
b. Left Preferences Navigation.

Further, the bottom Navigation will have tabs related to each of the navigation related entries that previously existed in the left drawer:
'Home', 'Explore', 'Bookmarks' and 'Review' .
The screens themselves will not be changed

Suggestion as part of this: When users download the commons app, they might want to see a feed of beautiful images first. So, we could re-arrange them as :
'Explore', 'Contributions[Previously "Home"]', 'Bookmarks' and 'Review' .

This is a link to Side drawers and Bottom Nav arrangement in Android:
Bottom Navigation :
Navigation Drawer :

Event Timeline

Sharvaniharan updated the task description. (Show Details)

Hi, I like the idea of re-organising the home screen, although having two primary navigation components in the same screen is not recommended as per the material design guidelines. We could have group some of the items as suggested in the task description and used either one of them, ie. the Navigation Drawer or the Bottom Navigation. I was hoping if I could collaborate with others and help finish this task remotely, during the Hackathon. I assure my availability by all means of communication.

hi @Ashishkumar468 Thank you for offering help... The new designs will be updated in a bit. @schoenbaechler has designed it ... Please update here if you have more questions. Once I stabilize the four fragments we want to display, we can probably collaborate and use your help on stabilizing the menu and orientation changes..Will update you on this ticket..

So here’s the overhauled navigation model. Version A mostly includes structural changes while staying true to the current visual design.

Version B suggests a lighter color scheme, in which the content/images are the center of the UI. The idea in version B is to move away from using the main Commons blue (#00376D) as a background-color. It should be used more as an accent/CTA color.

OriginalRedesign ARedesign B (clean)
Nav collapsed
A-commons-app-original-01.png (1×824 px, 1 MB)
B-commons-app-nav-01.png (1×824 px, 1 MB)
C-commons-app-nav-clean-01.png (1×824 px, 1 MB)
Nav expanded
A-commons-app-original-02.png (1×824 px, 382 KB)
B-commons-app-nav-02.png (1×824 px, 276 KB)
C-commons-app-nav-clean-02.png (1×824 px, 412 KB)
scblr renamed this task from Re-organize the 'Home' screen for commons Android app. to Navigation redesign of the Commons Android app.May 18 2019, 9:36 AM

Thought I’ll have a look at the Explore feed as well. Here’s a design suggestion for it:

BeforeAfterAfter (full height)
Screenshot_20190518-193108.png (2×1 px, 2 MB)
explore-redesign-full.png (1×824 px, 1 MB)
explore-redesign-full.png (3×824 px, 3 MB)

Some conceptual thoughts:

  • In general, embrace variety of image ratios! Images shouldn’t be cropped
  • Exception: if the image ration is exceeds 3:4 (e.g. 2:3, 9:16), the image is cropped to 3:4 to avoid taking up too much vertical height.
  • Favoriting and downloading images can be done right from the feed via star/download icon
  • App bar stays visible at all times to allow quick access to search
  • Ideally, images should be zoomable via gestures
  • Double tapping an image leads users to the gallery view
  • Swiping left and right in the gallery view lets users navigate through the feed in a calm, distraction free environment.

@Sharvaniharan: if I remember the showcase correctly, this has happened at the Hackathon? If I'm correct, please feel free to create any potential follow-up tasks (though I guess on Github where the Commons App lives) and set the status of this task to "Resolved" via the Add Action...Change Status dropdown. Thanks a lot!

@schoenbaechler The redesign suggestions look awesome! Would love to see it in action :-)

Unfortunately no reply by @Sharvaniharan, hence closing this task.

Sorry for missing this. The redesign happened, but the implementation is unstable and work in progress. I've created the follow-up post on GitHub. :)