Android App Redesign

The CMB Android app before 2016 used a hamburger menu for navigation. We found through analytics that many users were not visiting pages other than the Daily Bagel page. We wanted to increase engagement and make users aware of the many features of the app. By switching to a tabbed navigation, we were able to surface more pages and make buttons like “Invite” and “Bean Count” (in app currency) more accessible. We also took this redesign opportunity to align with Google Material Guidelines.

Our customers responded well to the update and engagement on previously hard to find features more than trippled. The redesigned app was featured in the Google Play Store and downloads of the App increased.
My Role

As Head of Product Design, I was both a designer and a manager. I felt the best course of action for on an ongoing project dealing directly with Google, was to have one designer responsible from concept to delivery. I had never used Android phone and was not familiar with material design guidelines so I began by conducting extensive research on popular Android apps. I did the UI/UX design, the user testing, prototyping, visual design, final spec, asset production, and art direction of the final shipped app.
Process

1. Set Goals - I find the first thing to do at the beginning of any project is to ask why the effort is being undertaken and to determine clear goals. The main goals for this redesign were:

Responsive Figure
Responsive Figure
These screenshots show the older app. The image in the left is the Daily Bagel page where the latest matches are presented. The hamburger menu is hard to see and covers the content when engaged.
2. Analyzed Feedback - For the next step, I analyzed feedback gathered from users and previous Google reviews. I also talked to the lead Android developers and the CTO to get their feedback as expert Android users.

3. Best Practices - I reviewed latest Google material guidelines and familiarized myself with best practices. Google has a huge repository of material design with very specific directions on how to implement all aspects of material design - from spacing to animation to font selection.
4. Research Popular Android Apps - I researched apps using material design and evaluated what could work for us. I assembled a deck of the best material design I could find including UI, visual design, and interaction. I then presented this deck and my recommendations to our CEO and Android devs.

one level
Responsive Figure
two levels
Responsive Figure
three levels
Responsive Figure
5. Initial Design - I began the visual design with the most important page - the Daily Bagel page. The design of this page would determine the design of the rest of the app. I used Sketch and Photoshop to do the mock-ups. The tab bar was on top in these first designs.
one level
Responsive Figure
two levels
Responsive Figure
6. Design Continues - design is a highly iterative and collaborative process. I had enough time to explore several directions, making the final decisions solidly defendable.

New app logo
Responsive Figure
CMB logo at that time
Responsive Figure
New design
Responsive Figure
Old design
Responsive Figure
The hamburger menu has been removed in the new design, allowing the small logo to be placed in the header for better brand recognition. Raleway has an uneven baseline - seen in the clock in the older design. Roboto has an even baseline and a generally cleaner appearence. The in-app currency (beans) and the invite button can be seen at all times.

The bottom tabbed interface shows the four main pages - Daily Bagel, Discover, Chat, and Profile. Less pertinent information is moved into the overflow menu which is activated when the toolbar (the three dots) on the upper right is pressed.
Responsive Figure
Grid size is increased to create breathing room and balance.
New design
Responsive Figure
Old design
Responsive Figure
Responsive Figure
Responsive Figure
Other pages are redesigned.
Responsive Figure
Responsive Figure


Tooltips and snackbars are used where needed such as on the Profile page to allow for editing.
Responsive Figure
Responsive Figure
New icons in better detail.
Responsive Figure
7. Design is Approved - a final deck is sent out for approval.

8. Specs & Assets - Specs and assets are created for the Android developers.
Top app bar spec
Responsive Figure



Bottom navigation bar specs
Responsive Figure

Responsive Figure



Folder view of assets created for each Android resolution

Responsive Figure

9. Art direction - I worked closely with the Android developers to make sure the app is built to design specs and that the interaction is smooth. We used JIRA for bug reporting and tracking.
10. Liftoff! - In-house design review of the 5th iteration of the built app is approved and shipped!
Responsive Figure