CATCH A CAT
MY ROLE
Visual Design Lead
UIUX Designer
UX Researcher
OVERVIEW
designer
Elaine Zeng
Ming Huang
Yongkang Yu
Xinjin Xu
The current CAT website still has room for improvement in terms of information hierarchy and user experience. As user needs continue to evolve, iterating and updating the website has become a crucial step to enhance service quality and user satisfaction. Thus, the "CHATHAM AREA TRANSIT" (CAT) website is being redesigned to enhance user experience, providing a modern, accessible platform for purchasing bus tickets, checking routes, and accessing essential transit information.
SUMMARY
Currently, CAT is working hard to improve its operational efficiency and service quality to adapt to changing transportation needs. Thus, a convenient user experience in ticket purchasing is highly important. The current CAT website still has room for improvement in terms of information hierarchy and user experience. As user needs continue to evolve, iterating and updating the website has become a crucial step to enhance service quality and user satisfaction.
How might we enhance clarity, accessibility, and engagement by improving ticket information, payment systems, promotional communication, and visual design to better support user decision-making and navigation?
OPPORTUNITY
Optimizing clarity, prioritizing content, enhancing navigation, reducing cognitive load, improving user engagement
STRATEGY
Simplifying navigation bar, enhance route search, clarify button design, and ensure consistency with the homepage
OBJECTIVE
Creating a seamless and inclusive transit experience with redesigning for ease, speed, and accessibility
CORE EXPERIENCES - TICKET PAGE
DEEP DIVE - TICKET PAGE
The Hero Page: Combining it with the bus card design and slogan to allow users to better identify the information and topic of this page
APP Download Section:
Separating the promotional hero page from the app download introduction allows users to better distinguish between different types of information.
In the app download section of the hero page, we added a down-scroll indicator to inform users that additional information is available by scrolling further down.
Ticket Categories Section:
We added a filter tool and re-designed the visuality of the ticket. This approach allows users to easily navigate ticket options while enjoying a refined and cohesive visual style.
Information Details:
Based on user feedback indicating a preference to see ticket purchase options immediately upon accessing the Ticket page rather than introductory information on purchase methods or contact details, we relocated the introductory section below the Ticket Categories. This adjustment helps users quickly find the purchase guidance they need.
CORE EXPERIENCES - home PAGE
DEEP DIVE - home PAGE
Header: The Hero page enhances the prominence of the navigation bar and makes the search function more noticeable for users.
Welcome Page: The more compact text layout allows users to quickly read through the introductory section at a glance
Main Features: We clearly indicate that these four features are clickable, guiding users to access more content. And separating the background between the top and bottom sections
Plan My Trip: As more users expressed a preference for the Google Maps-style UI, which they found familiar and easy to use. This choice minimizes learning time and makes the feature more intuitive.
CAT Services: The shadow color of the CAT Service section was adjusted to match the theme color, creating a more cohesive visual alignment with the overall design.
Did You Know?: A visual cue that allows users to gauge how much content remains as they scroll. This feature helps users feel oriented and encourages them to explore additional information.
News & Updates: We differentiated colors for “Information Type” and “Information Links,” making it easier for users to understand and navigate the content at a glance.
Footer: Allowing users to directly navigate to the ticket purchasing page and follow CAT’s social media channels. This integration offers quick access to key actions right from the footer, enhancing user convenience and connectivity.
