What is Zotistics?

Zot Zot Zot! (That’s UC Irvine’s cheer, often accompanied by our beloved anteater mascot!) This case study focuses on a web redesign for Zotistics, a UCI platform that helps students analyze course grade distributions with ease! I was the sole designer to provide the redesign for the ICSSC Projects Dev Team.

Original Design(s)

Currently, UCI hosts https://zotistics.com/ and https://beta.zotistics.com/, both of which have great functionality and integration with AntAlmanac.

Here’s what I noticed right off the bat…

  • There was a drastic change in style and sophistication between the two versions. The beta version was sleeker, and kept the integrity of the original website.

  • The old version was only able to compare two classes, whereas the beta version was able to compare up to five different classes.

  • The beta version had issues with readability - notice how the percentages are difficult read. When users input multiple classes, it got increasingly cramped.

So far, I knew I wanted to keep the design sleek, create better readability, and maintain class input. I began to brainstorm!

Problem Statement:

“How can I create a more seamless and intuitive interface that balances style, functionality, and readability to enhance the user experience for a data driven application?”

Brainstorming

After our initial meeting, we decided to incorporate a name into the redesign, and that's how ZotMetrics was born!

Note:

Keeping & Leaving Behind

  • Keeping:

    • A refined design rather than introducing a completely new interface.

    • Fresh yet traditional colors to maintain a modern look while respecting design conventions.

    • GPA display for better information access.

    • Tab system to enhance functionality and organization.

    Leaving behind:

    • Overlapping percentages when multiple classes are selected (causing accessibility issues).

    • Redundant features such as "Lower Division," "Upper Division," and the "Excluding COVID" toggle.

Iterative Design in Action

Version 1 (before feedback)

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.

Gathering Feedback

After my Design Overview 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.

Version 2 (after feedback)

This is what I changed for improved clarity and functionality in the final version:

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.

Layout Adjustments: Made adjustments to some elements of the layout for better user experience.

Statistics Panel: Implemented a statistics panel that displays the same information as in the beta version.

(Statistics Panel)

Web-to-Mobile Adaptation

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!

Summary of Changes

  • Version 1

    Initial Design Goals:

    • Focused on functionality, aiming for a clear and simple user interface to display data metrics.

    • Created wireframes with a clean layout for key features like dashboards and data visualizations.

    Feedback Highlights:

    • Users found some navigation elements unintuitive.

    • Visual hierarchy was unclear in certain areas, making data less accessible at a glance.

  • Version 2 Updates

    Improvements Implemented:

    • Enhanced navigation with clear labels and a more streamlined flow between screens.

    • Introduced a stronger visual hierarchy using consistent typography and accent colors for key metrics.

  • Refinements After User Testing

    Feedback Summary:

    • Positive reception to navigation & format changes

    • Mobile experience created to continue the web design

  • Final Updates

    • Succeeded in creating a functional, user friendly, and sleeker version that respected the solid foundations of the original version but improved the look.

    • Optimized mobile layouts further, ensuring legibility and ease of interaction even on compact devices.

Here’s what I learned!

  • I learned that what seems intuitive to me as a designer isn’t always clear to users. Conducting usability tests helped me uncover pain points I hadn’t considered, shaping my designs to better meet user needs.

  • I realized how impactful feedback can be. By iterating on my initial designs based on real user input, I saw firsthand how small changes—like improving navigation labels or adjusting visual hierarchy—can make a big difference.

  • I learned that great design is about more than aesthetics. Collaborating with developers and stakeholders taught me how to ensure my designs look good while performing seamlessly across devices.

Thank you for checking out Zotmetrics !