MyUT app redesign

Sept 2022 - Jan 2023

This project was started in September 2022 and is a current personal project I have taken on to get hands-on experience improving user experience and solving design challenges. For this project, I am taking my experience learning Figma from the previous project and applying it.

Goals:

To build a central navigation that is consistent and aligns with the MyUT website
Create page designs that flow well and improve user experience.
Prioritize, condense and increase the amount of information presented by building visual hierarchies and lengthening pages.

The Context

The MyUT app is a student portal that allows students to access and manage personal, academic, and financial information. The MyUT portal allows you to complete tasks like pay for your tuition, and register for classes, manage your student funds, etc. There is a website version of the myUT portal that many students use.

The Problem

The mobile version of the portal doesn’t include access to much of the important information or tasks that would create a streamlined experience for students. It's also hard to access and is organized arbitrarily.

After testing it out myself and having UT students run through it, I began taking note of what could be improved and asking the students what could be improve. Some of the pain points of the app based on user feedback included:

Inaccessible login prevents users from getting into the app
The navigation bars pages feel random/nonspecific
The Canvas/class portion of the app feels redundant

Here are some more specific notes:

Login

Canvas

Important Info

One element that is confusing and repetitive was the top bar on every page that takes the user back to the Menu page when clicked. If there is already a navigation bar at the bottom then the top element is extraneous.

The choices on the navigation bar are not the most organized or efficient.

The navigation bar has text that cuts off, it's not very clear or concise.

When the user tries to navigate to any other pages, they are blocked by a login pop-up. This can be quite frustrating if every time they are hit with this pop-up. With this app it also difficult to login for some, but it is much easier for others.

While it might seem nice to access course information on the MY UT app, I don't think it's relevant because most, if not all classes use the Canvas app. Adding all information that Canvas already provides could muddle the app and make it confusing.

This My Important Info page is an example of poorly used space on the navigation bar. This could be moved to the homepage or combine with more information.

Drafting an Improved Design

Here are early sketches I did with paper and pen. I wanted to have an onboarding page/login that the user is presented with before entering the main section of the app. Instead of logging with a username, the user can login with their EID (a campus given id number used for any other digital campus tool), which would make the process much simpler than remembering the correct email or user name specifically made for this app.

The next step was to create pages and prioritize what belongs on the navigation bar. I originally decided on 5 pages after taking a look at the MY UT website and how they organized their information. One of the challenges with this process was figuring out what and how much information is most valuable to users while still keeping the app simple. I organized the nav into academics, financial info, personal info, profile, and home.

Wireframing

The next step to my process was to iterate on my sketches by turning them into wireframes. With this process I made some changes such as combining the profile and personal info pages. I then put together some prototypes of the wireframes to get a sense of how they would feel and flow.

Feedback and Iteration

My next course of action for this project is to build more wireframe flows, get user and feedback on my wireframes, and move on to Hi Fi pages. At this point in the project I decided to scope down the designs I wanted to accomplish to the main pages that would be present in the navigation. These pages should hold all the important information and actions. The key takeaways I received regarding my wireframes included:

Maximize digital real estate
Break up features with more variation and graphics
Create more active scenarios