Material Redesign for the UGA App

Chalen Duncan
Sep 8, 2017 · 5 min read
Image for post
Image for post

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?

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.

Image for post
Image for post
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.

Image for post
Image for post

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

Designing within constraints

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.

Image for post
Image for post

Visual Identity

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

Image for post
Image for post

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

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.

Image for post
Image for post
My proposal for a new home screen.

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:

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

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.

Thanks for reading!

Please clap, comment, and share!

Subscribe for another UGA App study looking at increasing discoverability for our live-tracking bus map.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store