Prototype

Figma File

Trailer

Introduction

“Oh, it’s awful, we hate it, too.” was what my university’s advisor said about UTD’s Orion during one of our scheduled appointments. "Obtuse Navigation", “too much info”, or “outdated UI”are all statements echoed by students and faculty members a like about their experience using Orion. As a student portal, getting important information should be quick and easy to grab, not a scavenger hunt through an outdated website that hasn’t seen an update since the mid-2000’s.

Project Background

Over the course of two months, I conducted user research among UTD students and faculty and led the design of every page, covering the full end-to-end experience. The main purpose of this project is addressing user pain points with Orion, pin-pointing problems affecting UTD students, from fresh undergrads navigating Orion for the first time to graduate students quickly getting in and out with the info they need.

Key Constraints

Unable to access every page and interaction; can’t address every problem mentioned from surveys.”

Working within Figma, not every page can be fully functional like it would be in code.

Redesign mostly dealt with visual and IA, not a full rebuild.

Research & Discovery

Based on 54 user responses to a survey, an average satisfaction rating of 3.74 was reported for users’ experience using Orion, alongside a 51.9% interest rating in a potential redesign for Orion. While the overall sentiment towards Orion isn’t negative, there’s a clear indication the the user experience is far from optimal.

Those that cited a specific specific problem with Orion stated that their frustration stems from navigation issues, readability, and UI design. These problems lead to confusion about things like registration dates, course requirements, and class information, which result in more support tickets and work for faculty members.

54 Survey Responses - "How Satisfied Are You With UTD's Orion?".

54 Survey Responses - "What best matches your thoughts on a redesign of Orion?".

28 (51.9%) - It's a little annoying to use Orion; I'm interested in seeing what a redesign could bring.

12 (22.2%) - Redesigning Orion seems like it would be pointless, it's perfectly fine as is.

8 (14.8%) - I don't really care if Orion is redesigned or not.

4 (7.4%) - Orion is in incredible need of a redesign, I hate using it!

2 (3.7%) - I really like Orion and redesigning it would only be a downgrade.

54 Survey Responses - "What Do You Primarily Use Orion For?".

34 (63%) - Academic Management

14 (25.9%) - Administrative and Employment Tasks

5 (9.3%) - Financial Services

1 (1.9%) - Other

30 Survey Responses - "Do You Have Any Specific Problems Regarding Orion?".

10 (33.3%) - Navigation & Usability

10 (33.3%) - No Reported Problems

5 (16.7%) - Performance & Reliability

3 (10%) - UI Design

2 (6.7%) - Other

User Quote Samples

Problem Statement

How might I help UTD students check and track their academic standing through class registration, coursework, and financial aid without having to spend too much time?

Project Scope

The scope of this redesign project focuses on the student-facing web experience for enrollment and academic tracking. It won’t address problems such as mobile optimization, external services, or back-end performance, even though they were mentioned in user surveys.

This project is meant to be treated more as a proof-of-concept; mobile optimization can be easily translated from its desktop-counterparts when the main design problems are addressed.

External services, i.e. any page that redirects the user outside of Orion, will not be redesigned as that would bubble the scope of this project out of proportion.

Design Process

Coming from the user surveys, many didn’t feel too strongly about Orion’s design one way or another; most were just fine with how it is currently. However, the cited issues of Orion were enough to make over half of the responses state an interest in a redesign, even if the same users gave a satisfaction rating of 4-5.Since a majority of users didn’t feel a negative experience with Orion, I opted in for a more conservative approach; changing too much when it wasn’t asked for will only inconvenience users further.

Design Process #1 - SidebarSome of Orion’s problem with navigation can be pin pointed to its sidebar. In its current design, Orion’s sidebar only appears within a specific category's page, and constantly changes from one page to another. This forces users to constantly reassess what they’re looking at, leading to confusion and lots of back and forth. It also doesn’t help that many of the sidebar options are redundant; they lead to the same pages as other sidebar options. This leads to more clutter on the sidebar and inflates it to further confuse the user.

Very annoying to get from one specific page to another!

One of my original ideas was to completely get rid of the sidebar, since I believed it was causing too much confusion with navigation, and letting the user navigate directly to the page they wanted to via the home screen would essentially make it obsolete.However, I realized that this could make navigation even more inconvenient, as what would happen if the user wanted to switch to another page? They would have to redirect themselves back to the home screen in order to get to their desired page.

Depicted: User Navigating to Graduation Page

Depicted: User Now Wants to go to Another Page

With this in mind, I decided to consider the other extreme, to always have a sidebar present with all the pages listed. This way, the user can quickly switch to another page they need to and it wouldn’t be constantly changing; letting them get accustomed to it.It’s also important to group the sidebar options into separate categories, since the sidebar holds all possible pages, the user should be able to collapse categories to make things more compact.

Finalized Sidebar!

Design Process #2 - Home ScreenOne of the most important pages is the home page; this is the first thing users see when they enter Orion, and what will lead them to the specific page they’re looking for. The problem with the existing design is that it immediately overwhelms the user with these grid category buttons and doesn’t give them a clear direction to go in to to find what they’re looking for.This stems from the biggest problem about the home screen; there is no search bar, at least a functional one. The current “search bar” is tucked away at the top of the screen with no clear indication of what it actually can search. And if it is even used, it will always give the user an error, so users are forced to comb through the boxes until they see what they need.

Orion Home Screen

After Clicking on the Search Bar (Gives Error)

In my design, I knew the search bar needed to be more prominent and in the actual frame in order to better direct users. I initially thought to get rid of the category buttons in favor of a front-and-center search bar to put emphasis on its importance, where entering a search query would populate the home screen with the buttons. However, I realized this could actually slow some users down because if they already knew its location on the grid layout, it would be faster to scroll down and click on it than to manually search it up.

WIP Home Screen

User shouldn't have to manually search for categories when they can just click the button from the start

Another problem is that the home screen doesn’t directly lead the user to where they actually want to go; it’s hidden underneath another layer, i.e. If I wanted to check my grades, I would need to click on the “My Academics” button, and then click on the “View My Grades” button on the sidebar just to get to the page.

To fix this, I also changed the grid layout to include all possible pages. This would clutter the screen more, but overall would be quicker if the user could just search up the page they need to go to instead of jumping through two screens to get there.

Finalized Home Screen

Design Process #3 - Degree AuditA heavily mentioned page from users in the survey was the degree audit page; a page that details all the necessary course, GPA, and hour requirements for students to graduate. Due to the fact that 63% (34 responses) of users stated that they rely on Orion for academic management, this would be an incredibly important page to update.The problem with the current degree audit page is that everything is too cluttered: the course requirements awkwardly blend in with each other because of the small font size, lack of contrast, and the unnecessary amount of them. The courses listed for each requirement are also done so monotonously, only being in text, making it difficult to keep track of what is actually needed.

Requirement Categories

Specific Course Requirements

In my design, I knew that I needed to cut down on the number of dropdowns; a lot of these requirements could be grouped into one category. While this stuffs a lot into one category, it avoids the issue of being too fragmented and forcing the user to go back and forth on the page, which increases the likelihood of getting overwhelmed and lost.I also needed to better incorporate the required courses so that the user isn’t forced to constantly go up the page, read the fine print, and compare with their courses against it one by one. On the same note, the courses in the table would have to be changed in the way it’s presented; it being stacked on top of each other with a full row of info makes the design vertically bloated and difficult to keep track of.

Hovering over a specific course shows the hidden info

A key challenge with this page is that the original design is crammed, but for reasons that are a little out of its control. This is because the info the page is showing is all necessary; there’s little room to breathe because of the nature of the information.Because of this, I needed to compact and hide away some of the information underneath hover interactions in favor of a cleaner design that won’t make the user go cross-eyed. I do have to mention that the information I chose to hide away is based on my own biases of what I consider to be “more important”.

Design Comparisons - Quickfire

Tasks and Communications are time-sensitive info, so I wanted to emphasize their importance by placing them on the navbar and better indicate any new tasks/messages with high-contrasting alerts.

Accepting/declining financial aid in the original design is buried underneath a lot of unclear and obscured buttons/dropdowns; I simplified things into a simple checkbox selection process with clear buttons that do what they say they do.

The degree planner lets students browse courses in a catalog and add it to their planner. In the original design, there’s no search bar (again) and it opens an entirely new page, creating a disconnect between the catalog and planner. I wanted to bridge this gap by turning it into a pop-up.

These are just a sample of the actual number of pages I redesigned. I really recommend checking out the prototype below as you’ll be able to view and compare the original design by clicking the green clock symbol on the navbar (and also I worked really hard on it :) ) .

Prototype

Reflection

I’m really happy with the way I approached this project; this was the first time I went out and gathered real responses from users and actually applied it to my design process and decision making. I’m also pleased with the way the final product turned out and (as naive as this probably sounds) I actually think that there might be a chance that UTD could pick this project up and turn it into a reality.But, if there was one thing I’d do differently, it would be how I structured my user surveys. Throughout the project I found myself wishing I had written better questions that would’ve given me a lot more insight and allowed me to make decisions more confidently.Other than that, this was by far the most I’ve ever pushed my design skills and Figma knowledge. I wanted to emulate how I thought a “real” designer would actually handle this redesign, so in the Figma file there’s a relatively robust design system (that nobody else will use) that I made from scratch.The prototype also contains the most high-fidelity wireframes I’ve ever made, with interactions that have no business being as detailed as they are for a Figma file (i.e. a functioning search bar). While the interactions I stuffed into this prototype are admittedly unnecessary, I learned an incredible amount of just how far I can push Figma. I would even go as far as to say that I’m now an expert in it.This project was a very important learning experience for me, and I’m so happy that I undertook it!