Origin

2014 - 2015

Origin is an Electronic Art’s digital gaming platform that allows users to purchase, download and directly play games.

 

Brief

Redesign the entire look and feel of the Origin platform.

Responsibilities

Predominantly maintain the UX for the old Origin eCommerce store. Additionally, before the launch of the new Origin experience, as a UX Designer, I helped design, code, and present interactive prototypes for the storefront, profile, settings pages, and other eCommerce components.

Other team members included five other UX Designers, a Producer, QA teams, and Engineering teams based in California and Canada.

Components

  • Agile Development

  • Advanced Web Front-End

  • Prototyping

  • Design Systems

  • Interactions and Animations

Tools

  • Sketch App

  • HTML5 / SASS

  • AngularJS / JavaScript

  • Terminal

  • Bower /Grunt

 
 
 

In mid-2016, the Origin platform launched its new look, offering gamers a smoother interactive experience.

 
 
 

Component-Based UI

Using different Agile development frameworks, the UX and front-end team collaborated on building a Modular Design System library.

This workflow allowed for clear communication across teams, as well as rapid user testing and iteration of essential flows.

Screen Shot 2018-10-01 at 7.55.20 PM.png
Screen Shot 2018-10-01 at 7.55.27 PM.png
 
 

User card

One of the initial features I worked on was the User Cards, which showed user statuses and game activities. Moreover, these features allowed them to either join the game they are playing, watch the game being broadcasted, leave them a message, or start a chat. After various UI explorations, I arrived at the designs below.

 
 
 
 

Game Store Tiles

As part of the store-front, I worked on several components including the Game Tile used to promote single titles.

Additionally, these tiles had to work in conjunction with other components such as the Product Carousel and the Franchise Module.

 
ea-artboard.png
 
ea-artboard-slide.png
ea-artboard-pomo-compbo.png
 

Promotional Banners

While the Store Game Tiles promoted single game titles, the Special Offer Modules and Related News helped promote featured games or special offers.

origin-deals.png
origin-social-tiles.png
 
 

Pages

Once the individual Store Components where developed, the main pages were built and user tested. By combining each module and designing new ones as needed, other Origin Web & Clients Pages where created which can be viewed below.

 

STORE-FRONT PROTO VIDEOS

SELF & FRIENDS PROFILE PROTO VIDEOS

 
 
 

PROFILE SETTINGS PROTO VIDEOS

 
 
 

Animation

In collaboration with another UX Designer, I created quick animations showcasing how the drag-and-drop feature in the chat would work.

 
 
 

RELATED PROJECTS

CFM International

CFM International

Helppo

Helppo

Lumen

Lumen

Chartboost

Chartboost