Material Redesign for the UGA App
This summer I was brought aboard my university’s mobile app team as the lead UX designer. Joining a talented team of developers, I jumped right into the deep end. It was an extremely rewarding experience and I couldn’t be more excited to see my designs going out to the app’s more than 23,000 monthly active users.
Our native Android app has always had some bugs, so it’s being rebuilt from the ground up. This presented a great opportunity for us to modernize the experience for Android users.
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.
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.
Home Sweet Home
Due to aforementioned constraints, our app launches to a home screen. These constraints mean the screen needs to be cluttered, but it doesn’t mean the screen has to be boring.
After all, the app launches to Home every time you open it — so I wanted to make a more emotional home screen that screams UGA, welcomes students, and celebrates the amazing team behind the app.
My proposed redesign for the home screen takes inspiration from NYU’s app (except ours has functional navigation and works without internet — shots fired). It features a gorgeous creative commons photo of The Arch (UGA’s biggest symbol and featured on Georgia’s flag) as a background.
So as to fade into the background and not hinder legibility, the photo has 10px of gaussian blur and is covered by an opaque black filter. Icons have been redesigned in Chapel Bell White with a thicker style.
TL;DR:
Right now the UGA app on Android struggles to highlight the app’s killer features. In order to increase discoverability for these modules, they’ll receive spots in our new bottom navigation.
By bringing our branding up to speed with UGA colors and typography, the app’s emotional design is enhanced to really help students feel at home in a well-loved app.
UGA’s Trade Gothic Condensed No. 22 is gorgeous, on-brand, and provides a clear hierarchy between headings and system fonts.
As our app’s welcome mat, the home screen’s appearance is vitally important. By ditching the plain background for a photo of The Arch, students will really feel the love our team puts into building this app for them.
New icons employ a more consistent style while still prioritizing legibility.
Disclaimers
I served as lead UX designer at the UGA app over this past summer before graduating. I worked with an amazing team of developers to iterate on these designs and they won’t make it into the app until we’ve tested them again and again.
As a result, when you see these updates to the app in the coming months, they may look a lot different.
I hope you love them.
