What’s up, dock?

Last year I cried tears of joy when Google finally brought bottom navigation into material design. It’s the perfect way to highlight your app’s best features while allowing users to quickly navigate with a single tap.

In the past, users navigated our Android app with a hamburger menu or via a crowded home screen.

Navigation didn’t provide a clear hierarchy and useful modules were needles in a haystack.

To make matters worse, the only way to get from one module to another — the hamburger menu — was hidden in the upper-left corner. In screenshots from our current app below, you can see that this important menu is out of comfortable reach for thumbs.

Before: with phone sizes constantly increasing, the navigation became more and more out-of-reach.

Bottom navigation presents an amazing opportunity for the UGA app. The app has 17 modules, but our analytics data shows that around 95% of app activity is happening in just 3–4 of those modules.

Bottom navigation means that we can cut through the clutter and guide our users toward the most useful modules.

Designing within constraints

The obvious conclusion is to cut out unused modules. In fact, many of these modules just load university webpages which often aren’t mobile responsive. Unfortunately, the university requires that we keep each module on the launch screen.

More of a feature torrent than a feature creep. But what is a design challenge without constraints?

To avoid rocking the boat while still increasing discoverability for our most useful modules, bottom navigation provides an elegant solution.

Visual Identity

Last year, UGA created a universal branding guide to unify its 17 colleges.

To fit in with UGA’s brand, we’ll be bringing in new colors, imagery, and typefaces to the UGA app on both iOS and Android.

You’re just my type

For headings and tabs, we’ll be using UGA’s main heading font: Trade Gothic Condensed No. 22 in all-caps in Chapel Bell White. This thick and beautiful typeface provides solid contrast against Bulldog Red and demonstrates a clear hierarchy against body text.

Body text will use the systems UI font (SF Display for iOS and Roboto for Android). While UGA branding dictates that we use Merriweather or Merriweather Sans, this was less legible on mobile devices and brought our app farther away from Apple’s Human Design guidelines and Google’s Material Design guidelines.

Usability trumps branding every day of the week. Fight me.