Fresno State Campus Directory Redesign

Overview

The Fresno State campus directory had existed for some time, residing on an outdated, non-responsive website. In 2022, our web team completed a comprehensive redesign of the campus website, and a crucial aspect of this overhaul was to enhance the accessibility, responsiveness, and overall user-friendliness of the directory. Additionally, there was a requirement to develop a section within the admin panel.

I was initially assigned to this project back in 2018. Due to limited resources, a stretched development team, and the global pandemic causing disruptions, the project was put on hold until 2022.

Goal

My primary objective was to significantly improve the user-friendliness of the directory, taking into account its primary user base. Through my research, I discovered that administrators, managers, and staff members were the most frequent users, accessing it daily. In contrast, student usage was relatively low, leading me to prioritize a desktop-first design approach since most users primarily utilized desktop devices. I conducted interviews with three administrative assistants, one technical staff member, and a web developer. Notably, administrators sometimes relied on the directory more than ten times a day to search for contacts when they didn't have contact numbers memorized.

With the data I gathered, my key feature to implement was a functionality to capture search data via cookies and automatically populate a "favorites" section on the homepage, based on how frequently a contact was searched. This streamlined the user experience, reducing time, clicks, and keystrokes while maintaining an appealing and accessible design.

However, the project's direction evolved when the original project owner and department manager left the university. The new Chief Information Officer (CIO) and manager aimed for a swift solution, resulting in the removal of many advanced features. The primary focus shifted towards achieving efficient search functionality and mobile-friendliness.

Process

The framework we employed for this project was Vue.js, combined with Bootstrap. I was pleased to discover that my initial wireframe design was largely retained throughout the development process. Adhering to the existing templates from the overarching web redesign made the transition relatively straightforward. However, one of the central challenges I encountered was determining the most effective way to present vital information on each user profile page.

In the previous directory design, there was a distinct section dedicated to searching for departments. To streamline the user experience, I aimed to integrate this into a single search bar, which would simultaneously fetch both departments and user profiles based on location. This approach was chosen to simplify the navigation and consolidate the search functionalities, aligning with our goal of enhancing usability and accessibility across the platform.

Final Design

At present, the user interface (UI) I developed is still in use, and most of the new features remain intact. Working closely with a backend developer who made real-time adjustments as the project progressed, some elements were added along the way. You can see a live preview of the site on directory.fresnostate.edu

Reflection

After the project went live, approximately 80% of my UI design remained intact. While certain enhancements were initially planned for phase two, it appears they may not come to fruition. I concluded my tenure at Fresno State Technology Services in November 2022.