Interaction model
We broke down the desktop platform, then sorted out touch mechanics that felt intuitive and did not create difficulty while navigating the mobile app.
Mobile product concept · esports
Fantasy LCS Mobile
Translating an existing product to make it more accessible.
Make the draft work. Make the league mobile.
Experience at a glance
A desktop fantasy league, translated for touch.
The mobile concept focused the existing Fantasy LCS system around its most consequential interaction: drafting a team clearly and confidently from a smaller screen.
Project overview
The idea behind this project was that I acknowledged there was a gap in the market for this app. With the popularity of League of Legends and the growth of eSports, adoption of this product would grow with the increased usage of mobile devices.
What was required was to develop the model enough so that Riot Games could identify that making their Fantasy LCS more accessible would promote visibility and engagement of the product.
Team
3 people: UX/UI designer, interaction designer, UX researcher
Duration
3 weeks, from concept to prototype
Tools
Whiteboard, Photoshop, Illustrator, Excel, Google Forms, Justinmind
Methods
Competitive and comparative analysis, User survey, Persona generation, Product breakdown, Interaction modeling, Wireframes, Usability testing, Visual mock-up
The challenge
What the system needed.
The desktop version of the Fantasy LCS product is complex. Deriving its mechanics from Fantasy Sports models found on Yahoo! and similar sports-statistics websites meant isolating the important aspects for a mobile app while introducing features heightened for a mobile experience rather than desktop.
Tasks
- 01Understand what Fantasy LCS shares with other Fantasy Sports products
- 02Define the minimum viable product that could translate from desktop to mobile
Solution direction
Through user surveys from a demographic that plays fantasy sports, we ascertained the prominent activities and details that were valuable to players. These details allowed us to prioritize and emphasize what is shown and how elements relate within the mobile model.
Our primary target was the Draft Pick. Matchmaking, statistic tracking, and even the chat model were secondary. If the Draft Pick did not work, nothing else would matter.
Research
Going into research, particularly understanding users, we understood two things: Fantasy Sports players were a niche market and eSports was, at that time, a growing market. The cross-section of both would yield very small results, so much of our research leaned on the behaviors of Fantasy Sports players.
The casual player
Fantasy Sports research emphasized an understandable interface, current statistics, and a simple system to navigate.
The hardcore player
The gambler
Design
Chat was underutilized on desktop Fantasy LCS and Fantasy Sports platforms. Related research suggested people enjoyed messaging through mobile platforms, so I began growing the idea of a chat interface within the app and the inclusion of emoticons.
The social aspect of the app was key. The concept also had to preserve the familiar model, avoid a larger cognitive load, and make the core draft interaction work first.
Outcomes & next steps
Within the three weeks of research and design, we had to choose our battles. Sound would help the experience, but the nuanced design and flow of desktop Fantasy LCS meant we did not want to alienate users or add a larger cognitive load.
The product already existed, so the traction was there. The mobile concept made it more accessible while maintaining the same user base across platforms.
- Player–champion record
- More user testing
- Add button per card
- Test the viability of a trash button on the queue
- Review settings-button location and relevance
- Auto-draft
- Re-iteration
- Visual design
- App engineering