Feedstack

Feedstack

A Multimodal UX Feedback System for Web & App Designs

Feedstack is a cutting-edge feedback platform that leverages GPT-4 Vision to deliver intelligent, multimodal UX feedback on web and mobile design mockups. Our system helps designers, developers, and researchers streamline UI/UX evaluation by analyzing visual designs and providing categorized, theme-based recommendations in real time.

---

Key Features

• Chat-based AI Assistant: Interact with a GPT-4V-powered assistant that provides personalized design feedback.
• Multimodal Analysis: Upload images of your designs (mobile/web) for analysis.
• Design Theme Categorization: Feedback is automatically grouped into key UX themes like Accessibility, Color Contrast, Usability, and more.
• Interactive Accordion UI: Feedback is neatly displayed in expandable accordions for better navigation and focus.
• Keyword Highlighting (Upcoming): Identify theme-relevant keywords directly in the chat interface with dynamic color-coded highlights.

---

How It Works

1. Log in with a participant ID.
2. Upload your design mockup (PNG, JPG).
3. Chat with the assistant and ask for feedback.
4. Explore feedback summaries grouped under design themes.

---

Use Cases

• UX Research and Evaluation
• Rapid Design Feedback during Prototyping
• Accessibility and Visual Hierarchy Testing
• Educational Tool for UI/UX Learning

---

Built With

• Frontend: React, HTML, CSS
• Backend: Django, Django REST Framework
• AI Model: GPT-4 Vision (GPT-4V) via OpenAI API
• Other Tools: Python, JavaScript

---

Hosted Site

https://feedstack.fly.dev/

Launch With Docker

Docker Repo Link: https://hub.docker.com/r/jack5000/demo2

1. Install Docker
2. Run the command >docker pull jack5000/demo2:demo2
3. Once it downloads, run the command >docker run -p 3000:3000 -p 8000:8000 jack5000/demo2:demo2
4. Navigate to your search engine of choice and enter the url: localhost:3000

Local Launch Guide to start Feedstack

Feedstack Local Launch Guide.pdf

Project Status

Feedstack is currently in its development phase. New features in development include keyword-theme linking, accordion navigation, and improved design understanding through embeddings.

Documentation: Feedstack Project Site

---

Collaborators

Omar Shakir

Jonothan Cherry

Jason Lahoda

Jack Wylie

Joshua Rhee

Jonathan Augustin