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.
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.
Our goal was to match the childhood
memory of opening that fresh pack of cards.
-
Rollover new packs01 -
Tear open your new pack02 -
Discover your new cards03 -
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.
auction room carousel icons
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
- Starting with a sketch to
get the main concept - Jump into Photoshop and
draw the basic shapes. - Add details to give the icon
personality and flavour.
the final result
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!
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.com
iPad AppBroadway.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.
-
Nickelodeon
iOS AppThe #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.
-
Google Ramayana
WebsiteFi and OgilvyOne launched Chrome in Asia with an interactive retelling of the epic tale of Ramayana.