Visual Spatial AI Lab Responsive Website
Designing a connected web presence for research credibility and course enrollment
TL;DR Summary
What
Started by designing a course page for the lab's new Gen AI program, then expanded to redesign the entire lab website when I realized the outdated main site was undermining the course's credibility.
Why
The modern course page clashed with the basic GitHub Pages lab site, creating brand inconsistency that hurt student trust.
My Role
Product Designer & Developer (worked directly with Lab Director)
Company
Visual Spatial AI Lab- Texas A&M University
Tools
Framer, Figma, Lovable, V0
Timeline
7 weeks
View Website
CONTEXT
The Visual Spatial AI Lab at Texas A&M conducts research in computer vision, robotics, and AI. They launched a new Gen AI course designed to help art students understand AI fundamentals and build with LLMs.
The lab had an existing GitHub Pages website that served its basic purpose but looked outdated and generic. It didn't communicate what made the lab unique or why students should enroll in their courses. With the new Gen AI course launching, they needed a website that could attract non-technical students and establish the lab's brand in a competitive academic space.
Approach
Phase 1: Course page design
Focused on making AI accessible. Designed progressive disclosure for students to see "why Gen AI matters" before diving into technical modules. Added video introduction and clear weekly breakdowns to reduce intimidation.
Identified the disconnect
During stakeholder review, the contrast between the modern course page and outdated main site became obvious. I proposed expanding scope to redesign the main lab site using the same design system.
Phase 2: Main lab redesign
Extended the visual language to the main site. Reorganized content to be student-first highlighting courses, opportunities, and team upfront while keeping research accessible. Created a navigation system that seamlessly connects both sites.
Wireframes and Iterations
Early wireframes exploring content hierarchy and layout structure. I focused on making course information scannable while ensuring the main lab site could accommodate research depth without overwhelming students.
AI Exploration
Used AI tools to accelerate color palette exploration and content messaging variations. Generated multiple direction options using Lovable, Bolt and ChatGPT for stakeholder review, which helped us land on the gradient accent approach faster.
For a project about an AI lab, using AI in the design process felt fitting, it also gave me hands-on understanding of the technology I was designing for.
PROPOSED SOLUTION
Course page
Hero section with student work carousel and clear value proposition. Module tabs showing weekly content structure. Embedded video intro. Resources section with AI ethics and recent research to build credibility.
2. Main Lab Site
Clean hero with lab stats (publications, projects, enrolled students) for immediate credibility. Card-based research overview replacing text-heavy descriptions. Student opportunities section showing compensation and clear application paths. Team section humanizing the lab.
Old site
New Site
3. Development in Framer
Built modular component system for easy updates. Smooth animations and hover states for engagement. Optimized for mobile since students browse on phones. Fast load times and accessible design.
Impact
Launched before Spring 2026 enrollment with enough lead time for student discovery. Stakeholder feedback was positive, the lab director appreciated having a cohesive brand that reflected the quality of their research.
Created a scalable foundation. The lab team can now update courses, team members, and research without needing design help. The connected system means any updates maintain brand consistency.
Explore Other Projects!
Handcrafted by Aayushi Gandhi 2026