What is this about?

I was tasked to lead the Android team at Redbooth when we lost our Mobile PM. The Android app was already a robust representation of our web version and one of the projects that was up in the air was converting our app navigation to a bottom bar. Google had introduced this recently to their Material guidelines and we believed that it would strongly improve they way users navigated through the app, generating more engagement in each visit.

 

The Problem

Having a new option for a bottom bar opened up the possibilities. But before making the the change we validated the following: 

  • Users rely on my tasks to get work done in Redbooth. 
  • Navigation from my tasks to workspaces was hidden, giving more hierarchy to notifications and chat.
  • User-feedback indicated that while they landed in My Tasks tab, the navigation back and forth from other sections felt complicated
 
 
 
 

Solution

It’s a bottom bar!  By now it been proven that it is efficient, we like efficient. Needless to say this was very well received by our users, who by the way, liked the old version.

  • By removing the top navigation, we were able to create a clear navigation hierarchy that was consistent across all pages
  • We surfaced the search button which was previously hidden in the overflow menu and was commonly used. 
  • We introduced cards that  helped our users feel less overwhelmed as it dissected the information on the tasks. 

Wait, Material design? 

That's right! So while working the project above I realized that by upgrading the my tasks tab to cards, I was opening the door for a much fresher, contemporary UI. I brought the case to the DEV team and weighed the cost of updating workspaces and notifications. With my tasks already out the door, their comment was straightforward, as long as we keep the same data, styling changes are a breeze. 

Workspaces

Workspaces is a list that access a kanban view of your tasks. All I did here is adopt the style of contacts in Android, the idea of the initials  and colors came from our web product, creating parity across platforms.

Notifications

This case was a bit more complex as we have a big number of notification cases, here are some highlights on the changes I made to this page:

  • Time stamp is moved to the top right to promote scanning. 
  • Name of the workspace is now on the to left to also promote scanning, but now it adopts the color of that workspace as well 
  • Notifications that have a message now are clear and identifiable 
  • Hierarchy of the card goes as follows
    • Where is the taking place (workspace)
    • When (time stamp)
    • Who took the action (avatar-name)
    • What action was taken
    • In the case of comments - Action (new message), location (task name), Who, and message.

Old version of the app without Bottom navigation and style. 

New version with bottom navigation and material design implemented