Warning: Declaration of Portfolio_Walker::start_el(&$output, $category, $depth, $args) should be compatible with Walker_Category::start_el(&$output, $category, $depth = 0, $args = Array, $id = 0) in /homepages/26/d732266136/htdocs/wp-content/themes/sizemttrs/functions.php on line 191
Origin Client Game Library | Janelle Hitz | UX/UI/Product Design
  • Origin Client Game Library

Origin Client Game Library


Role: UI/UX |  Team: 2 Designers, 3 Engineers, 1 Product Manager

Case Study – Origin Client Game Library

My team and I 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 Design

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 Library

  • 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.

Above: Hovercard sample

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


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.