California State University - Long BeachStudent Center Redesign

Keep up with finances, academics, and enrollment easily.
٭NOT AFFILIATED WITH CSULB
٭PERSONAL PROJECT



screenshot of CSULB student center redesign.

My roles

UX Designer
Researcher

Tools

Figma
Illustrator 
Photoshop

Context

Designed in 4 months 

Summary

Research

Ideation

Design

Reflection

TL;DR...

problem

Finding Academic information is difficult

As a student at California State University - Long Beach, I noticed how difficult it was to navigate Student Center. It is outdated and difficult to find the correct information without going through four different menus. CSULB currently has 40,000 students enrolled and more coming. Every student is faced with Student Center's inconsistencies and difficulties.

→ How can Student Center be redesigned to make accessing important information easier?

Solution

Redesigning Student Center

Improve site structure to allow users to easily access important information such as schedule of classes, grades, and degree progress.

before and after student center redesign.

The full rundown

Research

Surveying students

💻 Surveyed 11 Students via Google Forms
2 Freshmen, 1 Sophomore, 7 Juniors, and 1 Senior

Insights

From my research and interview with peers I gained insights on what they perceived to be important qualities of Student Center and what they use Student Center for. Three major themes I found were:

To start the process off, I conducted research by conducting surveys and speaking with other students about their experience using Student Center and what they use it for.

Research Questions:  
1. What features do you use on student center?  
2. How many times do you use student center in a month?
3. What device do you usually use to access student center?  
4. Do you find it difficult to switch between pages? If so, why?  
5. How comfortable do you feel navigating student center (including menus and page features)? (from 1-10)

⚡ EFFICIENCY
Accessing academic information is ridden with running into errors or seeing useless info.
🖥️ CONVENIENCE
Student Center page forces students to look through many hidden menus and buttons.
🗓️ BEING UP TO DATE
Being behind on important dates or academic information can result in delayed graduation.
How might we design a system where students can find info faster?
How might we design a system that students can navigate clearly?
How might we design a system where students can stay up to date?

Persona

I created a persona based on my survey. Utilizing this persona will allow me understand student's motivations, frustrations, and goals when using Student Center.

User Flow: Academic Requirements

Based on surveys from users and observations, I created a journey map of a student looking for academic requirements to enroll to better understand the pain points and address them with potential design solutions.

UX Audit

I wanted to clearly identify what is working and what isn't. From the insights I gathered from my interview, I conducted a UX audit on the most frequented pages. This allowed me to pin point issues in visual hierarchy, inconsistencies, and difficulties when using the page.

Back button results in an error that forces them back to the main page
Students have trouble finding information in hidden menus and pages
A lot of unnecessary information and menus leads to confusion
Inconsistent styles and visual hierarchy makes it look outdated

Design Requirements

After conducting the UX Audit and student surveys, I compiled a list of requirements and opportunities should be incorporated into Student Center.

REQUIREMENTS
- Find academic requirements
- Find grades for multiple semesters
- Accept Financial Aid and view Finances
- To-Do list for important tasks
OPPORTUNITIES
- Distilling information to essentials
- Straight forward task flow
- Removing unnecessary pages and menus
- Search bar or helper

Ideations

Design Directions

I kept in mind requirements for Student Center including finding essential information and possible opportunities such as removing the hassle of looking through many pages. 2 options that I explored that could remedy the frustration of navigating student center were a AI Helper or a complete redesign.

Secondary Research on Chat bots

I looked at opinions people have of chat bots in different forums along with statistics about the usefulness of bots and AI helpers. My key findings were that Chat bots and AI helpers:

EFFECTIVE FOR SMALL TASKS
Chat bots are effective in finding solutions to inputs that are straight forward. "Where can I find _______"
INTRUSIVE
Others find that chat bots are intrusive and useless. It can be difficult when putting in complex requests.
DOESN'T DISTILL INFO
Student Center information is dense. Chat bots can find the info, but not make the information easier to digest.

Why a dashboard redesign?

A search bar and helper can find the information for them, but not display it in a way that is easy to digest.
My UX Audit informed me that even if I were to add a chat bot, the page will still have usability issues for students who defer the helper. In addition to this, 2 of CSULB's main applications use a dashboard format.

The original process of looking at grades forced students to reload the term selection page and could not use the back button.

Competitive analysis & Inspiration

I looked at dashboards used in other websites including Canvas and the E-Refund system at Long Beach.

∙ Other pages that CSULB uses are in dashboard form and have consistent colors and branding
∙ Many websites use blocks to organize information in an easy to digest format
∙ Having sections and quick links grouped on the left allows for easier access to important information

Design

Design & Testing

I condensed a lot of the information presented to be easily digestible for students. The dashboard allows users to navigate without opening  hidden menus to see important information.

Users were able to find academic information up to 50% faster. 

Students were unable to find important academic information on the same page, dealt with drop down menus in drop down menus, and layers of unimportant info.

Iterations

After testing the dashboard with other students, I gained insight on changed that would make using the dashboard easier. This included adding a filter that can be accessed on the same page, tags on the to do list menu, and clarifying which tab the students are on.

student center redesign wireframes.

Final Dashboard

Student Center Redesign home page with annotations. Student Center Redesign academics page with annotations. Student Center Redesign finances page with annotations.

Reflection

Reflections & Next steps...

My first hand experience gave me a deep understanding of student's struggles.
As a student at CSULB who has used Student Center on multiple platforms over my school career, I have great understanding about the struggle of navigating the app.
Expanding this dashboard system to other CSULB applications.
If I were to continue this project, I would expand this structure to other CSULB apps. Single sign on has over 20 apps in different formats and visual design.
Mobile Adaptation.
Another way to continue this project would be adapting this change to suit mobile applications. The dashboard can translate into a menu on mobile. The current Student Center does not have responsive design.
Back to the top!
NASA JPL logo