Albert, as a course search and registration website for NYU students, receives an enormous volume of complaints every semester for the frustration and confusion it causes.
With a desire to solve the problem for our community, Albert Redesign is a UX practice that improves users’ confidence and efficiency of browsing, selecting, and enrolling in courses.
ROLE
UX Researcher & Designer —Research, UI Design, User Testing, Prototyping,
DURATION
6 weeks
TOOL
Figma, Photoshop, Illustrator
TEAM
Ruyi Chen & Heather Kim
PROBLEM:
Course registration is an essential part of any student's academic career in college. For New York University, the registration website is named Albert. It was supposed to be a digital tool that can help students with browsing, selecting, and enrolling in courses. However, it is now becoming a barrier and frustration for students to use. Some main complaints from users include: hard to effectively search for content, lots of repeated unnecessary steps, dull and confusing user interface with lousy readability.
SOLUTION:
By identifying users' three main pain points, our design solution focuses on boosting navigation efficiency by redesigning the search and filter function, simplifying registration workflow, as well as improving visual hierarchy and readability. For the final round of user testing, we received a lot of positive feedback upon this redesign, and students stated that they would for sure enjoy using this.
Process Overview
1. Interview & Synthesis
2. PERSONA & USER ANALYSIS
During the interviews, we noticed that there are two kinds of users: "undergrad Olivia" and "grad Ashley."
3. COMPETITIVE ANALYSIS
In order to have more ideas during the ideation process, I did three types of competitive analysis:1) “How do other schools approach course registration?”
I interviewed students from 5 different schools and asked them to walk me through their registration platform. Schools include :
The University of Hong Kong (Interesting insights on the visual design system, good personalized academic plan)
California College of the Arts (Great information hierarchy, search/filter function and error validation process)
Northwestern University (Effective way of timetable visualization)
Fordham University (Easy to keep track of enrolled classes and timetable)
University of Toronto (Separate workflow, accessible timetable)
2) “How do companies organize and filter information?”
Knowing google and traveling sites are good at search and filter information, I researched in:
Expedia(hotel/flights search, filter function; default search, filter pop-up, filter hint explanation)
Airbnb (top positioned search/filter; default search content, filter drop-down, filter hint explanation)
Bookings(left side filter, entry card layout, default search content)
Google (search, result display)
3) “How do companies deal with ‘shopping cart to finalization’ workflow?“
I took a lot at the shopping cart system from e-commerce sites from:
Amazon(shopping cart information organization, one step check-out workflow)
Jingdong (Mouse hover shopping cart icon to preview what’s in the shopping cart)
Search/Filter
Workflow
Information Hierarchy
1) “How might we make the Search Bar and Filter Function easier to use and more trustworthy?”
Limited Choice - two search bars into one
Clearer Hints - Define what’s understandable to users as search keywords and apply.
Intuitive Reposition - Position Filter and return button to left, search bar on top.
Separated Function - separate the “Clear Filters“ and “Return to browse by subject“ button.
Improved Efficiency - Easy access to saved filter / bookmark your school/classes? Have an anchor on the side for browsing through schools?
Previewed Filter - We also sent out a questionnaire asking for the renaming of filter section - which we later found out the true problem is not the naming but a preview hint of what the filters are.
Before:
After:
2) “How might we simplify the workflow?”
Delete unnecessary or duplicated steps.
Separate workflows so that users can switch between steps instead of starting from the very beginning. (shopping cart inspiration from e-commerce’s site)
Add a visualized timetable to decrease the chance of unsuccessful enrollment because of the time conflict of the courses.
Firstly, we put the timetable into a third column - but it occupied the space for main content. No.
Secondly, we put it under the filter section - But it is too small to be seen - so I added a button saying “click to expand the timetable”.
After user testing, I found out users need to see it all the time no matter where their mousing is scrolling to - therefore I put it into the page’s sub-header, which is a fixed position, therefore user can access it any time.
3) “How might we better organize and display the information?”
Use different Font Size/Color/Weight to differentiate between different information and to emphasize information with higher importance.
Arrange information in a way that is comforting to the eye
Only Display Information that is needed.
WIRE FRAME
1. NYU STYLE GUIDE
I later found out that NYU Albert was made by one professor and several CS students under a short period. CS department agreed that the current programming and template for Albert is outdated, and Albert will be updated soon. Therefore, we decided to incorporate NYU's design system for the newer version to create NYU’s very own registration site.
2. FINAL DESIGN FRAME BY FRAME
