CATCH A CAT —
Making Public Transit Easier to Navigate Before the Ride Even Begins
Redesigning Chatham Area Transit's digital experience around
how riders actually find information and buy passes.
From a Maze of Menus to a Task You Can Finish in Three Taps
- Deep navigation
- Scattered ticket information
- Hidden purchase entry
- 5+ step purchase flow
- Task-based navigation
- Clear pass comparison
- Direct purchase entry
- ≤3-step checkout
Redesigning the Front Door to Savannah's Bus System
CAT has moved Savannah since the city's first electric streetcars, but its website hadn't kept pace with how riders plan and pay for a trip today. Gaps in navigation, ticket information, and payment made a clearer digital experience a priority that meant rethinking the whole flow, not patching pieces separately.
Simple Rider Tasks Were Buried Inside Complex Navigation
“I want to buy a day pass.”
The current CAT website still has room for improvement in information hierarchy and user experience. Ticket types, purchase methods, and route information were spread across a two-row navigation bar and a search-heavy layout, so a task as small as buying a day pass meant hunting through menus that weren't organized around what riders were actually trying to do.
“It's such a simple task, buying a ticket, and I still can't get it done.”
Understanding How Riders Naturally Look For and Group Transit Information
We wanted to understand how riders naturally look for and group transit information, rather than assuming CAT's existing structure was the right one to iterate on top of.
- Conducted an in-depth analysis of the official CAT website, mapping every navigation path against the tasks riders actually needed to complete.
- Ran a preliminary study with 10 participants to surface the current site's key usability issues before proposing any redesign direction.
- Used that feedback to refine our target audience into more precise age-based segments, so later design decisions were tested against real rider groups instead of a generic average user.
- Benchmarked against industry best practice, including the Google Maps–style route-planning patterns riders already knew, to decide where CAT should follow convention and where it needed its own solution.
- 01Have you ever purchased tickets on the CAT website?
- 02Could you please browse the CAT website and pretend to purchase a ticket for Line 14? (task walkthrough)
- 03How did you feel while searching for the information?
- 04If we update this website, what kind of expectations do you have for it?
Every one of the 10 people we talked to said they'd never bought a ticket on catchacat.org. The site couldn't decide what it was for: half brochure, half storefront. Its navigation buried the one task riders actually came to do.
Five Things Every Interview Kept Coming Back To
Home Page
- Adjust the size, color, and functional order of the navigation bar, collapsing it from two rows into one.
- Keep the background photo but scale it down, opening space to guide riders straight to the primary functions below instead of making them hunt through the nav bar.
Route Search
- Enlarge the route search panel on the left so more information shows at once, closer to the Google Maps UI riders already know, or linking directly to Google Maps.
- Redesign the right side as clear buttons instead of the current layout.
Ticket Purchase
Keep the navigation bar consistent with the homepage, so riders can return and reach other features without getting lost.
Mobile Ticketing Information
Add a QR code for the app download, more eye-catching and convenient than the current text link.
Ticket Types
Let riders browse full details for every ticket type on one page, instead of clicking into each ticket individually and repeating the same navigation.
…improve ticket information, payment, and visual design so riders can navigate and decide with confidence?
Three Iterations, and Why Two Were Dropped
We tested three information-architecture directions with low-fi prototypes. Two failed our own walkthroughs; the third became the foundation of the redesign.
Keep the dropdowns, add a purchase-flow form
DroppedKeep the multi-level dropdowns; add a form panel beside the UI showing the ticket-buying touchpoints and flow.
Only the “skin” changed. Buying still took 5 pages or 4 hover levels, so the deep hierarchy stayed.
Entry points by rider type
DroppedOrganize by rider identity: Student, Resident, Visitor entrances.
Clear logic, but it split one universal task into identity doors: more clicks, not fewer.
Task-based information architecture + Mega Menu
ChosenGroup top navigation into three core tasks: Buy Passes, Routes & Schedules, and Rider Info, with a one-step quick-purchase entry inside Buy Passes.
Serves the core need of ~80% of users and sharply cuts click depth and thinking time.
Two Versions Each for the Homepage and Ticket Page
We created two design versions for both the homepage and the ticket product page to explore different approaches to the rider experience. Each version has its own layout, navigation flow, and visual elements, and comparing them shows which strategies best guide riders through buying tickets and reaching essential transit information.
Show Every Fare Without Rebuilding the Clutter We Were Removing
More information, same page
Riders wanted every ticket type visible on one page instead of clicking into each individually, but that's exactly the kind of density that made the original site feel cluttered and hard to scan.
Color as the organizing system
We gave each fare type its own ribbon color and reused the CAT CARD motif consistently, so eight ticket options can sit on one filterable grid and still read as one coherent family, not a wall of text.
Putting Both Versions in Front of Real Riders
Testing ran in two parts: a visual survey to choose between the two designs, then task-based A/B testing to check how well each one worked.
Visuality Survey
evaluated and picked their preferred visual design between the two versions.
Each question was an A or B choice between the two versions.
- Q1Which version of the color scheme do you prefer?
- Q2Which version helps you understand the hero message, such as slogans, more quickly?
A/B Testing
aged 20–35 (students and designers) gave feedback on task flows.
Compare the navigation bars
Try each version, then pick the one whose flow is easier to understand.
- Q1Do the main feature icons tell you what they mean right away?
- Q2Can you quickly find the function you need? Which features would you click, and why?
- Q3Was there any information you badly wanted fast but spent too long looking for?
Buy a ticket
- Q1Can you clearly find the ticket type you need?
- Q2While buying, do you know the ways to get a physical ticket?
- Q3If you viewed a ticket type’s description page, could you tell whether you qualify?
- Q4How easy was the whole purchase, from 1 to 5?
A/B test results
User Feedback
During our A/B testing, user feedback highlighted both positive expectations and areas for improvement in each version. Based on the majority of feedback, we combined the strengths of both versions into one optimized iteration.
“I’d add a scroll cue and some shadow for contrast, and move “Did You Know” higher so I see it sooner.”
“Show me the closest bus line, how far it is from where I’m standing, and the areas it will travel across.”
“I thought I needed a phone to buy. Put the app download right below the tickets, and cut the extra text.”
“With so few tickets I don’t need a filter. Show details on hover, discounts in red, and keep Confirm Pickup on screen.”
The best of both versions, shaped by what riders told us
- Scroll cue and shadow contrast on the header
- “Did You Know” moved higher
- App download prompt placed right below the tickets
- Unnecessary filter dropped
- Hover details and red discount prices on ticket cards
- Text added to the Half Fare icon
- Confirm Pickup reachable without an extra scroll
The Final Designs, from First Click to Confirmed Order
After testing, we combined the strengths of both versions into one final system across the homepage, ticket page, and checkout flow.
Try the interactive prototype→
Checkout flow
If I Kept Designing, Two Things Come Next
What User Feedback Actually Changes About How I Design
With guidance from Professor and collaboration with my teammates, this project showed me how much real user feedback is worth. Data analysis and A/B testing pinpointed rider pain points, so we could cut steps and clean up the layout. Iterating together, with accessibility in mind, taught me that great UX is not only visual design but continuous improvement grounded in real need.
View the full processbook →
