Soren Gerlach

Vaccine Assistant

Michigan State University GEL Lab

— PROJECT NAME

Vaccine Assistant


— ROLE

Tech Design/UI Programmer


— DATE

August, 2025

For the Vaccine Assistant project, we were tasked with creating a prototype in just two weeks. The goal was to design a proof-of-concept application that could assist users in navigating vaccine eligibility requirements and appointment scheduling.

I contributed by designing the user interface and programming the backend logic to parse eligibility criteria. The interface was designed to be intuitive and accessible, with a focus on clear instructions and ease of use. On the backend, I implemented logic to ensure that users received accurate and personalized guidance based on their input.

Despite the limited timeframe, we successfully delivered a functional prototype that demonstrated the feasibility of the concept. This project allowed me to refine my skills in rapid prototyping, user-centered design, and backend development under tight deadlines.

Comprehensive project playthrough

Major Contributions

For this project, I was tasked with programming systems to generate specific text responses based on user input. The responses were predefined but tailored to the user’s input to ensure they could access the relevant information they needed. Additionally, I formatted the user interface to resemble a phone’s messaging software, providing a familiar and intuitive experience. This included careful attention to layout, typography, and interaction design to mimic the functionality and aesthetics of modern messaging applications.

Technical Responsibilities

Programming

For this project, I implemented a variety of systems to enhance user interaction and provide dynamic responses. I developed functionality to interpret and categorize user input, matching key phrases like “yes," "no," and "more information” for efficient, context-aware responses. This included logic for updating the application’s stage, processing dynamic user feedback, and ensuring that the system responds appropriately to user input. I also created a dialogue system that cycles through AI responses and adapts based on user choices, handling both initial prompts and follow-up queries. To ensure seamless communication, I built a system for generating and updating text bubbles in the UI, including audio feedback and handling interactive links within AI messages. This work contributed to a highly responsive and immersive user experience.

Read Player’s Response Pt.1

This code snippet is part of a larger system designed to process and interpret user input for a responsive application. In this specific section, I implemented logic to identify key phrases within user responses, such as “yes," "no," or requests for "more information.” The system uses case-insensitive matching and simulates a short delay to create a more natural interaction experience. This functionality ensures that user input is accurately categorized, enabling the application to provide appropriate feedback or actions based on predefined criteria.

Read Player’s Response Pt.2

This code snippet is part of a larger system designed to process and interpret user input dynamically. In this section, I implemented a system to match user responses against a dictionary of keyword arrays. If a keyword is detected, the application updates its current stage and provides an initial prompt for that stage. The logic includes case-insensitive matching, efficient loop-breaking to optimize performance, and fallback handling for unmatched responses. This functionality enables the application to adapt to user input in real-time, delivering a more context-aware and responsive experience.

Craft AI’s Response

This code updates the AI’s text response in an interactive dialogue system. It handles different types of responses based on the player’s input, cycling through pre-defined answers or providing additional information. When the input is the initial prompt, it sets up the first response and acceptable answers for the current stage. If the player’s input matches an acceptable answer, the code either cycles through multiple responses or provides more information. If the response is invalid, the AI prompts the player to try again. The response is then added to the chat box, ensuring a dynamic and engaging conversation flow. This approach helps create an interactive and responsive dialogue system where the AI adapts based on user input.

Add Text Bubbles to the Phone

This function adds a new text bubble to the chat UI, either for the player or the AI, based on the provided text prefab and text content. It instantiates a new text bubble from the prefab and assigns the passed-in text to the bubble’s TMP_Text component. The function then updates the UI layout by forcing a rebuild of the bubble’s RectTransform. If the message is from the player, it plays a sound indicating a message was sent; if it’s from the AI, it plays a message received sound. Additionally, if the AI’s message contains a link (identified by “https”), a functioning Link component is added to the bubble to handle interactions. This ensures that the UI dynamically updates to display messages while also managing player and AI message behaviors appropriately.

UI Editor Tools

In order to achieve the authentic phone messaging aesthetic for this project, I had to quickly learn and master a wide range of new UI tools in Unity, including layout groups, layout elements, and content size fitters. These tools were crucial for ensuring the dynamic and responsive layout of the messaging interface. Additionally, I explored and implemented packages, such as serialized dictionaries, to streamline our workflow and enhance communication within the development team. Through this process, I gained valuable experience in optimizing UI functionality and improving team efficiency, which significantly contributed to the overall success of the project.

Serialized Dictionaries

For this project, we utilized ayellowpaper's serialized dictionary package for Unity (link), a powerful tool that greatly enhanced our ability to manage complex dictionaries. This package allowed us to customize and visualize our dictionaries directly within the Unity editor, streamlining our workflow. Given the extensive size and depth of the dictionaries we were working with, this package proved invaluable in helping us organize, navigate, and efficiently understand the data structure, ultimately improving both our development process and project management.

Layout Element

The Layout Element component was key to this project’s visual success, as it allowed me to control the size and flexibility of individual UI elements, like message bubbles, within the overall messaging layout. By setting preferred widths, heights, and flexibility values, I was able to ensure that the message bubbles resized properly based on the content and adapted to different screen sizes. This helped achieve the desired phone messaging aesthetic, where each message fits neatly in the conversation flow while maintaining an organized and user-friendly layout. The experience greatly expanded my knowledge of Unity’s UI system, enabling me to create polished, responsive designs for interactive applications.

Vertical Layout Group

For this project, I learned to use Layout Groups in Unity to manage the overall organization and alignment of UI elements within the messaging interface. By implementing HorizontalLayoutGroup and VerticalLayoutGroup, I was able to ensure that the message bubbles automatically aligned correctly, whether they were from the player or the AI. This allowed me to easily structure the conversation flow and adjust the layout dynamically, so the UI adapts as new messages are added. The use of Layout Groups streamlined the process of organizing the messages without needing to manually position each element, which was crucial for creating a clean and efficient interface.

Content Size Fitter

I also integrated Content Size Fitters to ensure that UI elements, particularly the message bubbles, automatically adjusted to fit the content inside them. By attaching Content Size Fitters to the message bubble elements, I was able to make sure that the size of each bubble dynamically expanded or contracted based on the text length. This helped create a more flexible and responsive UI, where the messaging elements looked natural and properly aligned, regardless of the message content or screen size.

Key Learning/Takeaways

Growth in UI and Workflow Optimization

Throughout the project, I learned to optimize both the technical and workflow aspects of UI design. I integrated serialized dictionaries to streamline data management, which greatly improved our workflow. This experience deepened my understanding of both UI design principles and the importance of effective teamwork and communication when developing a product under tight deadlines.

Client Collaboration on a Prototype

  • Working closely with the client, I helped bring their prototype to life by implementing features based on their feedback. This collaboration was crucial in aligning the UI design with the client’s vision while addressing any concerns they had about functionality and aesthetics. It taught me how to iterate quickly on feedback and make design decisions that best meet client expectations.

Time Management and Learning Curve

  • This project required me to quickly learn and apply a range of new skills within a short time frame. I gained hands-on experience with Unity’s UI system, including tools like Layout Groups, Layout Elements, and Content Size Fitters. By efficiently learning these tools, I was able to implement a fully functional phone messaging UI within the project’s deadlines.

UI Programming Expertise

  • A major focus of the project was UI programming, where I created a dynamic and responsive messaging interface. I applied my knowledge of layout groups to organize elements like message bubbles, ensuring that they adjusted to content and screen size. Additionally, I mastered Content Size Fitters to ensure the UI remained fluid and adaptable, improving the user experience significantly.