EA cards

Ultimate Team

How Fi & EA SPORTS Empowered Madden NFL Gamers on the Web

We designed the web interface allowing gamers to manage their team.

EA SPORTS wanted to extend the Madden NFL console experience to the web, and Fi was tapped as the starting team.

The client

With more than $4 billion in net revenue in fiscal 2012 – over a billion of those dollars coming from digital – Electronic Arts (EA) is one of the biggest players in the video game industry. The root of EA’s expertise is in console-based platforms, so the match with Fi was perfect as we brought the full force of our web expertise to bear.

The Challenge

Bringing a deeply rich console game experience to the web in a meaningful way was no small challenge, but our digital ballers tackled it full-force. Despite being on a different device – desktop vs. TV – the design would have to look and feel familiar to console gamers, while maintaining an intuitive interface that offered cool new features and functionality.


The Team

EA gave us the reins and trusted us to design something amazing. That trust - the relationship - made the project an instantly successful collaboration.

Designer - Fi Stockholm

Sacha - Visual Design

Roy - Visual Design

Jack - UX Design

Liza - Production

STRATEGY & UX

The Concept

Enhancing immersion and interactivity with the Madden NFL experience was our main objective, and a solid creative concept was the critical first step.
The marriage of Madden NFL, fantasy football, and player trading cards was fertile ground to surprise and delight the users.

The gameplan

Our UX challenge revolved around elegantly intertwining and smoothly integrating many varied sections of content, often disparate and only marginally related. From card packs to a storefront and auction block; data visualizations to help screens; all had to peacefully co-exist within a unified interface.

First schema sketches Example of schemas presented on sticky notes

Purchase new packs

Track card value over time

Tear open your new packs

Visually manage your team

UX Designer and his trusty moleskine

Fi team planning the User Experience and Strategy

The Playbook

As we move from informal sketches into annotated wireframes, the level of detail expands to include every nook and cranny of the experience.

Design

The plays have been scripted, the gameplan is clear, now it’s time to hit the field and make it happen… With design.

The Cards

At the heart of the Madden Ultimate Team (MUT) experience is the ability to acquire, trade or auction to your heart’s content until your roster is just right. The visual metaphor for managing your team is old-school trading cards, and we took aim at designing a real gamechanger for the online space.

Player OVR, Position
& Card rating

Player Photo

Player’s Name & Team

Borders made from
solid gold!


Fully custom

Seven different types of cards represent various core components of your Ultimate Team, and each one deserves special treatment in design. In the end, the user can customize their experience, and their team, as deeply as they choose.

  • player
  • coach
  • stadium
  • playbook
    offensive
  • playbook
    defensive
  • injury
    recovery
  • uniform
    home
  • uniform
    guest
  • contract
    extension

Front to Back

Based on the old-school trading card form factor, our digital versions needed to hit an unprecedented level of sophistication. Beyond just pics and stats, we aimed to fully leverage the capabilities of the interactive space by creating hot new features and functionality.

THE SITE

Maddenultimateteam.com is the place where you can fully browse, manage and strategize your Ultimate Team.
Think of it like your digital headquarters, where you’re in control, making all the decisions for how things will play out on the field.

THE OWNER’S BOX

Beyond the infinite variations of players, coaches, stadiums, and uniforms, this is also where you can experience the thrill of opening your new card packs… just like when you were a kid – only cooler.

Example of cards packs

Our goal was to match the childhood
memory of opening that fresh pack of cards.

  1. Rollover new packs01
  2. Tear open your new pack02
  3. Discover your new cards03
  4. Finally, take action!04

Contracts
& Injuries

To field the best possible team, you need your players healthy and under contract… The MUT interface allows for management of both contracts and injured players so you can weather the inevitable ups and downs of a typical NFL season.


Field Your
Best Team

Ask any NFL coach and they’ll tell you: if a player’s not on the field, they can’t help you win. The coaching interface gives you full drag-and-drop configuration of your starting lineup, with infinite possible combinations, to help ensure you’ve always got the right personnel on the playing surface.

Drag-and-drop functionality
empowers users to control
their lineup with ease.



On the block

A huge part of the Ultimate Team experience is the ability to buy, sell or trade players in an auction-style marketplace. So if your Kicker is choking on the game-winners, it may be time to put him on the block and see what you can get for him.

Auction off your unwanted cards

Bid on your favourite cards

Select a card to trade or auction


the box icon

  1. Starting with a sketch to
    get the main concept
  2. Jump into Photoshop and
    draw the basic shapes.
  3. Add details to give the icon
    personality and flavour.

the final result

Cards packs boxes icon variants Cards pack box detailed view

Add branding to personalise the icon to your client.

Adding shadows creates depth and realism.

Power up

Collect coins, then invest in your team by acquiring new players via card packs. We put some extra love into the unboxing experience, so watch your spending, it can add up quickly when you’re fully immersed!

Buy pro cards view

adding personality with icons

  • Getting started
  • Name your team
  • Returning user
  • Start an auction
  • Manage your teams
  • Get your cards

the takeaway

The ultimate NFL video game franchise couldn’t be contained to just one platform… It had to hit the web in a meaningful way, set to thrill and delight gamers and fans alike. With Madden NFL 13 Ultimate Team, EA has delivered a groundbreaking gaming experience, and Fi is proud to have made a major contribution to the franchise and its future… Now let’s play ball!

More from team Fi

  • Broadway Case Study

    Broadway.com

    iPad App

    Broadway.com tapped Fi to produce a one-stop-shop for the latest Broadway buzz, information, pictures, and a seamless interface for snagging seats to any live performance.

  • Kids Choice Awards Case Study

    Nickelodeon

    iOS App

    The #1 entertainment brand for kids approached Fi looking for an iOS application for the 25th anniversary of their Kids' Choice Awards, and we jumped at the chance to play with them.

  • Ramayana Case Study

    Google Ramayana

    Website

    Fi and OgilvyOne launched Chrome in Asia with an interactive retelling of the epic tale of Ramayana.