UX designer & Lead UI designer
Two and a half Weeks
Desktop & Responsive Web
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
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.
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.
“It's a combination of their skill and the game, and balancing that with their personality, and the actual stream.”
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.
“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.”
Lean into the feeling/personality provided by “Keeper” fantasy sports
Reward users for staying invested with players
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.”
Provide stats (and their context) to players
Provide news to players
Insights from Testing the Existing Prototype
Concept (Macro level)
Excited to play
“How are shares established, and how many
shares are there?”
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
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 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!
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?
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.
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.
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:
Understand the dashboard
1. To create an account
Didn’t understand why integrations were required
Didn’t understand what integrations did
“What’s a Civic Account?”
“This uses cryptocurrency?”
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
2. Understand the dashboard
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.”
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
3. Understand the marketplace
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.”
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)
4. Place an order
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.”
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 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!