Origin
2014 - 2015
Origin is an Electronic Art’s digital gaming platform that allows users to purchase, download and directly play games.
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
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.
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.
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.
While the Store Game Tiles promoted single game titles, the Special Offer Modules and Related News helped promote featured games or special offers.
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
In collaboration with another UX Designer, I created quick animations showcasing how the drag-and-drop feature in the chat would work.
Origin Profile (Add-User-to-Chat) from acd on Vimeo.
Origin Profile (Add-User-to-Chat) from acd on Vimeo.
RELATED PROJECTS