Home
Product Overview
About the Product
UFIT is working with the broader institution to bring AI-powered solutions to students, faculty, and staff. I had the opportunity to help design an AI-powered assistant that helps users get answers to questions related to specific departments, offices, and organizations at UF.
My Role
Lead UI designer, in charge of visual design, interaction design, and animations. I defined the look and feel of the product and presented high-fidelity designs to stakeholders in meetings. I also facilitated developer handoff and assisted the developers in executing the project with a high degree of fidelity to my designs.
The Problem
The university has created AI chatbots based on an older generation of LLMs and the user interface is clunky, outdated, and not particularly user friendly. Our team was brought onboard with the AI services team at UFIT to create a new generation of assistants that will serve the University going forward-starting with an assistant that will be used for the UFIT website.
The Goal
Design a clean, modern user interface that aligns with UF's brand and allows users to interact with modern LLMs trained on specific data points for various areas of he university.
Design Process
Starting the Design
I created a design system to define the user interface for all future AI assistants at the university using this technology. After researching the highest-performing AI products on the market, I applied UF's brand guidelines to create an interface that was familiar, intuitive, modern, and uniquely UF.
Finalizing the Design
Using Figma, I applied the design system to create a cohesive user interface, placed it on a simulated UF website, and linked the various states of the UI together. I defined the animations, outlined the timing, and ultimately came up with a realistic, interactive prototype. This prototype was used to demo the concept UI to project stakeholders and IT leadership.
The final product came out with a high level of fidelity to my design, something I'm particularly proud of as I worked with the development team to adopt new front-end technologies to get the animations, look, and feel just right. It's available already as a pilot program on UFIT's website.
View the Final Product Live
Key Takeaways
This project is my first foray into designing user interfaces for AI applications, so I was excited to work on it. I learned about so many new best practices and design considerations when working with LLMs. One example is designing for streamed responses from the model. You have to anticipate varied and somewhat unpredictable content, so your design has to adapt and accommodate whatever the AI decides to respond with.
- Perform user testing to determine if the user interface can be improved and if the product is meeting users' needs and expectations
- Expand the project to other areas of the university and examine analytics data to find room for improvements
- Perform accessibility-specific user testing
- This is especially important because accessibility of AI chat interfaces is a new topic with somewhat scarce coverage in the market
Back to Top