Redesigned UMich app

UXUI + ANIMATIONS
Adobe XD, Adobe Illustrator, Adobe After effects

"I'm in control!" - No one ever.

Therefore, colleges create mobile apps to help students organize themselves. My University, the University of Michigan, has hopped on that bandwagon as well.

Everyone on campus who doesn't live in a secluded forest knows of this app. You can check your schedules, grades, the bus map, and important dates.

 

However, over the years, I've heard consistent complaints about this app as more and more features  were implemented. The app that was once popular due to its handy features is now upsetting users by overcrowding and complicating the content and space unnecessarily. 

Why Redesign?

I decided to redesign some basic, front page features of the app based on the two main complaints I heard from the student body. One is that the app doesn't look appealing overall, and it is difficult navigating through all the new content. The second complaint is that people only use the app for 3-4 main features, and would prefer the app to be simplified and easy to use when it comes to those specific features.

 

I conducted an anonymous formal survey to gather more insights. Here are the results:

content Research

1. Most people use the app only to look at class schedules and bus maps.

2. the Laundry feature was pretty popular, but only for people in dorms.

3. In order, the most used features are: class schedule, bus map, printing and dining halls meals. Some people found "upcoming announcements" a good idea, but would be more useful if it was more organized.

4. Design-wise, People enjoyed the spacing and neatness of the app, where everything is separated into blocks. However, it was hard to navigate and there are too many features implemented into the tabs that are pretty much unnecessary and makes the app uncomfortable to navigate.

Some comments posted:

"I didn't even know half the things you listed were in the app until I took this survey."

"I don't understand the building and people search option. It's cool but how often are we actually going to use it?"

"I care more about my grades than the food that will be served at the dining halls. They don't taste good anyway."

thumbnail sketches 

I decided to re-design the basics of the app - here are my thumbnail sketches.

I chose 3 common Sans Serif app typefaces and ended up choosing Open Sans. It isn't as condensed as Roboto, but also not as spaced out as Montserrat. It comes across as clean and comfortable to read. 

Our school colors (maize and blue) definitely must not change, but I added different monochromatic colors and variations to the original colors' with different levels of tints. 

Results
Before

Loading screen fades directly into the home page

After

Loading screen playfully zooms into a "sign in" screen. This way, students no longer have to log in every time they want to check their grades or schedules. 

Before

The home screen shows announcements, class schedules, events, "more" events (?) and important dates. One needs to scroll multiple times to get to whatever content they wish to see.

After
see schedule

The schedule will be the first feature displayed on the home screen. You can tap on different days of the week as well.

Below the schedule are different features that you can scroll through.

course description

I added a feature that consolidates the course description, professor details and office hours of classes if you click into it. This is how the screen will transition/animate.

view grades

Grades can be viewed if you press the "grades" button, but it will also be protected just in case (students will understand!). GPA details will also be given.

campus tab before

This is the "campus" tab - it shows bus stops and parking lots, the bus app, and if you scroll down you can see recent crime events that may be close to you.

After

Campus Tab

I moved the bus feature to the home page since it is a pretty popular feature.
Moved crime alert to the top - safety first!
Events and news about the campus follow right after.

Dates - Calendar view

This is the Dates section, calendar view. It works similar to ical so students can easily get the hang of it. Dates with important events are bolded.
Dates will include holidays, course scheduling, and sport events.
Dates - List View

By tapping on the "Dates - Calendar View," you will be brought to a list view where you can see everything that is going to happen in the month. 

Designs, illustrations, and animations © Roseanne Chao