ZotAccount Redesign
Written by: Sabrina Lacayo, Bryan Snyder, Shreya Kapoor, Evan Park
Overview of Redesign Project
The ZotAccount Redesign is a class project for Informatics 132, Projects in HCI, a course offered at the University of California, Irvine. The goal of this project was to apply Human-Computer Interaction (HCI) skills we learned throughout the course to a redesign project of our choice. Some of these skills include team collaboration plans, competitive analysis, interviews, surveys, user testing, heuristic evaluation, and mockups and wireframes. This post is to showcase how we applied the aforementioned skills to our redesign project of ZotAccount, an online tuition payment website for UCI students.
ZotAccount is a service provided to students of the University of California, Irvine to access financial aid services and pay certain fees. Students and outside guests (that are given special access) are able to view fees, access resources pertaining to financial planning, and make payments to the school. The payment service can currently be accessed via a web browser (limited on a mobile device) after students log in with their student ID numbers, UCInetID, and password.
The goals of the overall project were to develop an improved interface of the current service to provide a better experience compared to the current one that lacks visually and functionally. Since it is a site and service that students and/or outside guests use frequently in addition to holding important information regarding tuition and other services, it is crucial that users have a positive experience with it and trust it with more private information. With a better functioning interface that prioritizes the user’s needs and is pleasing visually, ZotAccount can become a productive service.
Methods Employed
To better understand the users of ZotAccount, our group used two methods: a survey and an interview. We created a survey with general and specific questions about how participants manage their budget or what kind of bank they use.
Each person in our team also recruited two participants to conduct a user interview. Our members recruited their friends and parents who have access to ZotAccount. We chose to have interviews in-person, through Facebook messenger, Zoom, and other chatting applications. On average, we spent 20–30 minutes for each interview.
Additionally, in order to grasp a better understanding of how users experience using ZotAccount, we conducted a user test on five individuals with six tasks and a post-user-test questionnaire. ZotAccount is very straightforward with limited accomplishable tasks, so we focused our user test on just the main activities one can do on ZotAccount. We decided it would be best to test users who are not familiar with the website but who can have access to our accounts; our immediate family who live in the same household as us were our best candidates.
By implementing the think-aloud protocol, we were able to gather more information about how the users felt throughout the test during each task. To determine the success of each task we used metrics such as time on task, number of errors, number of clicks, and a post-user-test questionnaire to gather thoughts on their satisfaction with the whole process and test.
We also conducted a heuristic evaluation using Nielen’s 10 Usability Heuristics. After we did our analyses separately, we discussed together our findings and then combined them and divided each by either good and bad. If we found something that ZotAccount does a good job of for each specific heuristic, we put it under the “Good” section, and if the site goes against the heuristic, we put it under the “Bad” section.
Results
Competitive Analysis
Our system that we chose, ZotAccount, has a difficult to use interface and complicates simple tasks such as managing tuition, fees, and health insurance. The user base for ZotAccount are UCI students and/or parents of those students who can use and access the website using a computer or smartphone device that is connected to the internet. Students and/or parents would use this service to view and manage their tuition, fees, and/or health insurance plans. If students or parents want to make a payment, they will have to access CASHNet through ZotAccount and make a payment there, which will automatically send payments directly to UCI.
We identified ZotAccount’s direct competitors as two other universities that also use CASHNet for paying tuition: USCe.pay and BruinBill. USCe.pay is the interface in which students who attend the University of Southern California can pay their tuition, check their balances, and authorize guests to pay any type of amount they need to. Its interface is more attractive and easier to use, providing appropriate and uncomplicated tabs and categorizing for students as well as laying out information in a more concise manner. BruinBill serves the same purpose of allowing students who attend UCLA to pay any fees charged by the university. However, BruinBill functions better than ZotAccount, as it has a more organized and easier to use interface, making the user experience a much more pleasant one; its professional yet simple layout and sorting make it a direct competitor of ZotAccount.
For this redesign, services Venmo and Paypal were identified as indirect competitors to ZotAccount. Venmo is an indirect competitor to ZotAccount because the basic purpose of the two systems is exchanging money. However, Venmo and ZotAccount have different user bases. ZotAccount can be accessed from UCI students or parents, while Venmo can be accessed from anyone who has a valid bank account and phone number in the United States. Similarly, PayPal also offers the basic action of exchanging money for goods and services, but targets more users and has a broader use than ZotAccount.
Understanding Our Users
We conducted 8 interviews, with each being about 30 minutes each. Questions revolved around how interviewees handled money in their life, and their different frustrations with shopping online or in person. To explore the qualitative data collected, we created a spreadsheet analysis, organizing our data by a question and the different interviews conducted. Interesting discoveries included a variety of payment and organization services that people use and the reasonings behind different preferences for online and in-person shopping experiences.
Most of the people we interviewed were undergraduate students (as most of the people we know [as undergraduate students] are other undergraduate students), but we also interviewed a couple of parents of students. When asking the interviewees whether they thought ZotAccount was usable, there was a mix of yes’s and no’s, but all were followed with negative comments about the system’s interface and communication of information. Following that question was one about usefulness, where the plethora of answers was similar to the previous question: different answers, but all along the same line that because it was the only outlet to pay tuition, it was useful by default. We then asked them about their personal struggles when using ZotAccount, where there were a variety of difficulties with the system expressed, like the navigation of the website, the payment methods, and the organization of different fees and services. The interview was wrapped up by asking the interviewees if they thought ZotAccount was good, in which the only one of them answered yes, and the rest answered no very bluntly.
Surveys
Demographics
To start off the survey, we asked very generic questions to get a sense of what the demographic of our survey respondents are. We found that the majority of our respondents are between 17 and 23 years old, meaning that we did not have a variety in age for our users, which could have affected the answers to the rest of the survey.
Banking and Money Management
We asked how participants manage their money. In this section, All participants responded that they are using a bank to manage money. Most of them use a mobile application and there are diverse banks. But, most participants use Wells Fargo, Bank of America, and Chase. Also, for more functions like sharing or sending money, they also use different electronic payment services such as Venmo.
ZotAccount
A large number of respondents used ZotAccount to pay and view fees. As well as only accessing it once a month, with a few only accessing it once a year. Although it is interesting when asked the question of what they found best about ZotAccount, only 27% said none. Our group had expected a higher number than what was received.
User Test
For our user test, we combined all our findings into a spreadsheet so that it will be easier to read and analyze. Here is an image of our spreadsheet with all of our findings for the user test.
Heuristic Evaluation
High Fidelity Mock-Ups
Reflections on the process and the outcomes
Taking account of our various forms of UX research (the survey, interviews, user testing, and heuristic evaluation) as long as our personal experiences with the website, we forged ahead in redesigning ZotAccount. Based on our high-level research objectives, we developed four redesign targets of different sizes: Menu Navigation, Readability of Text, Error Prevention, and Color/Aesthetics. We each took the time to sketch up at least 3 redesign ideas for each target, resulting in a total of 48 sketches (check them out in our appendix linked at the end). Shortly after, we regrouped and finalized the actions we were going to take in improving the user experience of ZotAccount based on those four targets and ideas from our individual sketches.
For menu navigation, we really wanted to improve the format of how information was organized for the user, mainly in redesigning a more efficient and cleaner menu than what currently exists. What we ultimately decided on was a top menu bar that was accessible at all times by users, supplying them information that they would find most useful (a decision based on the results of our survey and user tests). In the menu is the home page (something that did not exist already), a page to view the user’s account, a page to make a payment (merging the update and make a payment page together since they linked to the same page), a guest access page, a fees breakdown dropdown, and a helpful links dropdown that also links to a page. With this target, we really wanted to focus on what information mattered most to users, taking account of the results from our UX research processes.
While analyzing ZotAccount we noticed an enormous amount of text on each page with a very small font attached to it. It was hard for us, and users, to comprehend everything being written because it was small to read and knowledge overload. We wanted to improve this aspect of the page by limiting descriptions to only contain the most important ideas and enlarge the text to provide an easier reading. When deciding on what was most important, we looked for the bolded or capitalized words within each page and emphasized those in our redesign. By doing this, we were able to condense the page to still capture the essence of what each page was meant for but also provide an easier visualization for the users to read.
Through our user tests, we noticed a lot of frustration regarding not being able to return to specific pages, and because of it and a variety of complaints regarding mistake recovery from our interviews, error prevention became a priority. Our redesigned combats these concerns in a large way, being at the top of the screen at all times. Additionally, any buttons linked to another site would open in a new tab rather than going directly from ZotAccount, allowing the user to return to ZotAccount if they accidentally click something. The logout button (which is functional, as opposed to the logout link that currently exists on ZotAccount) and the contact button, where users can contact financial services or submit feedback, are located at the top of every page, giving users easy access to those actions. We wanted to make sure that our redesign allowed users to comfortably recover from errors on such a secure site, something that the current ZotAccount UX design does not do.
One of the top things our users mentioned when analyzing ZotAccount was how much they disliked the visuals of the website. The users did not feel satisfied after completing tasks because they were left with experience with a bad interface. With the help of our other targets of the redesign, we were able to make the website more visually pleasing. We’ve added more space to the pages to create more of an open atmosphere, rather than a cluttered one. We’ve also incorporated UC Irvine’s color palette throughout the pages to connect it back with the school. With these small but important changes, the visuals of ZotAccount have been greatly improved.
When deciding upon which system to research and redesign, we thought ZotAccount would be an easy route, as our experiences as well as our peers’ experiences with the website were mostly negative. The process, contrary to our initial beliefs, turned out to be more thorough and much deeper, as the issues with ZotAccount were not just in its looks, but also in its basic usability. This made finding its faults more exciting for us personally, as we had dived deep into a project where we knew that any change we made would have a large impact. The research processes we used really opened our minds to the possibilities that the website could have, as well as the different comments we received from peers and instructors in our class. While our redesign is reflective of the progress we made this quarter, it is only a glimpse at what ZotAccount has the potential to be: an efficient and functioning payment service that fully satisfies its users.
Acknowledgments
Thank you to everyone who helped us complete this project, including those who took our survey, the people we interviewed, our family members who did our user tests, and our instructors, Matt Bietz and Ariel Han.
