Fi - The Interactive Firm: Madden 10 Online Franchise iPhone App

EA Sports’ Madden NFL 10 is a console video game for the American football enthusiast. EA Sports engaged Fi on yet another set of projects with the task of expanding that experience into web and mobile mediums. The end goal was to provide an online franchise data interface to the game, a place where users could set depth charts, propose trades, view game schedules, and much more. The result was the Madden ’10 Online Franchise website and iPhone native app.

The Process

Because the client wanted a consistent experience between the web and iPhone apps, these two projects were wire-framed, designed, and built in parallel. Designing a consistent feel and user experience across both applications required great dedication and creativity from our interactive developers and designers. They considered the wide-ranging differences between the two mediums, the most notable being the screen size and resolution.

Large amounts of data that could be displayed on a single page in the web app had to be translated to multiple screens in the iPhone app. The resulting design was a rich navigation experience with data displayed in a more hierarchal, drill-down manner. Supplementary data, such as player details and game stats, was displayed using the iPhone’s native modal view which slides open and closed again at the end of the interaction. This type of view was crucial in the design because it reduced the depth and branching of the hierarchal views. It also allowed for those views to be used at multiple points across the app, upholding the user’s expectation for how they would interact with it at every point.

To maintain a similar look and feel between the web and iPhone app, graphics, colors, icons, gradients and even some layouts were shared to create a seamless and cohesive Madden Online Franchise experience.

The Technology

Fi developed Madden ’10 Online Franchise iPhone app using the iPhone SDK, including the Xcode developer tools, iPhone Simulator and Apple’s Xcode environment. Using the Objective-C programming language with the Cocoa frameworks, the dozens of different views were integrated into a complex navigation system which consisted of a tab bar controller, several drill-down navigation controllers, and modal views.

Data management was a key component to the success of this project. The large amounts of data had to be managed in a centralized, efficient way and the frequency and size of data requests had to be optimized. Data requests were made using asynchronous http requests. The returned xml data was parsed using the xml parser provided within the iPhone SDK. Controllers were then notified in an event-driven system that their views were ready to be updated. The centralized data managers also had the task of tracking when to invalidate the data so that the next request from the view controller would prompt the retrieval of fresh data from the server.

The iPhone app uses the same data calls, XML, roster images and team logos as the web version to minimize the amount of maintenance that the client would have to do on those types of assets.

The Result

The Madden ’10 Online Franchise native iPhone app is a beautiful and interactive mobile experience that nicely compliments its web counterpart and feels like a natural extension of the Madden NFL 10 console game. It brings the experience full-circle for Madden NFL 10 gamers.