This ongoing project explores how to redesign the U-M GPT chat experience to make it more transparent and accessible for all students. I began with exploratory research and task flows, built low-fidelity wireframes using Auto Layout, and am now developing high-fidelity prototypes and a full-color landing page.
Phase 1: Research
We were tasked to create the “Worst TV Remote” for a certain demographic. I chose people aged 15-25, and decided to make the remote shaped as a gaming controller. Before I started the design, I researched the kinds of designs that should be intuitive for this group, and tried to do the opposite in the design. These were the main points that I found that this age group would excel with:
Minimalist, Intuitive Layout
Familiar Button Layout
Compact & Lightweight and modern look
Accessible Design
I also researched the age group of people aged 15-25, and found that they are considered “digital natives,” they “expect personalized interfaces,” and they “often multitask.” Once I understood the age group and their expectations, I could successfully design the remote. Some of the research that I completed, I did through U-MGPT, which gave me a clearer understanding of how the interface works, and allowed me to see how students would be using this tool in the real world.
I put all of the buttons in spots that would be difficult and unintuitive for the users. The thumb stick’s usage is for moving , but the Up/Down is on the opposite of the Right/Left. The letters are inaccessible and annoying for most users by having each letter have a button that is small and close to other buttons. The important buttons are in hard to reach spots for users, like the power button at the bottom of the remote, and the select, menu, mute, and voice activation in the middle of the remote. My research recommended the remote to be familiar, simple, and accessible, so I did the opposite with my remote.
This exercise helped me understand how affordances, labeling, and layout directly affect user frustration and cognitive load. These insights informed my later design choices for U-M GPT, where clarity and feedback are key, as well as giving me a clearer understanding in how U-M GPT works.
Before committing to a single direction for my U-M GPT redesign, I sketched 10 different possible interaction ideas, including concepts like fact-checking, user annotation, voice to text input, file upload, and more. Each idea explored how students might use U-M GPT for different academic and creative tasks.
This rapid sketching phase helped me strengthen my UX problem-solving and ideation skills. By visualizing multiple directions quickly, I learned how to identify which ideas best aligned with user needs, project goals, and system constraints.
Although I later decided to continue with the fact-checking experience as my main design direction, the annotation flow and sketching gave me valuable insights into how users interact with AI step by step, such as when to provide system feedback, when to prompt user input, and how to maintain context across screens.
Phase 2: Sketching and Task Flow
During the early exploration phase, I created task flows and multiple sketches to understand different possible use cases for U-M GPT. My initial concept focused on a user annotating pictures with AI assistance, which helped me think about how the system might guide users through visual feedback and annotation tasks.
Wireframing Process
After sketching multiple ideas, I selected three directions to explore further through low-fidelity wireframes: 1) photo annotation, 2) collaborative chats, and 3) fact-checking. I designed both mobile and desktop versions for each concept using Figma’s Auto Layout to ensure consistent spacing and scalable layouts.
Creating wireframes for all three concepts helped me practice structuring user flows, organizing content hierarchies, and designing responsive interfaces. Working across mobile and desktop also reinforced the importance of layout adaptability and visual consistency.
Comparing these wireframes side by side revealed that the fact-checking interface best aligned with U-M GPT’s goals of transparency and academic support. This insight guided me to develop that direction further in my high-fidelity prototypes.
Designed to explore how students could upload or take photos and use U-M GPT to generate descriptive or explanatory annotations. This concept focused on visual learning and multimodal interaction.
Components
Focused on helping students verify information directly within the chat. Prioritized clear visual separation between user input, verified facts, and AI-generated explanations to support academic credibility.
Explored how multiple users could chat with U-M GPT in a shared space, allowing for group questions, shared responses, and collaborative learning. Emphasized communication flow and teamwork.
Higher-Fidelity Wireframes: Building Structure and Consistency
After deciding to focus on the fact-checking experience, I refined my wireframes into a higher-fidelity version to establish structure, hierarchy, and consistency. Using Figma’s Auto Layout, grids, and components, I created scalable designs that could adapt across both mobile and desktop.
These wireframes remained in black and white to keep the focus on layout, spacing, and interaction patterns rather than visual style. I applied a 12-column grid system with gutters and margins to maintain balance and rhythm, ensuring alignment between text, icons, and interactive elements.
I also built reusable components, such as chat bubbles, buttons, and fact-check cards, to streamline future updates and maintain a consistent visual language throughout the design. This process helped me strengthen my technical design skills and prepare for the next stage: adding color, typography, and accessibility refinements.
Columns, Gutters, Margins, and Padding
For the Desktop frames, I used:
Columns: 12
Margins: 32
Gutters: 32
Padding: 10
For the Mobile frames, I used:
Columns: 4
Margins: 16
Gutters: 16
Padding: 10
Higher-fidelity wireframes focusing on the fact-checking experience. Designed using consistent spacing, hierarchy, and interactive flow.
Built reusable Figma components for chat elements and buttons, ensuring scalability and consistent visual language.
This phase helped me strengthen my technical Figma skills while deepening my understanding of how design systems support usability and efficiency. I gained confidence in balancing structure with creativity and preparing a layout for future visual design. I also learned the importance of refining ideas through structure and how careful attention to spacing, hierarchy, and reusable components can make a design feel cohesive long before color or imagery are added.
Frame examples
Next Steps
⋆
Next Steps ⋆
Creating a full-color landing page for the U-M GPT redesign.
Adding more detailed interaction design and usability testing.
Refining the UI with accessibility and inclusivity principles.
Figma Skills Labs
Reflection
Practiced mapping user tasks step-by-step to visualize interactions before wireframing. Strengthened my understanding of flow clarity and user logic.
Learned how to use Auto Layout for responsive spacing and alignment. This made my wireframes cleaner, scalable, and easier to adjust across devices.
Applied all prior skills to create a full-color landing page using components and variants. This exercise helped me combine structure with visual hierarchy and polish.
Built reusable text and color styles to maintain visual consistency. Practicing these systems taught me how to design efficiently and keep my layouts cohesive.
Completing these labs gave me hands-on experience with the building blocks of modern interface design. I learned how consistency and reusability in Figma directly support usability and scalability in real products. These technical foundations made it easier to bring my U-M GPT redesign to a more professional, production-ready level.
So far, this project has taught me how thoughtful structure and consistency directly improve usability. I’ve learned how tools like Auto Layout, grids, and components make it easier to design systems that are scalable and cohesive across screens. Moving forward, I plan to bring my fact-checking concept into full color and explore accessibility features that support all students using U-M GPT. This project excites me because it combines my interest in ethical, inclusive AI with my passion for clear, user-centered design.