Redesigning SelfService, Part 1

SelfService is a portal for Brown University students to perform important actions such as updating personal information, checking student accounts, looking up grades, and more. Despite its importance for students, it is difficult to use for a host of reasons, primarily navigation. The organization of links contributes greatly to the difficulty of navigation.

Fig. 1: Original page

Fig. 2: Sitemap for original page

I first had two different participants perform card sorting to figure out a better sitemap for SelfService, the results of which are shown below.

Fig. 3: Sorter 1's groups (from left to right: "Grades and Classes," "Placement Tests" (subgroup of "Grades and Classes"), "Payment and Billing," "Personal Information," "Apply to Graduate"

Fig. 4: Sorter 2's groups (from left to right: "General," "Financial," "Classes")

Sorter 1 sorted the cards slowly, and placed them into piles. She was not sure whether to include the cards in the category "Placement Tests" as their own category or within "Classes and Grades," but in the end she decided to make them a subcategory of "Classes and Grades." She also was not sure if "Apply to Graduate" should be in a separate category by itself or if it should be included in "Personal Information," but eventually decided to put it in its own category by itself.

Sorter 2 sorted the cards into three groups (Fig 3.2): "General," "Financial," and "Classes." Sorter 2 sorted the cards quickly into these three groups, and did not create any new groups while sorting (i.e. Sorter 2 stuck with these three groups through the whole sorting process).

Thus, based on these card sorts, the most logical groups would be "Personal Information," "Academics," and "Payment and Billing."

Fig. 5: Improved Sitemap for Self Service

In my improved sitemap, the main changes I made was reconfiguring the categories. Instead of two main categories, "Personal Information" and "Student," there are now three main categories: "Personal Information," "Academics," and "Payment and Billing." This was because in both card sorts, both people sorted the cards into these three categories.

Since Sorter 1 named one of the groups "Grades and Classes" (Sorter 2 named this group "Grades"), I also created two new subcategories for "Academics" (in addition to "Placement Tests," which Sorter 1 suggested). Other changes include getting rid of the "Student" category and moving "Brown ID Photo Submission" and "Review my Applications" from "Student" to "Personal Information," as both card sorts did this. "Apply to Graduate" is also moved from "Records" (now the equivalent of "Grades") to its own subcategory under "Academics."

Thus, based on the improved sitemap, and with the goal of improving the ease of navigation, I created a simple prototype of an improved SelfService, as well as storyboards to explain user flow.

Fig. 6: Home Page. Mouse is not hovering over a menu.

Fig. 7: Mouse is hovering over Academics menu, drop down menu appears.

Fig. 8: Mouse moves to Classes submenu of Academics, new options appear

Fig. 9: Mouse moves to Change Class Grading Options. Clicking on this will open a new page.

Fig. 10: The page that opens after clicking Change Class Grade Options. Note that the menu bar is always present.

The storyboards reflect the changes made in site mapping and user flow. The menu bar consists of menus for the three main categories: Personal Information, Academics, and Payment and Billing. I decided to use menus that could be hovered over because an issue with the previous site map and interface was that the pages were not categorized in the most intuitive ways, and because clicking on the wrong option when finding a page is a common occurrence.

With the improved user flow and hierarchy, the user has an easier time finding the page they need, and if they hover over the wrong menu it is a simple task to just move the cursor to a different menu. If the user clicks on the incorrect page, since the hover menu appears on every page, it is still easy to find the right page.