ORIGIN CLIENT & GAME LIBRARY

Electronic Arts
UI / visual design

CASE STUDY, ORIGIN CLIENT GAME LIBRARY AND UI

We were tasked with an overhaul of the Origin Owned Game Details Page, and Game Library to include things like a responsive game library, tooltips, expansion information, and a better download interface. The interface was targeted for users who wanted to view their library of games on the Origin software application, and manage their content better.

DEEP DIVE BEFORE THE REDESIGN

Each game has its own unique set of requirements that we had to consider. What we found:

  • Free to play games with no purchase required
  • Demos with the ability to purchase the full version
  • Time-based trials which expired after a certain amount of gameplay
  • Battlelog (social platform for Battlefield 4) which launches from a website
  • Premium editions, that needed to be distinguished from typical expansions
  • The Sims, with a vast amount of expansions and stuff packs which required special consideration

GAME STATES ONCE IN THE LIBRARY

Each game has its own unique set of requirements that we had to consider. What we found:

  • Download
  • Install
  • Repair
  • Update
  • Sync to Cloud
  • Play
  • View Game Details
  • Uninstall

THE SOLUTION

A solution was discovered that would help consolidate the various states as well as handle technical limitations. The hover card is a variable size panel that, on hover, shows the users just what they need to know about the game at that moment. It shows what friends are playing (social), what achievements you’ve unlocked per game (personal), and it conveniently shows users info at a glace, and what they can do next.

Hovercard example

LOOKING AT SIMILAR UX PROBLEMS

We did research on other products that had similar UX problems like the one we were trying to solve. The familiarity of a hover card worked to our advantage as users were likely to have encountered this before on other products.

HOVERCARD MESSAGING SYSTEM

  • Violator: Visual indicator to get the users attention, shows you something is new.
  • Hovercard Message:  The iconography is reinforced with a custom message. This message communicates the details, and users associate this icon with the message. Overtime, users learn what the violator stands for even without having to read the message
  • Owned Game Details: Provides all in depth, detailed information that that hovercard gives the user a preview of.

Left to Right: Owned game details page, violator (upper right), hovercard with message

WHAT WE LEARNED

It’s challenging to fit different technical limitations and variation in one place while still keeping the interaction simple on the user side.  Focus should always be on the user, and a convenient well designed experience is key. There isn’t always an immediate need to “recreate the wheel”, if it’s a common UX solution, test and see if it works for your product as well since users may already be familiar with the mental model.

ADDITIONAL ORIGIN USER INTERFACE DESIGN

In addition to the game library, below are other examples of Origin UI work done for the application.

Client GUI

Origin in-game overlay

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google