Taisiya Teslya's profile

"Classes" UI/UX Case study

Redesigning Student Experience
Academy of Art University Classes app redesign

"Created for artists by artists," Academy of Art University (AAU) prepares aspiring professionals in the creative fields of design, communication, and arts. Based in San Francisco downtown, AAU exists in the center of innovation and creativity. 

As a graphic design student at AAU, I made a decision to redesign the experience of the "Classes" app, which allows students to gain access to their class and degree information from their phones.
PROBLEM STATEMENT
At the moment, AAU Classes app does not allow students to access class information and communicate with classmates and instructors in a convenient way. Students find it hard to navigate the app and find the desired information.
HYPOTHESIS
With the new approach to the Classes app, the Academy can create a platform for students and instructors, where communication goes beyond the classroom. This online class environment can encourage students to improve their networking and time management skills.

MARKET RESEARCH
There are no current app alternatives for AAU students to use, except for the desktop version. Students use the desktop version to pay for tuition, access degree progress, and plan their schedules, but rely on their smartphones to quickly access simple class information and for communication purposes.

CURRENT DESIGN:

APPROACH
Being an AAU student myself, I already had some insights about the app's main interaction problems. To confirm my observations and to find out how other students use the app, I conducted interviews with other students and instructors, and tested the current user flow with people with no previous app experience.
INSIGHTS
According to these interviews, the main features that students use the app for are: 
accessing class schedule, class information, file sharing, communication, and grades. Secondary features include degree progress and shuttle services. The majority of interviewed students said that they often get lost on the app, because of poor information organization, misleading link names, and inconsistent navigation system. The class outlines are currently outdated and do not provide any useful information, such as weekly assignments and instructor's expectations. Classmates' contact information is hard to find, and students often do not get notified about class cancellations or current department events.

"When using AAU app, I spend the most time getting lost."
USER GOALS:
Stay on track with all the classes
Network with classmates
Ask for work critique between classes
Contact instructors and advisors
Check grades

USER PAIN POINTS:
Accessing class schedule and outline
Missing out on events
Not getting notified about class cancellation
Finding ID number
Communication with other students
Missing the class and falling behind
SKETCHES
MID-FIDELITY PROTOTYPE
USER TESTING
After designing the first draft of the app, I approached some students to get to know their opinions. Some of the comments were: 
 
What does the blue line suggest? Is it notifying of something new?
My intention was originally highlighting the most important areas of the page, like the classes, the instructor's recent comment, and the current week. I realized that it was not familiar to most users, so I changed the design to make more sense visually.

Why are classes on the home screen in A B C D order? 
The letters show the current grade the student is getting in each class. I put the grades on the main page next to the class names, because checking grades was one of the main reasons student use the app. To eliminate the confusion, I rearranged the grades for the presentation purpose.

How do I know what page I am on? Every page shows "AAU" on top.
I realized that the users would already know what app they are using, so having AAU on top of every page was not adding to the clarity in navigation. So I decided to switch it to the current page the user is on.

Can I comment on the posts in discussion?
Originally I intended the post to expand upon tapping, but to make that more clear, I would have to use an indicator or a comment icon on each post.

I would like to have easier access to my profile information
The idea was to put the profile and degree progress information in the menu, but it did not make sense to some students. So I made a decision to make a fixed navigation on the bottom and create three app sections: classes, messages, and profile. This also solved other navigation problems.

INFORMATION ARCHITECTURE
THE FINAL VERSION
The information architecture of the app has been changing throughout the whole project. The final version was inspired by the comments that I received during the user testing. 

To highlight the three most important experiences of the university life –  learning,  networking, and self-growth – I made classes, messages, and profile sections the main focus of the app.

These main three sections can be accessed through the fixed navigation on the bottom, and the classroom environment can be accessed by tapping on one of the classes in the home section. It will lead the user to the shared space, where the instructors and students get to communicate with each other. It is divided into three sub-sections — the discussion, the outline, and the grades. It is designed to incorporate the structure, the communication, and the progress of each class.

To make it easier for the users to access their grades, I also located them right on the home page, next to the class name. Tapping on the grade will lead the user straight to the grades section of that class.
THE FINAL PROTOTYPE
THANK YOU.
"Classes" UI/UX Case study
Published:

Owner

"Classes" UI/UX Case study

Published: