top of page
Free Responsive Screen Devices.jpg

PlayerShare.GG

E-sport Stock Market Platform

To prototype
Project Overview
icons8-user-groups-500.png

My Role

UX designer & Lead UI designer

icons8-calendar-500 (1).png

Project Period

Two and a half Weeks

icons8-monitor-64 (1).png

Project Platform

Desktop & Responsive Web

icons8-account-100.png

Targeted User

Esport fans with cryptocurrency experience

icons8-help-100.png

Goal

Provide on-boarding experiences and keep users engaged

This project is about using Cryptocurrency to invest users' favorite Esport Athletes inspired by Fantasy Sport.

 

Because of layers of layers of concepts involving in the platform, it is essential to create an onboarding experience from signing up to making the first transaction.

 

It is also crucial to keep users hooked, and make sure they come back to the platform from time to time, both in-season and off-season.

Step 1: User Interviews & Synthesizing Data
first two days.jpg

Industry Research

It was the first time I worked with real-world clients, and it was also the first time I encountered a project with many complicated concepts.  I spent extra time focusing on research. Everyone on the team had at least one concept they were not familiar with. I made sure everyone on the team was on the same page about the three key concepts: Esports, Fantasy Sports, and Cryptocurrency. I also looked at some similar services existing in the market including Cryptokitties, Draft Kings, Football Index, and more.

User Interviews

interview.png

After the meeting with the stakeholder, I was able to access their screener survey results. In the screener survey, they asked if the person has experience in Esports, Fantasy Sports, or Cryptocurrency. However, only a few of them responded to follow-up interviews. We had to do snowball recruiting, meaning to ask the interviewees if there is anyone they know that we can potentially reach for, in order to get enough amount of interviewees.

 

In the end, we interviewed 14 people in total, and because some people are familiar with more than one aspect. We have 11 people talking about Esport, 10 people talking about Fantasy sport, and 9 people talking about cryptocurrency.

affinity.jpg

After interviewing, it was time to synthesize all of them. I put down all of the insights on stickers and tried to find trends. 

Insights from Interviews

icons8-client-management-100.png

Personality

People follow esports players not only based on their performance, but also their personality.

“It's a combination of their skill and the game, and balancing that with their personality, and the actual stream.”

Opportunity

  • Take inspiration from the personality of players and put it into the platform (gamification around badges, tutorial, GG Score)

  • Build a way for users to feel invested long-term in their favorite players

icons8-time-512.png

Duration

The longer a fantasy “season” ran, the more invested players felt.

“The dailys are more of an optimization problem where there are fewer constraints, the constraint is the money and how you spend it...it's a more math-based approach. I think there is more feeling in terms of a regular draft.”

Opportunity

  • Lean into the feeling/personality provided by “Keeper” fantasy sports

  • Reward users for staying invested with players

icons8-news-500.png

Information

Users need information to make decisions.

“I guess more specifically, it can be difficult to track stats for how good a sports player is.”

 

“Without news, you're not making informed decisions. You're just throwing darts at the wall.”

Opportunity

  • Provide stats (and their context) to players

  • Provide news to players

Insights from Testing the Existing Prototype

icons8-satellites-480.png

What Worked

Concept (Macro level)

Excited to play

How are shares established, and how many

shares are there?”

icons8-microorganisms-480.png

What Didn’t Work

Details (Micro level)
Challenging to understand
Need context to play

“It looks like an asset exchange, where it's listing different things you could potentially buy at their price, and the change in

real time.”

User Interviews
Step 4: Responsive Webs

Because Matt, and other target users, go to live events and they need access to the platform anywhere, anytime, we also designed for mobile and tablet for accessibilities.

Marketplace

Player Detail Page

Dashboard

ipad market.png

Marketplace

ipad pdp.png

Player Detail Page

ipad dash.png

Dashboard

Step 2: Defining the Problem

To have a better idea of our targeted users, I formed a fictional user called "Matt" who has all the personalities, goals and frustrations of our users.

Let's meet Matt!

persona matt 8-13.png

Matt is new to PlayerShare and he wants to play.

How might we introduce Matt to PlayerShare and provide him the content he needs to get started and stay engaged?

Defining the Problem
Step 3: Design Studio & User Testing

The journey map can let me understand Matt's requirements and potential issues when visiting the site, and gives us a starting point to design.

Journey Map Style.jpg
design studio.png

In order to achieve the four goals, I started with the key screens. I ran a design studio where each of the team members sketches the key screen first and then discussed and received feedback from either other. In the end, we picked what we liked and changed what needed improvement and worked towards one solution.

iterate.png

I have created three prototypes, tested 11 users total and iterated two times to make sure that the design is intuitive and easy to use.

Here are some key screens, along with the findings and iterations:

1. To create an account

Prototype 1

create1.png
  • Didn’t understand why integrations were required

  • Didn’t understand what integrations did

“What’s a Civic Account?”

 

“This uses cryptocurrency?”

Prototype 2

create2.png
  • Better, but some still needed more context about integrations

“I am confused because it asked me for the identity without showing enough or gaining my trust.”

Prototype 3 (Final)

create3.png
  • Now has clearer explanations of:

    • What integrations are

    • How integrations work

    • Why they should be trusted

2. Understand the dashboard

Prototype 1

dash1.png
  • Users easily understood the layout

  • Had questions about content/game mechanics

  • Loved the concept of Dividends

“It’s like you’re winning free money. It feels more like a game…I’m much more willing to play this because of the extra money and I don’t have to care so much about the stock market aspect.”

Prototype 2

dash3.png
  • Once explained, liked GG Score

  • Wanted more info on Activity (Names too long, info too brief, expected detailed transactions)

  • Connect Achievements to GG Score

“Achievements do not have to be at the same level as shares/bonuses.”

Prototype 3 (Final)

dash2.png
  • Provided more spaces and opportunities for activities, lived at the same level as Shares / Bonus

  • Group achievement with GG sore since they are related concepts

  • Sort for graph easier to use

3. Understand the marketplace

Prototype 1

market1.png
  • The market was overwhelming

  • Wanted more organized info

  • Wanted definitions of metrics

“This is very overwhelming. There is a lot of information and I don’t understand the terms.”

Prototype 2

market2.png
  • Instantly understood market was full of players

  • Still questions about some terms

“How do things fluctuate? Everyone knows in a stock market set to buy low and sell high, but I don’t know how something gains value here. There is no context."

Prototype 3 (Final)

market3.png
  • Use the top banner to promote events like tournaments 

  • Needs hover-overs for terms (Supply, GG Value, Rank)

4. Place an order

Prototype 1

order1.png
  • Order concept confusing to some

  • Everything was too crowded (especially for mobile)

  • Trade from Dashboard confusing

“I want to sell the same way as I buy it.”

Prototype 2

3.png
  • Drill down more on info (graphs for all financial and game stats)

  • Add more information (coach, volume, team info)

“Having as much information for what you’re buying and selling is important.”

Prototype 3 (Final)

order3.png
  • Breathing room for all info and for placing orders

  • All the info users requested is accessible, when wanted

User Flow Map

We also mapped out the screens users visit during the flows that can help us build the full prototype.

User Flow_ combo.png
Design Studio
Iterations
Dashboard
Marketplace
Place an order
create an account
Responsive Webs
Step 5: Final Thoughts

It was the first project I worked with real clients, they put money, time and love into their project and I am making designs and renovations. It happened when we have to deliver things they didn't expect. We sometimes have to convince them that their ways were wrong, and our design is the better solution.

 

Besides that, the complicated concepts involving in this project are also a big challenge. However, at the end of the project, I can deliver intuitive messages and make users constantly going back!

Final Thoughts
title image placeholder3.png

Samsung One UI 3

One step further on what users love

Plantr

Grow while your plants are growing! The app that manages your plants at home

bottom of page