Fi - The Interactive Firm: Madden ’10 Online Franchise

Overview

Riding on the success of EA Sports TeamBuilder, EA Sports Tiburon reached out to Fi to develop a web application called Madden ’10 Online Franchise and an iPhone native app. Online Franchise is a feature in Madden NFL ‘10 (an American football simulation game from EA) that allows the user to create a league with 31 of their friends so they can play each other and compete online. As an owner of one of the 32 NFL teams, the user is able to manage every aspect of their franchise from player rosters, depth charts, and even trades, all online with their friends.

When EA Tiburon came to Fi they had a rough beta version of the web application completed by another 3rd party vendor and wanted Fi to rework the Information Architecture and overall design. After a closer look under the hood, Fi quickly identified ways to improve usability and functionality of the application and were inherently brought on to execute those improvements.

The Process

The number one priority for the client was to have clear, consistent and usable Information Architecture across both the web and iPhone apps. The first step in achieving this synergy was seating the two Information Architects next to each other who were working on the wireframes for each application. This way, they could constantly feed off of each other’s creativity and were completely in sync throughout the IA phase. As a result of this, any major or minor changes were reflected on both versions creating a cohesive end user experience across platforms.

The biggest challenge that became apparent at project inception was identifying how all the possible functions of the web application would translate to a mobile device with a small, multi-touch display. The team carefully distinguished every required interaction and decided, alongside the client, which actions worked for each platform and how to unify those actions so they felt like the same experience.

Once the Information Architecture phase was completed and approved by both the internal review process and the client, the project moved on to the design phase. Several challenges presented themselves during this phase, mostly in regards to the iPhone designs and the inherent difficulties there; screen is of a higher, denser resolution than that of a traditional desktop display (being around 160 pixels per inch as opposed to 96) and the interaction device, your fingers, are also much bigger than a mouse, which can be accurate to the pixel. In addition to these challenges, the designers had to keep all of this in mind while also making the two apps feel like the same or a very similar experience. Graphics, colors, icons, details, gradients and even some layouts were shared between the two just so that the entire Madden Online Franchise experience felt seamless.

The Technology

Fi developed the web application by integrating with EA Sports World’s Web Partner Program. This meant writing the application as a single JavaScript widget using AJAX to make data calls to their backend and then receiving and parsing XML to update the front end. To speed up development time when writing standards compliant markup through JavaScript, Fi once again turned to jQuery as its plugin of choice, which ended up cutting down development and debugging time.

Because of the way JavaScript handles secure URLs (if you really want to know, JavaScript treats an http domain as different from an https domain, so when you try to validate, it gives a cross-domain error. Flash, on the other hand, is smart enough to know the domains are the same), Fi had to turn to Flash to implement the beautiful login screen present when the site first launches. However, the experience is so seamless that it is quite difficult to tell that a different technology has been employed.

For the iPhone application, we turned to our in-house expertise in Objective-C and Cocoa to develop a full native application. The same data calls, XML, roster images and team logos as the web version were used to minimize the amount of maintenance that the client would have to do on those types of assets.

The Result

One of the main goals for EA in creating online applications like this is to lower the barrier of entry into their gaming world by allowing users accessibility from virtually anywhere. Fi and EA have been working together to do just that and with major success. Also, as a result of this project and preceding projects, Fi is now considered a certified and chosen vendor for EA. Overall this has been a hugely successful application for EA and has continued to bring in new and exciting EA projects.