Access anywhere

To prototype
Project Overview

Project Period

Two  and a half Weeks


Desktop & Responsive Web


UX Designer

/ Lead UI Designer

Targeted User

​Esport fans with cryptocurrency experience


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

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

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.

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


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


  • 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


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


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

  • Reward users for staying invested with players


Users need information to make decisions.


  • Provide stats (and their context) to players

  • Provide news to players

Insights from Testing the Existing Prototype

What Worked

Concept (Macro level)

Excited to play

What Didn’t Work

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

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!

Step 3: Design Studio & User Testing

User Journey

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

Let's Help Matt...

Design Studio

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.

User Testing & Iterations

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:

Account Creation
Place an order

Account Creation

Prototype 1

  • Didn’t understand why integrations were required

  • Didn’t understand what integrations did

“What’s a Civic Account?”


“This uses cryptocurrency?”

Prototype 2

  • 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)

  • Now has clearer explanations of:

    • What integrations are

    • How integrations work

    • Why they should be trusted


Prototype 1

  • 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

  • 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)

  • 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


Prototype 1

  • 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

  • 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)

  • Use the top banner to promote events like tournaments 

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

Place an order

Prototype 1

  • 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

  • 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)

  • 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.

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.


Player Detail Page



Player Detail Page


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. How we can deliver intuitive messages and make users constantly going back are the biggest issues. 


These were all new experiences. But I did a great job!


©2019 by Nicole Song. Proudly created with

  • linkedin
  • dribbble