What is Zotistics?
Zotistics.com is a website that UCI students can utilize to explore the grade distributions of all the courses offered at the university.
Introduction
My task as a UX/UI Designer at UC Irvine’s ICS Student Council Project Teams was to redesign beta.zotistics.com in a way that is more appealing for our users. I am currently supervising Zotistics' redesign, the official link will be shared upon release, contingent on developers' progress.
Our team leader introduced beta.zotistics.com, the latest iteration of zotistics.com. The design is impressive and highly functional. Initially, I felt a bit apprehensive, as I couldn't identify many issues with the design—it appeared both aesthetically pleasing and well-functioning. Although there are some minor issues, such as spacing and a few other design elements, the overall quality is remarkable. Nonetheless, I proceeded with a thorough review to ensure the highest standards are met!
Old Zotistics
Beta Zotistics
Brainstorming
Main Points
To enhance user experience while preserving familiar navigation, I retained the existing layout to support muscle memory. My goal was to refine the design rather than introducing a completely new interface.
I incorporated new yet traditional colors to maintain a fresh look while respecting established design conventions.
A key issue identified was the overlapping display of percentages when multiple classes were selected, which adversely affected accessibility. Addressing this overlap was crucial for improving usability.
During initial brainstorming, certain features, such as "Lower Division" and "Upper Division," along with the "Excluding COVID" toggle, appeared redundant.
Additionally, I decided to display GPA and implement a tab system to enhance functionality and organization.
Round 1 Wireframe & Prototype
While the changes may seem subtle at first glance, here are some of the key adjustments I made to enhance user experience:
Hover-Activated Percentages: Percentages now appear only when hovered over, reducing visual clutter when multiple classes are input.
Toggle Placement: Toggles have been relocated to the right side, pending developer implementation.
Text Descriptions: Added detailed text descriptions for clarity.
Graph Labels: The axes of the graphs are now clearly labeled.
Scrolling: Unnecessary scrolling has been eliminated.
Dark Mode: The dark mode feature has been retained for user comfort.
R1 Feedback
After my Design Overview and Feedback Meeting, I realized I needed the functionality of the old version but the design of the beta version! The older version of Zotistics had more information for the class that displayed items like Courses, Classes, GPA, and details for the Instructor and the Results. I wanted to find a way to incorporate more information into my layout. Additionally, the team wanted to rebrand the logo and name as well.
Round 2 Wireframe & Prototype
In the final version, this is what I changed for improved clarity and functionality:
Inverted Tab: Added an inverted tab to clearly indicate when users can add another course.
New Logo and Name: Introduced a new logo and name for a refreshed visual identity.
Statistics Panel: Implemented a statistics panel that displays the same information as in the beta version.
Layout Adjustments: Made adjustments to some elements of the layout for better user experience.
Bonus - Mobile Version
As a design challenge, I wanted to maintain the consistency in a website into a mobile platform.
In case the developers wanted to implement Zotmetrics into an app or access it in mobile form, I took it upon myself to design the interface for future reference in case they wanted to consider it as a future project. This is my first project as a UX/UI designer for the UCI Projects Team and I learned a lot about cross functionality in development teams. I’m looking forward to applying what I’ve learned and am eager to contribute to the next project!