first frame of EA Sports homepage homepage

For this project I was given the art and UX and needed to take that and create the visual representation on the page that would be used for the homepage of This primarily used html5 video for the background element and then javascript to handle the overlays. Before moving into some of the more complex conditions I had the first version working with javascript only being used to run the background video, everything else was carefully crafted css selectors and pseudo selectors.

The mobile experience for this was different of course due to the limitation against having background videos on a mobile device. For that we used the background image seen on the desktop view and added a Ken Burns effect to give it some life. This is also one of the few page templates on the site that includes a specific layout for tablet devices.

The goals for this redesign of the homepage were to get the user into their target game quickly so they could get to the meat of what they really were there to do and not linger on the homepage where there used to be postings from all games in a mosaic type layout. Overall the goals set for this redesign were all met. Since launching this page the video and content has already started to evolve which was planned. As new games launch or have new major announcements, like announcing the cover athlete for Rory McIlroy PGA TOUR, that game could get shifted to the top for more prominence before moving back to where it would belong in the normal stacking order.

First tile for Rory McIlroy reveal page

Rory McIlroy Reveal Page

For this project I worked with two other developers to create this experience that was used by marketing to announce the new game’s release date and cover athlete. This architecture of this page was structured in such a way that all three developers were able to work on it simultaneously without conflicting on our code. This project had a tight deadline and the team pulled together well to get it launched on time and other sports teams were interested in having a version on their site almost immediately after launch.

I specifically worked on the side rail elements and the pre-order page at the end. I also worked with Art to get the final assets in place and had to create or modify some of the new assets so that everything would work with the from art and the content from the Content Managers without causing any visual bugs when assembled.

I had a desire to use Elevator.js for the scroll to top action but was unfortunately denied for probably obvious reasons.