Introduction
Hello again! Now that you’re all fired up from this critique of Oxy’s course registration process, are you ready to see an elegant design solution to fix it?
Consider your wish granted. Well, sort of.
While the entire system is indeed in desperate need of a redesign, for the sake of my sanity and yours, in this post I will discuss the evolution of a design intended to fix a problem much smaller in scale.
One so small and endured by so many students that I even forgot to include it in my original critique.
Choosing a study abroad program!
At first glance, this problem may seem a little irrelevant compared to the other problems I discussed. After all, two thirds of students are able to navigate such a problem before they graduate! However, in the current course registration system, accomplishing such a task requires students to retain information from meetings with the International Program Office, or IPO, and department chairs and online tools such as IPO’s website. Since this information is spread across numerous systems, the speed at which students can access it is significantly constrained, preventing students from addressing a vital need:
Can I study abroad and still graduate on time?
To satisfy this need, my team set out to redesign this aspect of the current system. In this post, I will discuss the evolution of such a design, and how we used user feedback to improve it over numerous design iterations.
Let’s begin.
Users
Because this app’s purpose is to allow students to see if they can graduate on time while being able to study abroad, we designed it for any Oxy student, Freshman through Junior, interested in going abroad. This eliminated the need to focus on a gradual learning curve.
After examining this list, we generated our first mockup to get feedback from users. Overall, the design arch of the project took place in the following stages: Brainstorming, User Testing + Mockups.
Next, let’s take a look at these stages!
Design Arch
Brainstorming + First Mockup
To begin, my team and I believed the biggest obstacle that studying abroad played in the path toward graduating on time was the uncertainty of how many courses would satisfy major requirements within the program. After all, students typically go abroad to study material related to their major, therefore could only satisfy major/CORE requirements.
Therefore, we envisioned that students would need the following information for each program to decide whether they could study abroad and graduate on time:
-approved courses for major/minor requirements
-number of courses required to fulfill majors/minors when returning from program
-a link to the program on the IPO website
To retrieve this information, users would enter the following information:
-major
-minor
-term they’d wish to go abroad
-country they’d travel to
-city they’d travel to
Furthermore, the design would have the following features:
-study abroad programs would be ranked and color coded either green, yellow, or red to indicate the number of courses they would have to take per semester upon returning to fulfill major/minor requirements
-users would be able to “save” certain programs to view later on
-a pop-up would appear if the term they entered conflicted with any mandatory classes at Oxy only offered during that term (such as Junior or Senior Seminar)
After working hours on end to meticulously craft our first design, we came up with this beauty:
Let’s take a look at how students reacted to it in our first round of user testing!
First Round User Testing + Second Mockup
To get a feel for if the initial design was satisfying the core need of studying abroad and still being on track to graduate on time, we conducted the first round of user tests in a qualitative manner, asking users to locate all the information the app offers and narrate their thought processes along the way:
Overall, the users found all the information presented relevant! However, the biggest qualms boiled down to three topics: edge cases, web conventions, and additional information.
Edges Cases
In general, the initial design was not built with Freshman in mind. This became clear when interviewing undeclared Freshman, who were unsure how to proceed when prompted for both a major and minor. Furthermore, one Freshman (who didn’t know where they wanted to study abroad) expected to see the locations associated with each program, yet the design failed to meet this conceptual model. As a result, we felt like this design constrained user experience for the younger demographic of our intended user base.
To address this issue, we made it so only one major is required for the query to work and displayed geographical information in the upper left corner of each program (if one of the parameters was left blank).
Note: while many programs have the city and country in their name, many don’t, thus it was necessary to add geographic information to maintain consistency
On the other hand, a Junior theater and computer science major informed us of all the circumstances that can jeopardize eligibility for studying abroad that we simply didn’t account for. Because such circumstances inform users if studying abroad is even an option, failure to add these to the next design iteration would fail to satisfy the core need we set out to meet.
To solve this, we created pop-ups warnings that would inform users before they continue searching if they have circumstances that would jeopardize their eligibility for certain programs. Unlike conflicts with mandatory classes, these new circumstances accounted for are more transient, thus it does not prevent the query from taking place.
Web Conventions
On a separate note, almost every student we interviewed reported an expectation that the design failed to adhere to. The most blatant example of this was the lack of a legend detailing the meaning of the color coding system. Furthermore, one Sophomore physics major confused the symbol for the signifier we used to afford the action of using an expandable/collapsible menu with the download icon, thus failed to find further program information. The key takeaway here was that the design failed to use popular web conventions, which forced users to guess the mapping between signifiers and affordances, forcing their attention away from the task at hand.
To address this attentional issue, we vowed to include a legend in later design iterations and changed the signifier to a triangle.
Additional Information
Lastly, while this design presented relevant information, there was one word that was repeated throughout user tests that conveyed that additional information was desired:
“more”
While users craved more information, we felt as though alternative information would stray from the goal of the app: to determine whether or not studying abroad and graduating on time is an option. Nevertheless, we added the ability to see which courses are offered at Oxy, the number of units that would transfer over, and the courses required to fulfill major/minor requirements for the sake of experimentation.
Additionally, after reassessing the initial goal of the design, we removed the ability to save courses for future reference and yellow from the color scheme because we no longer believed they helped students decide if they can study abroad and still graduate on time: instead, the ability to save courses satisfied the need to find optimal programs and a yellow color scheme added ambiguity to a decision that we felt should remain as clear as possible.
Lastly, we increased the space between the rows showing different programs in order to minimize the amount of information per square inch and therefore maximize the attention the user can have while deciding if studying abroad while graduating on time is an option.
Let’s take a look at how students reacted to this new design!
Second Round User Testing + Third Mockup
The goal of the second user test was to quantitatively assess the usefulness of each signifier and further learn what information students need when deciding if they can study abroad and still graduate on time.
To do so, we gave users tasks to find various bits of information and recorded which signifiers they clicked and whether they would seek out this information when determining if studying abroad and graduating on time is an option.
Overall, the feedback we got was mainly positive! Nevertheless, the two domains that criticism fell under were feedback and information displayed.
Note: there should be spaces between rows of programs, this aspect of the design was not altered
Feedback
While every user was able to map the correct signifier to their intended affordance eventually, the speed at which they did so varied significantly from student to student. For example, while one Junior computer science major was able to associate each row of study abroad programs with separate expandable/collapsible menus, a Junior history major spent more time navigating the interface (not to call out any history majors). This juxtaposition revealed a lack of feedback that users were receiving from signifiers when navigating the design; an issue that takes time and attention away from determining if studying abroad is an option.
To solve it, we made it so the cursor would change shape when it’s hovered over a signifier, and the borders of each row would become outlined when hovering over them, like in Gmail.
Information Displayed
One of the slowest tasks that occurred across the user tests was to find the remaining classes needed for graduation when returning from a given program. We believed this to be the case because while other course information was presented columns in a table, this information was displayed in a sentence, disrupting a convention that we had established.
To fix this, my team decided to put it into a separate table beneath the first table rather than keep it in a long sentence.
Then, to add context to this list of courses, we added information on when each course must be taken within each cell. This allows for students to begin forecasting their course schedules for their remaining semesters at Oxy, improving the chance that they graduate on time.
On a separate note, a Sophomore tour guide pointed out the minimum number of units that transfer over is 16, removing any advantages that some programs many have over others unit-wise, thus rendering information regarding units in the expandable/collapsible menus useless. To verify this further, we reached out to IPO.
Sure enough, the student was right! We quickly removed this information from the expandable/collapsible menus, reverting slightly back to the last iteration.
However, there still remains a discrepancy between how many courses are approved to satisfy major/minor/CORE requirements across different study abroad programs, thus our color scheme does differentiate programs’ abilities to allow students to graduate on time.
Furthermore, we removed the ability to see if approved classes are offered at Oxy (despite user approval) since it was not applicable toward determining if they can study abroad and still graduate on time.
Lastly, we added an additional error pop-up that would notify users if they have an insufficient language level for various programs and finally added a color scheme legend.
Let’s take a look at how students reacted to this third iteration of the initial design!
Third Round User Testing + Fourth Mockup
To get a feel for how these changes affected the big picture of the design, we decided to revert back to qualitative testing, assessing students’ overall opinions of the design.
In general, they felt satisfied with it! The only critique that came about regarded the color scheme.
Color Scheme
Upon examining the legend description, a Sophomore philosophy major who is currently taking five classes was confused that more than three classes a semester for a minor or minor was the cutoff for a program’s viability. To him, a courseload of four or more classes was completely doable, thus an extreme color such as red did not properly match his conceptual model of the criteria. Furthermore, he was confused that such thresholds didn’t encapsulate all of the workload that they would expect when returning, but rather just for one single major or minor.
We agreed with this feedback, and quickly modified the entire color coding system. First, we made the number used to evaluate a program’s ability to let students graduate on time correspond to the total number of courses they must take for all majors, minors, and CORE requirements per semester.
Then, we reverted back to the original color scheme, altering the cutoffs for each color to the following:
While we removed this stoplight-esque color scheme after the first round of user testing because we thought it added extra ambiguity to a question that should yield a “yes” or “no” answer, this updated color scheme still described programs that allow students to graduate on time, just with more specificity.
In addition to these changes, we added a red asterisk next to the label of the ‘Major’ parameter to indicate that it’s required for the query to work. We did so because it informs users exactly what information is needed to use the application, allowing them to direct their attention toward deciding if they can study abroad and still graduate on time.
Furthermore, we framed the labels of parameters in gray boxes in order to draw the attention of the user to the parameters needed to generate a query, and thus streamline the process of seeing if studying abroad and graduating on time is an option.
Aside from color scheme, we altered the symbol for the signifier that affords the action of expanding and collapsing each program from a triangle to a chevron to distinguish it from a drop-down menu.
This alteration further clarified the mapping of signifiers to their corresponding affordances, allowing users to direct their attention toward determining if they can study abroad while being able to graduate on time.
Fourth Round User Testing + Final Mockup
Because feedback was so positive for the last user test, we wanted to get another overarching assessment of how well the redesign satisfied the need to know if studying abroad while graduating on time an option. To do so, we gave the design to students (all of those who we had tested and many who we had not), described what need it satisfies, and let them discover how it does so without further guidance.
Across the board, no students reported any confusion or unfulfilled needs.
At this point, we were confident with how our redesign satisfied the need we set out to meet, and declared it our final product.
Below are screenshots of the final design:
Summary
And just like that, the redesign was all grown up.
Along the course of its development, my team explored and attempted countless features. While many of them were removed, like the ability to save courses or see the number of units that correspond to approved courses, and others made triumphant reappearances, such as the stoplight color scheme, we feel as though the ones present in this redesign satisfy the need for students to determine if they can study abroad while graduating on time far better than the current system.
At the surface, this redesign allows users to access the same information much quicker by displaying it in tables rather than requiring students to go back and forth between the IPO office, their department chair’s office (which are often only available by appointment) and the IPO’s website. This reduction in the time of the overall process reduces the likelihood that organizational errors will be made along the way, increasing the chances that their core need is answered correctly.
In addition, the redesign does things that the current system simply does not. For one, it automatically extracts information regarding course history, circumstances that would jeopardize eligibility for various programs (GPA, language proficiency, missing a mandatory course only offered at Oxy, holds not cleared, applying past the deadline, no investigations for Oxy violations), which major/minor/CORE requirement each approved course satisfies, and which courses must be taken in order to graduate when returning and when just by signing in. This allows for users to direct their attention toward determining if they can study abroad and graduate.
Furthermore, this redesign boils all this information to a number that ranks a program’s ability to satisfy major/minor/CORE requirements (thus allow for students to graduate on time), and colors it one of three colors. This significantly reduces the amount of information that users must retain when determining if studying abroad and graduating on time is an option, allowing them to adhere to this need with the most accurate information possible.
Takeaways
While we claimed our fourth design iteration to be the final design, in reality, we’ve learned that one can never be done improving a product to meet user needs.
While we set out to redesign a system to adhere to a very important core need, it was hard to find a balance between features that were relevant to this need and those that simply improved user experience. Because this line is so challenging to define, we expect to be chasing after it long after this post is published.
Now, back to more user testing!
