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.
Tech Used
- Create React App - github.com/facebook/create-react-app
- React App Rewired - github.com/timarney/react-app-rewired
- Tailwind CSS - tailwindcss.com
- Redux - redux.js.org
- TypeScript
- Serverless Functions
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 backend was not very secure, and the application had poor front-end performance.
After some discussion, 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.
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.
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 and has good documentation. 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.