Redesigning SIS: Step-by-Step UX Research
During the cold wintery days of January I found myself being pushed into the immense, wide-ranging scope of ux research. At the onset of my ux design internship training, my peers and I were being taught how to conduct user research step by step. Although quite daunting at first, I was quickly able to overcome initial social anxieties that came with first trying to expose myself to strangers and ask them to give me some of their time for an interview or to test out a prototype. The fun parts of ux design started kicking in when I finally got to sit down and apply the feedback I gained through research to design and reiterate prototypes.
The project I’ve spent these last few months working on has been to propose a better user flow for a website my fellow UVA students and I depend on for all things academic, financial, and whatever else SIS encompasses that none of us really understand. The product’s name as I mentioned is SIS, meaning Student Information System. This widely-used, and largely-frustrating website comes with a plethora of user interaction issues and makes for the perfect learning platform for ux research. So now let’s take a look into this step-by-step process through the lens of SIS!
Step 1: The UX Mindset
The goal of this project was to uncover all aspects of a student’s experience with SIS and improve it through user interviews, journey mapping, wireframing, prototyping, and conducting usability tests. One of the most common uses of SIS is enrolling in classes. The readability (or rather unreadability), user flow, and structure of the site makes this process dishearteningly troublesome. To give you an idea of the current state of UVA’s most perplexing site, here’s a screenshot:
As you can tell by now, I’m a bit biased in my contempt towards SIS, but as you’ll see through the user interviews I’ve conducted, my opinion is pretty common among students. I mean just look at the size of the text and unstyled div’s of the site. Anyways, let’s progress on this journey and check out the next step in ux research: User Interviews.
Step 2: User Interviews
User interviews help us understand a user’s needs, desires, preferences, or frustrations with a product and its features. During my user interviews, I attempted to delve into many of the pain points for SIS course enrollment. One of the important aspects of conducting user interviews is preparation. In my prep, I outlined questions to guide the interview and tried to craft follow-up questions for different avenues I presumed the interview could go down. During the interviews, I asked some my carefully crafted questions and left room for the conversation to guide the rest and elicit appropriate follow-up questions. Here’s a screenshot of some of the questions I came up with prior to the interviews and insights gained after:
One of the hardest parts about the interviews was not showing any bias towards one opinion. As you have seen I don’t much care for SIS, but when it came to conducting these interviews I had to work hard to not let that show in my reactions of the verbiage of my questions. By the third and fourth interview I finally felt like I had found a good rhythm.
Some of the main feedback I received was concerns with the overwhelming scope of topics SIS is tasked to cover. The many features of the site render it difficult to navigate and fully understand. Many students complained about the clustered layout of SIS in how many functions were grouped in minimal space and didn’t take advantage of the extra whitespace in between columns. Moving forward in my research and prototyping, I realized my main goal would be to design a more user friendly and aesthetically pleasing SIS in order to make the most used features of the site more easily accessible.
Step 3: Journey Mapping
During the course of my training, our journey mapping training actually went beyond the scope of SIS and we were allowed to journey map any product/site we desired in order to learn more about the process. I ended up journey mapping the process of buying an apple watch:
However, now going back into my research, I decided to create a new journey map covering SIS. Journey mapping consists of looking a the steps, feelings, pain points, and opportunities a user experiences when interacting with a product. This helps uncover gaps in the user experience which allows us to take action and optimize the user experience.
Creating a persona to start journey mapping the user flow of using SIS for enrollment was rather simple as the representative users of the site mostly consisted of a narrow demographic: ~17–22 year old college students. The focus of journey mapping hones in on the user experience and not just the system. Below is the quick journey map I did for SIS:
Step 4: Wireframing
Taking in the insights gained from our user interviews and journey maps, my class was finally sent to the drawing board to sketch out a few wireframes for potential layouts and designs. In our wireframes, we demonstrated the functionality, layount, contents, and user flow of SIS before any design and aesthetic elements were brought into play. During the ideation phase of wireframing, we generated multiple variations of layouts on the single site. Then during the validation phase, we reviewed each others designs to find improvement opportunities and highlight the pros through a system of placing red dots on elements we preferred of each paper wireframe. Here are my first wireframes:
Then, after gaining feedback from our peers we were sent of again to reiterate 5 more wireframes. These wireframes improved upon the ones we had previously designed and incorporated other elements that were thought to significantly improve the user experience. The elements our class seemed to highlight most often was a more aesthetic home page, centralized navigation bar, and external links and contact information for UVA and UVA affiliated organizations and numbers. Here are my re-designed wireframes:
Step 5: User Flowcharts
Designing a user flowchart helps you visualize the steps a user takes to complete a task and show decision points of the journey to a specific task. User flowcharts are used to communicate the intended flow of a user through various pages and actions in a site.
For this project, the task we focused on was the process of enrolling in a class that fulfills a given requirement (math, historical perspectives, second writing, etc.). Interestingly, the user flow for this task on the existing SIS site is somewhat intuitive:
In my own desired/expected user flow for the prototype I wished to create, I used most of the same steps and simply eliminated the need to go to a search page and then search by requirements by adding that feature to the homepage. Here was my expected user flow:
Step 6: UX Prototyping
Having an intended user flow, I could now start the fun part, in my opinion, of ux design: prototyping. In prototypes, designers mockup and test solutions in order to solve real user problems. Prototypes are what we use to test designs. In order to make my prototypes interactive, I first created my wireframe using Figma, and then transferred the design over onto Invision in order to create a click-through wireframe prototype. You can find my first iteration of the wireframe and prototype here:
Unlike the existing SIS, I offered our users a whole-site search option, a centralized navigation bar, a preview of their course path, a designated section for important news and events, and a contact information footer, all the while making the site more readable by using larger fonts and making the layout more aesthetically pleasing.
Step 7: Usability Testing
Usability testing proved to be one of the most crucial, insightful, and frustrating aspects of ux research. Using our prototypes, we had to now venture off into the real world and ask real students, our representative users, to navigate through our prototype, talking out loud about the steps they were taking in order to accomplish a given task. Having the user/testee talk out loud helps give insight into their mental model of the process and allows you to find the usability issues in your design that maybe you never expected.
During the usability tests for my prototype, I found that redesigning SIS at such a large scale made it more unfamiliar for my users and a bit harder to navigate than expected. Although I had a search for requirements option directly on the homepage, I found my subjects trying to click the other search options on the page when trying to find a class that fit a specific requirement. This showed me that I would have to change the positioning of the site-wide search option to a spot that more intuitively looked like an all encompassing search bar. Next, having an option for “Academics” in my nav bar made students naturally drift towards that option first. This showed me that maybe I needed to make the “Search by Requirements” button more visible or bigger in order to stand out.
By the end of our usability tests, I realized the frustrating part, this meant we had to do all of it all over again.
Step 8: Doing It All Over
By the time I sat down to re-design I found I really only had to reiterate the last two steps of process: wireframing and prototyping. Taking into account everything I had already learned I created my final prototype attached below:
After months of training, research, and designing I am very happy with how far I’ve come from the initial paper wireframes we did one somber Wednesday afternoon in class. I can’t say I’d love to do more usability tests and see if my prototype works best in the way I intend it to just because I don’t want to have to redesign this perplexing site. However, I have enjoyed this process very much and can’t wait to conduct more user research (hopefully on more engaging products).
