UX Case Study: Redesign of the UCI Dining Services
By: Ahaz Asim Bhatti, Peter Nyugen, and Elizabeth Wen
Introduction
UCI Dining Services (https://uci.campusdish.com/) is a website that allows UCI affiliates to access information regarding the dining options and catering services on campus, manage their meal plans, and learn about the sustainability of the food served. Although it functions well, the website’s limited capabilities certainly hinder its usage rate and popularity. For our project for our IN4MATX 132 course (an undergraduate project course at UCI), our group chose to conduct tests on UCI Dining Services to observe and improve the user experience on this site.
Choosing and Conducting Our Methods of Analysis
In order to begin the process of finding out the problems with the website, we needed to figure out which methods of analysis to use. For our particular problem, we decided to use:
- Online surveys
- Interviews/Usability testing
- Personally-conducted heuristic evaluations
Interviews/Usability Testing
Based on our objectives, we came up with a set of interview questions that revolved around getting to know the user and his or her experience in deciding how and where to purchase food around the UCI campus. The interview questions focused on asking about:
- The background of the user
- The basic eating habits of the user
- Whether a user knows about the site or has used it before
- How efficient the site is
- Whether there are any features that one might want to add
Surveys
Our survey consisted of seven multiple-choice questions, four yes-or-no questions, two free responses, and one Likert scale question. We incorporated key questions from our interview that we thought provided us with the most helpful information as well, to make sure that we could get the best idea of the general user base in order to provide the best improvements possible.
Heuristic Evaluations
Within our own group of three, we conducted individual heuristic evaluations, basing our analyses off of Jakob Nielsen’s 10 Heuristics for User Interface Design. After finishing our individual analyses, we came together to compare and contrast our thoughts and observations, and then compiled a list of the pros and cons of the website’s design and functionality.
Analyzing Our Results
Competitive Analysis
In order to get a better understanding of what the website could be missing out on, we performed a competitive analysis, where we researched and chose two direct competitors (companies that are addressing the same problem as UCI Dining Services) and two indirect competitors (companies that do not provide the exact same services as UCI Dining Services, but still indirectly address the same needs). The following contains the names and descriptions of the chosen competitors:
Product 1: Yelp
Description: Yelp is an application, both web and mobile, that is designed to provide locations and ratings for users. Users can find, write a review, and rate places they have visited before. Businesses that can be found using Yelp include shopping, restaurants, home and local services, beauty and fitness centers, arts centers, entertainment places, and events.
Product 2: UCI Dining Services (alternate domain)
Description: Although it shares the exact same title as our focal product, this specific UCI Dining Services web page is instead a subdomain of UCI’s official website. The site contains rudimentary information about UCI’s various dining services such as catering, alcohol, and employment opportunities.
Product 3: UCI NOW
Description: UCI NOW is a mobile application available for Android and iOS devices. Created by the UCI Student Center and Event Services department, the application focuses mainly on services provided by the Student Center as well as food served on Ring Road.
Product 4: Tripadvisor
Description: Tripadvisor is an application for mobile and a website. Tripadvisor provides the best restaurants and their locations in the selected city. Users can reserve a table, write a review, and rate the restaurant they have visited.
Understanding The Users
After analyzing the direct and indirect competitors, we then focused on the user base of the UCI Dining Services website, where we gathered the data from both our surveys and our user testing. Our results showed us that the user base mainly consisted of the students and employees that attended or worked at University of California, Irvine, as well as visitors to the campus.
From the data we collected concerning our users, we then created three personas that represented them best, to get the most accurate idea of who the website should be serving. One example is shown below:
UX Evaluation Results
For our UX evaluations, we focused on using online surveys, user tests conducted via Zoom, and personally-done heuristic evaluations to observe and analyze potential improvements that could be made within the site. From these results, we found four main targets to aim for in our redesign of the site.
Target #1: Improve Website Navigation Efficiency
Issue
One of the biggest problems we noticed after conducting our heuristic evaluations and remote user testing was the efficiency of use. The only options users had to navigate through the website was through the main navigation bar and simply browsing and scrolling through the website. There is no feature on the website that allows a user to quickly search up the information they are looking for, which significantly increases the amount of time a user spends trying to find relevant information. This is a significant issue because users want to find what they are looking for quickly, otherwise they will become frustrated and leave the website.
Results
As a solution, we added a search bar into the ‘Locations and Menus,’ providing users with the ability to expedite their ability to find what they are looking for. This will reduce user frustration and make the website more appealing to new visitors.
Target #2: Inconsistent Design
Issue
One substantial problem throughout the UCI Dining website was the lack of consistency in its design. In changing from page to page within the site, the difference in the structure and organization of information made our users feel confused and lost track of where they were. Their reactions indicated to us that the lack of a consistent structure of information between pages within the site made the site more intimidating, and users less enthusiastic about using it.
Results
Our final decision as a team was to design the Meal Plan page with the “2019–2020 Anteater Meal Plans” on the same page with the information on the first meal plan below. This way, the page is consistent with the FlexDine menu, with having the options to purchase the items on top and having the information display bottom.
Target #3: Bad Labelling/Naming/Icons
Issue
Another problematic issue on the UCI Dining Services website is bad use of icons. By using icons that do not describe what they are matching to, the website confuses both familiar and new users on where they need to go. On the UCI Dining Services FlexDine and ZotBucks page (as seen in the below image), three icons are used for recognition: a credit card, a dollar bill, and a calendar. The three icons do not logically correlate with what they are describing: the credit card is used to indicate cash, the dollar bill for meals, and the calendar for the UCI ID card. This can easily cause confusion among users, especially those who are researching to purchase a meal plan for the first time.
Results
Our solution to this problem was to replace the icons to better represent the corresponding information. On the FlexDine and ZotBucks page, we used a dollar bill to represent FlexDine, a plate with utensils to represent the bonus free meals, and a card to represent the UCI card. We felt that these replacements would give the user a better understanding of the information, and does not cause any confusion.
Target #4: Visibility of System Status
Issue
The final difficulty within the tasks of the website is its inability to properly show the user at what point he or she is in during the middle of a task. In our user testing, we had our participants research meal plan information and purchase one or more, and then go through the process of checking out. Every time a user clicked to purchase a meal plan, a popup window would show up, letting the user know what he or she just purchased and what their cart held at the moment. However, the website did not show the proper total price to the user, nor did it show the amount of any one item chosen (aka whether the user had bought more than one of a particular meal plan). Another problem was the changing between pages within the website: whenever a user wanted to move from one page to another, but the website did not load right away, the website did not let the user know that he or she did in fact choose to move to another page, which caused some impatience within our users.
Results
To address this issue, we decided to modify the popup window for the meal purchasing task. As the popup window appears, the entire list of items purchased up until that moment, both with prices and entire subtotal, to inform the user of what the website believes they are planning to purchase. Also, when moving between pages, we chose to use a highlighting method, where the name of the page the user is currently on is colored in blue, while the rest of the font remains black.
Reflections on the Process and Outcomes
In retrospect, if we had to do it all over again, we would want to try out in-person user testing methods to see how the data results would compare to the ones we received in this project, and also to give ourselves a more realistic experience of how user testing in the field really works (instead of via Zoom as we did).
However, we felt that our final results produced a newly redesigned UCI Dining Services webpage, with clearly defined information, consistent structure, and easier navigation for both new and familiar users. As a team, we believe that this was a major step forward and would definitely provide a better user experience for anyone.
Acknowledgements
World Leaders in Research-Based User Experience. “10 Heuristics for User Interface Design: Article by Jakob Nielsen.” Nielsen Norman Group, www.nngroup.com/articles/ten-usability-heuristics/.
“University of California-Irvine.” UCI Dining — UCIrvine, uci.campusdish.com/.
