Style Guides
I created a style guide defining the color palette, typography, and interactive components used throughout the prototype. This included custom-designed icons, like the "Fight On" hand sign, "Beat UCLA" tee, megaphone, and Spirit of Troy (Band) logo, that showcased USC's school spirit, along with custom button styles, ensuring every interactive element felt native to the USC brand while guiding users clearly toward key actions like giving and sharing.
Front-End Development
The CMS platform didn't have built-in capabilities for more advanced interactions, like an auto-scrolling carousel, so I custom coded several components in HTML, CSS, and JavaScript. This included an auto-scrolling image carousel in the hero section and a custom "Buy Now" section for the limited-edition "Beat UCLA" t-shirt, giving users a dedicated, on-brand spot to shop and show their pride.
Mission Statement:
SoCal Rival Week, a one-week giving challenge runs November 17-24, where alumni, students, parents, faculty, staff, and fans rally together to show their support for USC and UCLA, two institutions rich in tradition and pride. Every gift you give pushes your school closer to victory in this battle of school spirit and a year of bragging rights plus, the opportunity to support The Spirit of Troy and The UCLA Bruin Marching Band who proudly carry the spirit torch forward at each university.
The Goal:
Design a landing page for Trojans that turned rivalry pride into gifts. The page needed to make giving feel like joining the fight, pairing a clear give-now action with a live leaderboard tracking USC against UCLA, and giving fans easy ways to show pride through swag, social sharing, and game day content, all building urgency toward November 24.
Web Wireframe
Since the page was a single, self-contained landing page, I designed a low-fidelity wireframe that mapped out all the necessary content upfront, giving me a clear structure to begin building directly in the CMS.
