News
- Thoughts on HTML5 Canvas
- August 02, 2010
- User Experience is #1
- July 29, 2010
- How do you connect a game console to a website?
- July 14, 2010
- When Should You Use Progressive Enhancement?
- July 01, 2010
- Fi and EA Sports revolutionize console gaming
- June 21, 2010
Sign Up for Our Newsletter
Get some goodies and special treats. We guarantee no spam.
We've Got a Brand-Spankin' New Blog
Get to know more about Fi behind the scenes. Follow us on.
http://kontain.com/fiRiding the success of EAMobile.com, Spore Origins and, most recently, EA.com; EA SPORTS and Fi collectively hit the ground running to create TeamBuilder in time for the venerable E3 Conference.
The TeamBuilder website allows users to log-in via their PS3 and Xbox 360 accounts to create teams, and browse teams other users have created. All teams created can be downloaded to the consoles, where users can then play them in single-player, and/or online against their friends. From a marketing perspective, the ability to create a team ready for game-play months prior to release will increase advance sales, buzz and anticipation for NCAA Football 10.

The Process
By previewing the game and downloading demographic data from EA SPORTS, we developed a strong understanding of the consumer and the game in advance of development. This was a critical step in creating a unified user interface and technical solution capable of accommodating a multitude of tasks, including: editing logos and fields, customizing uniforms, picking mascots and adjusting the exact set of skills and characteristics of all 43 players on a team.
Once in the trenches, our process began with the review of preliminary wireframe sets created by EA SPORTS. After a series of in-depth strategy sessions, we collectively determined to take a step back to square one in order to structurally identify precisely what we were building. We wanted the application to feel more like a game than a website, to foster a direct connection between the online and console aspects of NCAA Football 10. With this in mind, we wireframed each facet in the creation of a team from scratch, with the requirement of instantly and visually displaying the results of each change in-line.
The Result
The results of this revised approach is evident in the process of customizing a team uniform. Instead of using a standard series of dropdowns, we introduced a responsive hotspot system allowing users to directly interact with the uniform and receive instant feedback. The resulting experience is in-line with what gamers expect in today's world of HD gaming on the PS3 and Xbox 360.
During the technical ramp-up, we built a system for interacting with the data API EA SPORTS provided. For TeamBuilder to work, team data had to be shared between the game versions on Xbox 360 and PS3, as well as the TeamBuilder website. Using the newest features of Flash 10, we were able to solve issues like loading files directly from user's hard drives, evaluating lightness of images, use of 3D and seamlessly layering over 140 graphics for a single uniform, while allowing the customization of each part.
Subtle and complimentary, TeamBuilder's design features a solid non-competitive backdrop to clearly differentiate the active components in the user interface. The choices of a dark atmospheric background for the editor, and a bright green home and browse pages, were made to clearly differentiate the various interfaces within TeamBuilder. Ensuring the over 10000 graphical assets were accurate, right down to matching the 125 colors of historical NCAA teams, was no small task.
Success to Date
The unveiling of TeamBuilder at E3 was a complete success. In its first week, TeamBuilder has been used to build over 50,000 teams and to date over 100,000 teams have been created. The demand for the TeamBuilder experience across all of EA SPORTS offerings have been burning up Twitter. Stay tuned for more stats about TeamBuilder.
Are you looking for a partner to analyze your business and online presence to deliver a digital result maximizing your brand? Drop us a line.
Components
A collection of components from EA SPORTS TeamBuilder
Client
EA Sports
Release Date
June 1, 2009
- Technologies
- Gaia Flash Framework
- Actionscript 3
- Flash CS4
- Flash 10
TeamBuilder, by the Playbook
To get "in the game", Fi's developers created a series of "plays" to map-out the build process for TeamBuilder. It was unusual to hear creative's bellowing, "hot route! Double Option, on two, on two" from Fi's SOHO conference room.
Similar Projects
EA.com - Global Brand
EA retained Fi to build the premier gaming portal, with the requirements of driving site traffic, revenue and EA's global brand.
EA Mobile
EA and Fi teamed up to bring mass-appeal to mobile gaming with a re-design of EA-mobile.com, the site for mobile gaming.
Bamboo Dock
Fi created a desktop user experience designed to inspire and engage users of the Wacom Bamboo pen and tablet series