兿 | An UX Designer 💻 + Industrial Design Fan 🤖 ; Previously designed @ EA 🎮

Intern at EA | Who says games cannot be streamed?

Who says video games cannot be streamed?

The Play-Later

A cross-platform game discovery experience that allows gamers explore games through playing.



This project was initiated based on the shift of EA’s business strategy. Instead of the traditional game purchase model, EA is developing a new experience that allows gamers to own games through a subscription that lowers the entry barrier of playing multiple games. 

With this shift, I notice an increasing need for a fast and effortless game discovery service and initiated this feature to fit into the context.




UX Designer

Research Synthesis(Scope, Persona, Journey, Use Cases, Guerrilla Usability Testing;);

Rapid Prototyping(User flows, Wireframes, Hi-fi Prototypes );

Product Management;

Mentored by Jeff Thoene(Manager); Consumer Insights Team

5 Weeks


Project Overview


Browse with a few swipes

A Mobile Hub for Discovery On-The-Go

An intuitive browsing experience designed specifically for mobile devices.


Pre-download demos to devices

Stream games on any of your devices

Pre-download demos of games you are interested in and play them on any of your devices.


Smart back-end management

Only download the games your truly enjoy


Play without Interruption

No need to pause to waiting for download. Full-game download will start as you get closer to the end of the discovery session.

Multiple Feedback Channels

With in-game toasts and accessories, gamers have full flexibility to decide what and when to download games they had fun playing.

Download full.png

Fragmentize your game exploration

Not Your Game? Just Switch;)

With the In-game Screen Overlay, gamers can switch to other demo without quitting current gameplay.



My Process

week 1


  • Scope

  • Problem

  • Users

week 2

Research & Synthesize

  • Consumer Insights

  • Competitive Analysis

  • User Journey

week 3

Ideate & Evaluate

  • User Flow

  • Need-to-feature Map

  • Sketching

  • Design Critiques

week 4-5


  • Wireframes

  • High-fidelity Prototypes

  • Design System



Define project scope

Why I chose to focus on improving game discovery experience for subscribers?

I started with a wide open canvas for this project. There was too many potential space to work on, especially when facing different users. Therefore, I initiated meetings with project owners, designers and colleagues from marketing and analytics teams to understand what is needed the most under current conditions.


How to help subscribers get the most out of their subscription?


Refine problem statement


A look into the subscription positioning interviews pushed me to dig deeper into the core of this problem.

Based on the research, I was surprised that gamers don’t need another game recommendation feature since they are already using platforms like Reddit and Twitch. Rather, they are struggling in find the “right” game. Moreover, with a lot of conflicting priorities, it’s hard to dedicate the time for gaming.

I realized that helping gamers find “worthwhile” quickly is the key.


User Quote

“Finding a worthy game can definitely be hard and frustrating. I’m willing to invest the time, energy and money, but sometimes you get far into it before you realize it isn’t for you.

- Catalog player, Dallas


Define Users

Design for Breath, not Depth

For different gamers, “worthwhile” means very different things. As I dig deeper into user’s needs, I found that it could 2 very different products depending on the different gaming habits. I decided to focus mainly on the Catalog players according to the project scope defined in the early stage.



Time/Money Equation

Primary hobby; allocate significant time/money


  • Focus on 2-3 big titles;

  • On top of the community;

  • Being Professional


Time/Money Equation

Limited time or money; want best possible within constraints


  • Play as much as they want;

  • Have fun with friends;

  • Want to make use of the full subscription value


Concept Comparison: Initially, I explored many different ideas to cover both players. However, designing for both would expand the project scope. Through talking to team members, I narrowed down to only focus on the catalog players.

Depth Copy 3.png
  • More difficult to implement

  • Not necessarily relating to subscription

  • Only valuable for frontline gamers

  • Easier to achieve

  • More related to the core value of subscription

  • Valuable for broader range of gamers


journey mapping

But what does it even mean when users say they want to spend more time gaming?

*Business-wise: How to keep subscribers engaged in consuming game content?

I mapped out the current game exploration journey and visualized user emotions to find out painpoints behind this frustration.


Current User Journey

Painpoints Illustration

User needs-min.png

Ideate, critique, & repeat

Context Copy 9.png

translate insights to features

How I organized ideas into actionable features within limited time

Designing for the whole discovery flow was a huge scope to dig into. To clear my mind and keep focusing on the core experience, I mapped out user goals, problem statements and user tasks, and align them to actionable features and entry points.

This map helped me to understand the scope of the project as well as the priority of feature needed in terms of communicating my vision. I was able to quickly decide on the key user flows.


The needs-to-feature document


Design Across Platforms

Mobile to Desktop

Based on persona behaviors and user flow, I decided to create a cross-platform design for this concept. I analyzed tasks needed for each platform and sketched out my visions accordingly.

User Flow & Tasks


Concluded from my insight-translation map, I found the device touch point pattern and connected them into the flow chart above. Based on these user behaviors, I visualized my ideas through sketches and prototypes.


MOBILE: Browse Scenario


DESKTOP: Review, Play, and Switch

Desktop flow.jpg

Design for Trust


The Challenge

“I am hesitated to opt-in pre-download before I know how it works. I don’t want to have a bunch of random stuffs downloaded on my devices.”

In order to maximize the benefit of the Play-later, pre-download plays an essential role in the whole experience. However, allowing automated pre-download function requires a lot of trust of the system.



I quickly created a set of storyboards and wireframes to visualize the concept and gorilla tested with colleagues across teams. And below are some issues I found:

DFT Copy 2.png




From the frequently asked questions, I summarized 2 major concerns.

Concern 1

What should I expect after I clicked “Enable“?

Users were lack of background information of the new feature and were expecting to see a thorough introduction before using it. This indicated that an onboarding flow is critical for NUX in terms of lowering the entry barrier as well as creating a trust-worthy impression.

Concern 2

Would it “run wild” after I opted-in? How can I control this automated feature?

I also noticed a fear of losing control over the downloaded library. Users were looking for a balance between automated and manual download management. Thus, my design should leave enough space for users to give feedbacks, make changes and take over the control when necessary.




The solution consists of 2 parts: 1. onboarding experience; 2. back-end feedback system.

Solution pt 1

Double Onboarding Flows

With all the complications in enable automated downloads, it's our responsibility to give users the right guidance they need and build up their confidence.

I designed and tested a variety of onboarding flows, and modified prototypes according to feedbacks. After rounds of iterations, I finalized the onboarding flow into 2 parts: 1) onboard mobile pre-download; and 2) onboard gameplay manage & switch tips.

OnboardPredownload Copy.jpg

Onboard gameplay manage & switch tips:


Solution Part 2

Provide Ways to Say “No” (preference + back-end control)


Measure the result


Working with the style guide


It was my first time incorporating a style guide that contains more than hundreds of symbols, colors, grid systems and typography. With such a large library, it is easy to get lost and stumble on picking the “right” visual elements for hours and hours. Working on this adventurous project using EA’s newest design system was even more complicated and full of possibilities. On the fun side, it left me plenty space to be creative and craft new components beyond the existing library.


After I consulted with the senior designer, I started with just a few fundamental libraries: typography, grid systems, colors, iconography, buttons and inputs. I went through them and picked out the components that were the closest to what I need and started to build upon them throughout wire-framing and prototyping. For the components that were brand new to the existing guide, such as the mobile card navigation and the in-game overlay, I made the visual connections by using consistent spacing, color, and corner radius, etc.


By applying the visual guidelines early in the design process, I got to weave the new design language into my design step by step and created a set of implementation-ready hi-fi within the tight timeline.

Style guide.png

Design Gallery