Fifield Hall Directory

I developed this JAMstack web app to be used in the University of Florida's Fifield Hall main lobby on a touchscreen television. The primary goals of this web app were to improve the user experience, improve performance, and modernize the aesthetics.
Fifield Hall Directory
Fifield Hall Directory

The Problem

The electronic directory in Fifield Hall had not been updated for quite a while and there were many issues I noticed which needed to be addressed. My goal was to improve the user experience, improve performance, and modernize the aesthetics. The big issue was the legacy code. The original developer used mainly jQuery and then their predecessor made updates using Python. The back-end was not very secure and the application had poor front-end performance.

Looking at the old electronic directory above, it was clear that it was easier to do a full rebuild instead of refactoring the legacy code. The design did not need to be responsive, since it was housed in a touchscreen television, but the usability and performance needed to be improved.

I gathered feedback from faculty, staff, and students on the old electronic directory to help with the design and functions of the new application.

Fifield Hall Directory Home Old

Feedback and Design

It was immediately clear from user feedback that there was a definite need to improve the electronic directory's performance. Due to how the old electronic directory was designed, it would have moments of lag and it would also take many interactions for users to find the information that they needed.

Since it is an electronic directory, there were some functions that were necessary to have:

  • View floor layouts
  • Display different departments
  • Display the faculty and staff with pictures (if available) and information
  • Show paths to their offices (if available)
  • Management system for staff to update their department listings
  • Use University of Florida brand colors
  • Works even if offline

When thinking of a design idea, sometimes I like to do sketches on paper. It allows for me to take a modular approach because it is easier for me to visualize what components can be reused. I can modify my sketches by cutting things out and moving them around to see different iterations of the interface without needing to make multiple sketches.

Fifield Hall Directory Sketch 1
Fifield Hall Directory Sketch 2

Hosting and APIs

The code is uploaded to the organization's private repository on GitHub and the web app is hosted on Netlify, a great free host for static sites and web apps. The web app uses serverless functions to fetch the data from our CMS and weather APIs and Redux for state management and persistence.

After some discussion with staff, it was decided that it would be better to use a headless CMS for the content management. Contentful was our chosen headless CMS. It is free, has good documentation, and a thriving community. We did not want to use the previous management system because it was not secure, and the interface was not intuitive.

I thought it would be a good idea to have some weather information on the electronic directory because the weather in Florida is constantly changing. I brought this up with staff and everyone loved the idea. We used the Dark Sky API for about a year; however, the Dark Sky was acquired by Apple and released a statement on their blog that the API will stop service in 2021. Currently, we use the Open Weather Map API for our weather data.

Fifield Hall Directory Department
Fifield Hall Directory Listing
Fifield Hall Directory Path

Launch

The web app was put onto a mini-PC that is connected to a touchscreen television. I configured on computer startup to load the web app in kiosk mode. The computer was also configured to have a scheduled startup time and shutdown time to preserve energy. I received positive feedback about the new design and saw an increase in use for the electronic directory, which felt great. Overall, it was a fun project to work on.