Georgia Tech Campus Recreation Center Website Redesign
Interactive, accessible, and responsive redesign across 60+ subpages
Helping Georgia Tech students, faculty, and staff easily access recreation schedules, memberships, and facility information.
Timeline
May 2024 - Aug 2024
My Role
Lead UX Design, Design System, User Testing
The Team
2 Designers, 4 Developers, 1 PM
OVERVIEW
Background
• Challenge
The Recreation Center website was outdated, inconsistent across 50+ pages, and not accessible on mobile devices, leading to user frustration and difficulty finding schedules and resources.
• Opportunity
Redesign the site to be responsive, accessible, and consistent: improving usability and increasing student engagement with campus recreation.
Final Design
• 60+ Subpages
Reorganized into a clear IA with consistent visuals. Users can find programs, memberships, and schedules more easily.
• Mobile View
Fully responsive layouts designed mobile-first, improving access on the go for students checking hours and schedules.
• Design System
Established reusable typography, colors, and UI components to ensure long-term consistency across all subpages.
Impact
Before: 56% rated “satisfied”
After: 81% rated “satisfied”
Before: Avg. 2:45 min
After: Avg. 3:30 min
PROBLEM
Why are users struggling?
Through our preliminary research and usability audit, we found that the Campus Recreation Center website suffered from inconsistent layouts, text-heavy pages, and inaccessible design patterns. Key actions were hidden within paragraphs, tables were difficult to read, and important details were scattered across multiple sections. These issues created confusion, slowed users down, and often left students uncertain about how to complete essential tasks such as registering for programs or understanding membership options.
Problem Statement
How might we redesign the Campus Recreation Center website to make information easier to find, more accessible and consistent?
DESIGN
Solution Overview
To address these challenges, we developed a unified design system and applied it consistently across more than 60 subpages. The redesign focused on three pillars: clarity, accessibility, and consistency. This not only improved usability for students but also simplified long-term maintenance for staff.
New Homepage
Overview of the redesigned subpages.
* Shown here are the primary-level pages; secondary and nested subpages are not included.
Design System
To ensure consistency across all subpages, I developed a design system that defined typography, color, components, and layout patterns.
Key Subpages
Beyond the overall design system redesign, I focused on improving several high-traffic subpages that students and staff rely on most. These pages previously suffered from cluttered layouts, inaccessible content, and hidden actions, making essential tasks like checking schedules or registering unnecessarily difficult.
• Meet Our Staff
Experts felt it was a cognitive load for users to recall how to get to their destination based on the map’s visual clue alone, hence, we added quick start navigation tips that provide a quick step-by-step guide to their destination.
Weak visual hierarchy
Staff info is buried in text lists.
Low engagement
The page felt purely functional, not personable.
Profile cards
Consistent layout across all staff.
Hover interaction
Reveals lifestyle photo and quote for personality.
• Adventure Trips
The old Adventure Trips page buried key trip details in long paragraphs and dense tables, so users had to scroll and read line by line. In the redesign, I introduced modular trip detail cards that highlight essential info up front and provide a clear call-to-action. This shift made comparing options faster and registration more intuitive.
Hard to compare trips
Users had to read through paragraphs to find info like pricing.
Information overload
Dense text and tables created unnecessary cognitive load.
Clear cards & actions
Consistent format surfaces trip type, cost, and availability at a glance.
Status indicators
Labels like “Check back often” set expectations transparently.
• Equipment Checkout
The old page relied on paragraphs and inline lists that blended together, making instructions and available items hard to read. In the redesign, these sections were reformatted into structured blocks, following the design system’s UI patterns for lists and information cards.
Vague instructions
The process lived inside dense paragraphs that were easy to skim past.
High reading effort
Users had to parse long sentences to know what to do next.
Clear bullets
Steps are reformatted into bullet points, reducing reading effort.
Structured blocks
Equipment availability is split into columns, aligned with the design system.
• Student Employee of the Month
The old page presented honorees in a plain monthly list with minimal visuals; users had to scroll through long text entries to find past winners. The redesign has a year-based collapsible section so that users can browse more easily.
Plain text list
Previous honorees were displayed as names only, with no other context.
Monthly filter only
Each person was grouped by month in one long list, making it tedious to read.
Clearer hierarchy
Information like "year" and "position" was rearranged to stand out.
Collapsible archive
Past years are organized into expandable sections, making browsing simpler.
• Outdoor Gear Rental
The old Outdoor Gear Rental page listed packages and pricing in text blocks, forcing users to look for details across sections. The redesign consolidates everything into a structured table, which makes comparison straightforward and efficient.
Scattered details
Package info and prices were spread across multiple text blocks.
Hard comparisons
Without alignment, users couldn’t easily compare costs or included items.
Structured table
A unified grid organizes all packages with consistent columns for easy scanning.
Quick comparison
Pricing and inclusions are aligned side-by-side to be evaluated instantly.
REFLECTIONS
What I learned
• Designing for scale
Working across 60+ subpages taught me how to create solutions that are scalable. Establishing a design system early on was essential. It ensured consistency across a large and complex site while making future updates manageable for staff.
• Communicating with developers
Collaborating closely with developers helped me understand how design decisions translate into implementation. I learned to document components clearly, explain design rationale, and negotiate trade-offs when technical constraints arose. This improved my ability to communicate across disciplines and ensure that design quality carried through to the live site.
• The importance of hierarchy
Redesigning dense pages reinforced how much visual hierarchy impacts comprehension. I learned how to allow users to scan and act with far less effort by introducing clear sectioning, typography, and action-oriented buttons.