Duration
2020/07 (About 3 weeks)
My role
UI/UX Designer
(This is a personal side project)
Summary
I redesigned the course registration system of Waseda UniversityーJapan's number one private university. I started by finding out problems and going through the end-to-end design process.
Problem
How to improve the old and complicated course registration system to make it easier for students to use?
Solution
I redesigned the information architecture and user flow based on the object-oriented user interface method. I also designed the mobile website based on user interviews and add functions such as "timetable" and "wish list" that are convenient for students.
Background ＆ Solution Overview
The course registration system I used at Waseda University was old and was not easy to use, so I felt stressed every time I registered a subject.
Even after graduating for about a year, I am still not able to forget the poor usability of the course registration system. So I decided to redesign it.
Before
The exist course registration.
After
The redesigned course registration.
Process
Problem
I and my classmates felt that there were too many steps to register a subject, but what is the core problem of the system?
In order to identify the problem, I looked back on the registration flow and interviewed my friend who still using it.
I found the problem that every time I want to do something, I have to return to the top page (registered course list) at once.
The existing user flows.
I interviewed my friend who is still studying in Waseda University to get a more objective understanding of usability and challenges. I found out the problems and discover potential needs.
🔎 Problem
💡 Potential needs
I summarized the result of the interview into a user journey map.
User Flow
I decided to dig into the problem of complicated steps.
Because the interfaces are based on task, every time do something, the students have to return to the top page (Registration List) at once. So the steps became so complicated.
I redesigned the flow based on an object-oriented method, students are able to do the same operations on different subjects.
Before：Task-based user flow.
After：Object-oriented user flow.
Wireframe
After understanding the flow, I use my favorite pen and paper to draw down wireframes. It helps me quickly visualize the picture in my brain.
After understanding the flow, I sketched rough ideas on paper immediately.
Design Solution
To solve the problem and Meet potential needs, I mainly designed 5 solutions.
Originally, students can not search unless they enter the above condition. Search efficiency is poor due to many restrictions. For example, you cannot search by subject name or day of the week.With the new design, students can enter only the conditions they want to narrow down and search freely.
Before
Before：It must be entered in the order.
After
After: It can be searched freely regardless of the order of condition input.
Originally, students have to go back to the top page once from search results to register for courses.
You cannot apply directly from the search results, and since "select course" is the same as “register course", so that return to the top page and click the "Course Registration" is an unnecessary step.
With the new design, students can register for courses from the search results, or can add them to the "Wish List" and apply later. The concept is like "add to cart" and "buy now" on an online shop.
Before
Before: From search to Course Registration, students have to go to the top page at once.
After
After: Students can save their favorite courses and register from With List.
Even if the students don't have a laptop, they can easily register or cancel courses on smartphones.
Before
Before: It was not responsive, so the usability was bad.
After
After: It became easier to register for courses on smartphone.
"How to display a huge table on a smartphone" was a big challenge.
Even if it fits the screen size of a smartphone, it might be lack usability.
I tried some solutions like "Display only important items" and "Fix checkboxes and subject names", and found that "Turn the table vertically and fix the title" would be easiest to use.
Turning the table vertically and fixing the titles.
According to the user interview, some students set the class schedule as a smartphone wallpaper to check the next class.
So, in addition to adding a class schedule, I also designed a feature to save it as an image.
After
New feature: Students are able to check the timetable and save it into an image.
I visualized the course credits that are important to students. And transforming them into an easy-to-understand dashboard.
I think it will make it easier to register for courses as if it were a game!
Before
Before: It’s hard to know how many course credits are left.
After
After: It is easy to know how many course credits are left and required for graduation.
Usability interview
Since my friend is abroad, I did a user test online. Also, he is an existing user of the course registration and is familiar to register for the course. So, this time, I asked him to play the prototype freely without setting a task.
He is an existing user so he can give me feedback compared to older systems.
He also told me about the leaked functions. (The functions for regular students and short-term international students are slightly different)
Feedback：
There’s no “Change Course” that the student can choose which course to count the course credit they want.
Solution：
Since it is inconvenient to use the dropdown in the table, I made a text link, and clicking it will pop up a modal to change course.
Feedback：
I hope that there’s a button to return to the course list from the search results.
Solution：
Placing a button “return to Registration List” below the search results.
Feedback：
For subjects that cannot be registered, it may be better to un-active the check box.
Solution：
Distinguishing between "selectable" and "non-selectable" states of the check box.
Reflections
I enjoyed being able to redesign products that I found difficult to use when I was studying at Waseda University.
It was difficult to redesign a huge and complicated system, but the students said, "The new design is amazing and it's easier to use than the exist one", and I felt a sense of accomplishment above all.
I asked for feedback from my design manager and it was a great chance for learning.
For example, the awareness of affordance. (Is it an active button or not?)
To make the state of the components easier to understand at first glance, I referred to Google's product and modified the components of the dashboard and search bar.
I modified the interfaces with awareness of affordances.
To optimize the usability I would like to brush up on the flow of Change Course, Registration List and the dashboard on Mobile. Also, this time I interviewed only one student because it was a short-term personal side project.
I would like to interview more students to make sure the redesigns meet students’ needs and make improvements.
Last, of course, it would be great if I could propose it to the university!
