UCF Homecoming


Role: Web Design & Development

Overview

This will be the second time the UCF Homecoming site has been redone. My job at OSI was finally allowing us to rebrand the site. After receiving the requirements from the agency (aka client), I immediately started researching other school homecoming sties only to the see that most big name schools used a standard CMS template. There were no unique features to any of the sites. Also while researching I noticed via Google analytics that all traffic immediately went from the home page of the existing homecoming site to the events page. The client also mentioned that they really wanted to emphasize the events for this year’s Homecoming. I also took on the task of doing a little user research. I went about campus asking students "What's the first thing that comes to mind when you think about UCF HC?" Every time I received the same response, "Spirit Splash". After making these notes, I came to the to following realizations.

Homecoming Notes

  • Importance of events (How about we bring upcoming events to Home Page?)
  • Spirit Splash, Most recognized homecoming event
  • Opportunity to be unique from competitors, (No Templates)
  • Custom Events post-type to keep site updated

Homecoming Mockup 1

Upon browsing for inspiration I noticed that video background was becoming a popular web trend. Being a developer who always considers, page load, weight and performance I was initially turned off by the idea of using a large video file for a page background. I did however notice that the video had the potential to add a more human feeling to a web page. Many video background examples that I saw were careless thrown about and added because it was a current trend. However if done right and properly optimized It's a very unique and new experience for the user.

I've worked closely with OSI's Video production staff in the past and knew that they had existing footage to last year’s spirit splash event. I thought attempting video background as a "Spirit, Splash" page could definitely build a lot of anticipation to the event as the client had wanted. Splash pages are typically outdated as they add another step for the user before getting to the content that they want. However, by adding emphasis to the event with the splash page combined with the moving the events to the home page I thought I could still accomplish our goal on the size. The main goal was to make sure it was implemented properly.

Video Background

  • Use of a quality video
  • Ensure the user has a good experience
  • Optimize, optimize, optimize. !important

Homecoming Mockup 2

After the initial implementation of the splash page and the video B.G, It looked great, but I spent a lot of time optimizing. I was able to research and trim enough fat to find a happy medium of video/page quality and browser load for the desktop version. I decided however that loading a video for mobile was not ideal because it would be slow loading, use a lot of the data, and the user wouldn't receive the full experience anyway. I used JavaScript to load the video only at desktop resolution and for mobile it would display full-page background image.

One of the difficult tasks of creating the remainder of the site after the splash page was carrying on that excitement that the user experienced on the initial site load throughout the rest of the website. It confuses the user if the site design drops off after certain points throughout the experience. I attempted to solve this by creating unique visual assets and banners for visual stimulation for the user. After optimization, and completing the rest of the site I was happy with the results, it looked great and feedback from users, and analytics was also positive. The site received nearly 5000 hits during the first day of homecoming week and continued a steady 3000+ per day throughout the rest of the week.

View More Projects


Myzone.org

Web Development

View Project >

Flight Treks

Web Development

View Project >

UCF Homecoming

Web Design & Development

View Project >

AAA Internship

UI/UX Design

View Project >