Bringing dynamic trading to fantasy basketball
Populus
ROLE
Product Designer
Frontend Engineer
SKILLS
UI Design
Branding
Frontend Development
TIMELINE
Jan 2021 - Jan 2024
TL;DR
Populus is a unique take on a fantasy basketball app which is based around a virtual stock market. Users are able to buy and sell "shares" of NBA players using the app's virtual currency, creating their own portfolio (team) of their favorite players. The app also offers various social features like leagues, leaderboards, and user-to-user chats.
I worked on this project as the sole designer and contributed to frontend development alongside a team of around 10 engineers. As the designer, I created initial low-fidelity wireframes to be used in a proof-of-concept, then introduced a design and branding system to create mockups that were handed off to the engineers. On the development side, I implemented numerous frontend components and developed custom APIs to retrieve user and player data.
The app was released on the iOS App Store in early 2023, reaching a peak of 650 active users and 2000 total users.
CORE CONCEPT & EARLY DESIGN
The idea for Populus arose from identifying two key opportunities in the market:
For basketball enthusiasts
Traditional fantasy basketball often required season-long commitments and offered limited engagement between draft day and playoffs.
We could provide an alternative where users could actively participate daily through player trading, creating a more engaging and flexible experience.
For financial literacy development
Many young people are intimidated by stock market investing or lack the capital to meaningfully participate.
We could create an accessible onramp to understanding market mechanics using NBA players as "companies" - allowing users to learn basic concepts without real financial risk.
We wanted to position ourselves at the intersection of these two needs and deliver a gamified experience that combined aspects of fantasy sports with stock market mechanics in an accessible and social platform.
The design of the app was guided by the following principles:
Accessibility with depth — The user interface needed to be easily understood by casual basketball fans while still offering enough depth and statistical detail to satisfy more hardcore fans
Real-time dynamism — We planned on developing a model where prices would change based on real player performance as well as user demand, so the design needed to clearly communicate market movement in real time.
Social engagement — From currently established fantasy sports apps, we recognized that competitive and social features drove user retention, so features that created community and friendly competition were prioritized.
Visual clarity for complex data — Since player prices would change based on real world performance, we needed a way to display the numerous statistics to users in a digestible format.
The initial wireframes were designed with these principles in mind, and focused on three core features: portfolio management dashboard, player profile and trading, and a simple leaderboard.
As the development of the platform progressed, the feature set was expanded to include leagues, more advanced analytics, and player-to-player chats.
VISUAL IDENTITY
Below is the style tile used to establish a visual identity throughout the app. The logo captures the dual essence of basketball and financial markets, while also symbolizing growth and competition. I chose a monochromatic color palette given the complex components and information that would need to be displayed on each screen. Using darker and similar colors contrasted nicely against the text and reduced visual clutter so the user could focus on the information being displayed. In a similar vein, a simple, sans-serif, and modern font was chosen to match the overall theme of the app and make everything easier to digest for the user.
KEY COMPONENTS & SCREENS
This section showcases the high-fidelity components and screens that make up the core experience of Populus. Each element was designed to balance dense and complex information with clean visuals, enabling the user to quickly interpret market data and make decisions without unnecessary friction.
PORTFOLIO DASHBOARD
The home screen shows an overview of the user's portfolio/team, including recent performance, players, watchlists, and pending orders. Designs for charts and player cards were kept minimal to place more emphasis on key information like real-time price and performance.
PLAYER PROFILES
Individual player profiles needed to present a lot of information in an easily readable format, so cards were used to separate elements and create a visual hierarchy. The trade button introduced darkens the screen to highlight the three types of trades (short, buy, sell) to the user.
SOCIAL FEATURES
Social features like leaderboards, leagues, and chats were designed to foster community engagement while not taking away from the core trading experience. These features also add a competitive aspect to the app that aligns with the traditional fantasy sports experience. The scout feature provided an easy way to view popular players, top gainers/losers, and recent news across the NBA landscape.
USER PROFILES
User profile pages provided an overview of the user's team, portfolio, and affiliated leagues. The trophy case was another small feature added to drive engagement and boost competition.
IMPLEMENTATION
Populus was built on a tech stack designed to handle real-time changes in market data and frequent user engagement. The trading engine was custom-made using C++, managing everything from market movements to processing user orders. We used MongoDB to store all user and player data since its document-based structure allowed the flexibility to handle all the various information about each user/player (portfolio, friends, leagues, filled orders, etc.). The frontend was built using React Native which enabled us to develop for both iOS and Android, and the backend was build using Node.js to handle user requests, trades, and accessing player information.
As both a designer and a frontend developer, I was able to bridge the gap between visual design and actual implementation, making handoffs easier and allowing for faster iteration. Some key challenges I faced were organizing components, managing user state, and optimizing calls to the database for user or player information,