Android App Redesign

Before the redesign, the Coffee Meets Bagel Android app used a hamburger menu to reveal a right aligned navigation bar. Analytics showed low traffic on the hidden menu pages. In order to increase engagement and make users aware of useful features, we switched to a tabbed navigation. This allowed us to surface more pages and select buttons readily accessible. The redesign offered a great opportunity to align more closely with Google Material Guidelines. Our customers responded well to the update and engagement on previously hard to find features more than trippled.


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 did the UI/UX design, the user testing, prototyping, visual design, final spec, and asset production. Sketch, Mirror, and Illustrator were used to design the flow and icons. I worked closely with the lead Android developer to implement the design.

The app opens on Daily Bagel page where the latest matches are presented. The newer design is on the right side below. On the top part of the page the hamburger menu has been removed, allowing a small logo to be placed for better brand recognition. The page looks cleaner, aided by replacing Raleway font with Roboto. The countdown timer is placed over the photo, allowing the app currency (beans in this case) and invite button to 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 an overflow menu which is activated when the toolbar (the three dots) on the upper right is pressed.
Responsive Figure
Responsive Figure


The image on the left shows the older flyout menu, which overs the content on the main page. The image on the right shows the more compact overflow menu with new icons.
Responsive Figure
Responsive Figure


The old Discover page on the left and the new Discover page on right shows mainly a how much cleaner the Roboto font makes the design.
Responsive Figure
Responsive Figure


Tooltips and snackbars were used where needed such as on the Profile page to allow for editing.
Responsive Figure
Responsive Figure


Some changes were relatively small but every page was given an update. The status bar was changed to black instead of blue to give the app more balance.
Responsive Figure
Responsive Figure


New icons in better detail.
Responsive Figure