Client: BioWare, Electronic Arts

A Canadian video game company based out of Edmonton, Alberta. In 2007 they were purchased by Electronic Arts, but, because of the quality the brandname carries with fans, they have maintained a high degree of separation and autonomy. The brand is known for producing high quality products with riveting storytelling; every game franchise they produce has been wildly successful and highly praised by their ravenous fanbase.

Roles

User Experience Designer

Visual Designer

Workshop Facilitator

Project Brief

Roleplaying Games (RPGs) are known for their compelling story arcs that span multiple games, especially those produced by BioWare (arguably the best storytellers in RPG gaming for nearly two decades). As fans play, their decisions in-game have resounding ripple effects that alter the game’s storyline. As gamers move from one game to the next, their past decisions can have wide reaching and unknown effects into future titles. To gamers, this is the thing they cherish most: their decisions matter.

With a new generation of consoles coming to market, BioWare was faced with a dilemma: develop a game that could carry gamer decisions across consoles (e.g., from Xbox to Xbox One) or develop a game that utilized new consoles to their full visual and storytelling potential. They chose the latter, and to us to help them solve the problem of carrying gamer decisions forward, not only from one generation to the other, but across types of consoles (e.g., from Xbox to PS4).

UX Toolkit

Ideation Workshops

User Interviews

Axure Prototyping

Keynote Prototyping

Information Architecture

Information Visualizations

Ecosystem Mapping

Interaction Design

User Interface Design

Project Objectives

  • Design and develop a web app that allows gamers to recreate their past choices in the cloud to bring to future platforms.
  • Design a scalable, gamer-facing solution to the vast number of possible story arcs (over the first two games and expansions, there were over 300 decisions with thousands of possible permutations)
  • Allow new and returning gamers to explore and create alternate story-lines they may not have found in previous games.

Fun Fact

During one of the earlier stakeholder workshops, I was the one that came up with the name for the Keep! :-)

Process

There were four phases to the Dragon Age Keep over the entire project: 

  1. The Deep Dive: Understand the Dragon Age fan through in-depth universe and user research.
  2. Prototype: Standup a Dragon Age decision tree prototype with real data, in addition to other Keep features (Game Export, Career, Heroes, World Lore, Store, etc.) to get buy-in from BioWare and EA stakeholders to create a Dragon Age franchise hub.
  3. Design the Tapestry: Ideate on a thematic, player-facing solution for gamer choices that was scaleable for the future.

Discovery

Phase 1 – The Deep Dive

In order to design for Dragon Age fans, we needed to have an in-depth understanding of the Dragon Age universe. To get to this level of  included a few different types of research:

Dragon Age universe research: Online research into the games (storylines, fan sentiment, purchase patterns), extended universe (comics, fan fiction), merchandise, auxiliary products. I then mapped the entire franchise ecosystem of disparate products and touchpoints, which allowed us to understand the bigger picture.

 
 

Dragon Age fan research (both online research and remote user interviews): This group of users was among the most engaged and enthusiastic group we’d ever encountered. Their passion for Dragon Age (and RPGs in general) was astounding: games, comics, conventions, cosplay (role-play in the real world), fan fiction, etc. We knew that whatever the final solution was, it needed to match their high expectations.

Stakeholder workshops: We conducted a number of 2-3 days long stakeholder workshops over the duration of the project. The first one (held once our initial deep dive research had been completed) was all around confirming what we’d found, identifying gaps in our knowledge, and ideating around potential solutions.

Design & Development

Phase 2 – Prototype

With the vast number of choices (+300) through the first two games and expansions, with thousands of permutations of the final world state, we needed to understand how complex the data was (how choices were interconnected). I performed some initial exploratory visualizations:

After visualizing a few scenarios using the first 20 questions in the dataset, it became apparent that we needed to standup the entire decision tree to understand how far reaching knock-on effects could be. We delivered this in addition to other prototyped Keep features to use as ammunition to get buy-in from BioWare and Electronic Arts stakeholders that a user-facing solution was the next step.

Phase 3 – Design the Tapestry

The decision tree prototype was a fantastic tool for designers and developers to understand the nebula of decisions, but it only proved that a user-friendly, easy-to-use solution was required. We explored many different approaches to visualizing the data for gamers. Every solution we explored had it's pros and cons: some allowed choices to be seen as positive or negative and all in one view, whereas others were extremely visual and had elements of storytelling matching the brand. The final solution lay somewhere in between: The Tapestry.

  • Tile-based solution that groups choices by story arcs.
  • At a glance, gamers can understand what choices were made in the version of their story.
  • Quickly dive into a group of decisions, make changes, and see the ripple effects across each gamer’s unique Tapestry.
  • Shareable artifact that quickly communicates what’s most important to each individual.

Another stakeholder workshop was used to deliver the final solution. We decided to try eliciting feedback through a new method: Ritual Descent. Team members sit facing their printed out designs. Stakeholders stand behind them and give honest, critical feedback while the team takes notes silently. It was one of the most nerve wracking critique sessions I’ve ever experienced, but we needed to confirm that our direction solid.

Once we’d confirmed we were on the right path at a high-level, we moved forward with design of the more granular pieces of the Keep through sketching, prototyping (both in Keynote and Axure), wireframing, and user interface design.

Results

The Tapestry was resounding success! Gamers were able to see their choices from past games visualized in one concise view. New player to the franchise were able to approach the vast number of choices quickly and easily and able to quickly jump into the next game in the franchise.

Awards

Gold Communicator Award for Website Structure & Navigation

Gold Communicator Award for Web Application/Service

Gold Communicator Award for Gaming Related Website

Silver Communicator Award for Visual Appeal

Best in Category Horizon Award for Games Website

Reviews

Leviathyn Review: 8.5/10

Idiot Box: 4/5 Stars

Work at Play was absolutely instrumental. We never would’ve got to where we [did] without their involvement. The core feature of the Tapestry as a visual way to set your choices was brilliant. It really made the site what it is today.
— Fernando Melo, Director of Online Development at BioWare
 

You'll need to create an account and play to get the full experience.