FIFA Ultimate Team

Electronic Arts

iphone-6-plus-isometric-view-mockup

FUT 2017 Companion

The FIFA Ultimate Team Companion App is the official gameplay companion to the console player experience. When playing FUT players can build thier squads, buy and trade items on an online market, compete in competitive tournament structures and collect rare and sought after players items.

My work on the FUT 16 mobile product involved both UX design and research during pre-production phases as well as development tasks during the production phase. Technologies used to drive the experiences are based on HTML, JavaScript LESS/CSS, and server communication through REST API’s.

d-p4-prius-mobile-branches-17_0_1-platforms-ios-www-index-htmliphone-6-plus-10d-p4-prius-mobile-branches-17_0_1-platforms-ios-www-index-htmliphone-6-plusd-p4-prius-mobile-branches-17_0_1-platforms-ios-www-index-htmliphone-6-plus-9

Console Draft Mode Animation

Collaborating with producers and artists on the console teams I developed a UI animation included in the largest feature developed that cycle. The process involved gathering requirements from the stakeholders and producing various storyboards to plan the basis of the animation. From there I developed many different prototypes with varied timing and styles. After some final touches and integration done by a console UI artist the animation was launched with the final product in FIFA 16.

FUT 2016 Companion

Before being brought onto the mobile project, our team released the FUT 2016 Companion App product onto the app store. Although featuring many of the same features that would exist on the 2017 product, the interface had measurable issues that I sought to solve during that year.

d-p4-prius-mobile-branches-16_2_1-platforms-ios-www-index-htmliphone-6-2d-p4-prius-mobile-branches-16_2_1-platforms-ios-www-index-htmliphone-6-5d-p4-prius-mobile-branches-16_2_1-platforms-ios-www-index-htmliphone-6-6

What was wrong with the Interface?

We set out to have a better understanding of the issues that the product faced moving forward. This involved leaning heavily on empirical studies and competitive analysis that would help us gain approval for more drastic design changes.

Research Methods

Demographic

  • 12 Participants from the Greater Vancouver area
  • 6 FUT experts with Companion App experience
  • 6 FUT experts with no Companion App experience

Material

  • A – OLD: This version mimicked the currently released version
  • B – NEW: This version is a new prototype with a more mobile-friendly UI focus

Method

  • 30 minute long one on one think aloud style sessions
  • A/B testing, every user used both prototypes to perform a series of specific tasks
  • Users evaluated each prototype without comparing it to the other first, then they evaluated both experiences comparatively

Inconsistent Navigation

“It’s not possible to navigate the app’s UI by swiping at tab level. While this is a relatively rare control method, some users we tested the app with previously did attempt to use this method.”

-UX Researchers

Ineffective tutorials

“As we know, tutorials are either immediately effective, or they are dismissed off the bat, potentially causing a domino loss of credibility effect on the rest of the tutorials.”

-UX Researchers

Wireframes

Developed in Balsamiq I produced wireframes to organize layouts and user flows. The primary goals was to take an interface that was heavily influenced by console UI design and communicate what it could look like taking more inspiration from the handheld market.

Mobile Navigation

unassigned

Task Time Reduction

squadlist

Scannable List Rows

playersearch

A/B Testing

Once our first pass was done on the new interface we developed a functional prototype in Flinto. This prototype was used to run an A/B test against the original interface and give us confidence in the new changes. Users were asked to use both interfaces with identical tasks.

Primarily we were looking to be sure that the new interface appeared faster in terms of speed and appeared more modern in its design. We worked with EA’s User Experience Research group to ensure we got good results and develop a testing road map for the remainder of the project.

uxr-graphs_01uxr-graphs_02

Conclusion

The product released a week before the console without any major technical issues. The Google Play store has between 1 million to 5 million downloads and the App Store boasts a 4.0 star rating. The new interface was able to shed some of its console heritage and become more effective as a mobile product.

“Superb app. Found it on the app store ( It doesn’t update from 16 like some said ) and have had none of these problems I’m reading about. Love the layout its miles better than 16. Loving the challenges for squad building but only use players you can’t trade or who won’t sell!! Can’t wait now for the game I’ve preordered on the ps4”

-Android User

“This app is realy great. It contains stuff that you would find in a full game but in just a small app. It helps people money wise in FUT by giving a reward every single day and it is less complicated.”

-Apple User

“I initially thought this to be clunky and awkward. Just a learning phase. Interface is much slicker than previous versions and higher security makes me feel safer. Great new features, fantastic job! Very impressive indeed!.”

-Windows Phone User

See More

Urban Warfare

View Project

This is a test post

View Project