Case Study
Moonllight
We combined data from four international soccer leagues into one fantasy sports experience.
Premise
After suffering through quality, communication, and timeline issues with their first development partner, the team at Moonllight Manager brought Envy Labs in as an early sub. They sought to create their unique take on fantasy soccer: the freedom to combine multiple European leagues, and introduce draft options.
As huge supporters of the beautiful game ourselves, we jumped at the chance to pair live data from the sport with friendly competition. The start of the (real-life) season loomed large, requiring a partnership that carefully balanced features, budget, and speed.
Discover
- Wireframes
- UX Design
Design
- Branding
- Design System
- UI Design
Develop
- Elixir + Phoenix
- GraphQL
- React
Goals
Friendly Competition
Player analysis, slick animations, intuitive flows… all goals paled in comparison to the pinnacle of fantasy sports: bragging rights over your friends.
Configurable Leagues
Fantasy soccer isn’t new, but Moonllight’s founders weren’t happy with the configuration options existing platforms brought to the table. At launch, they hoped to offer choices like draft and classic alongside players from a selectable number of real-life leagues.
Subscription Base
Thinking sustainability from the outset, first phase features would need to include subscriptions, trials, and referrals.
Discover
Man Management
Sketches, re-sketches, and wireframes ruled the discovery process as we worked to define an experience that combined lineups, stats, and more tables than you could shake a corner flag at.
Achievable Scope
With a hard start-of season deadline on one side and endless ideas on the other, we worked closely with the Moonllight team to keep a manageable wishlist.
Scoring Tune Ups
Choosing point values for player actions is no small feat. Early in the process, we added a simplified player selection tool, allowing the client to check their numbers against performances in the previous season.
Design
Branding
With the double-L nod to eleven players on a team, we paired Moonllight’s name with a matching wordmark and color options.
Design System
Removing most of the design-to-development handoff seams, our interface approach favored a system of reusable component states. Consequently, the front-end team was able to start in Storybook and close the loop.
Deluge of Data
Lineups and player analyses received the bulk of visualization attention, keeping the experience both usable and useful.
Develop
All Devices Welcome
The shifting nature of soccer lineups — and midweek games — meant that users needed access to their team from any device. Taking it further, even complex interfaces like live drafts scaled seamlessly to the device on (or in) hand.
Here and Now
Competition waits for no one stats crunching. As real-world games played out, numbers across the application updated in tandem.
Stripe Subscriptions
Making use of Stripe’s subscription functionality, the fledgling business had customers from launch. Free trials and referral bonuses helped in encouraging new users.
Results
Opening Day
As Liverpool and Norwich City kicked off to start the Premier League season, competition across Moonllight leagues began as well.
“[Envy Labs is] a team of very talented developers, designers, and project managers and it was a great experience working with them.”
Stefan Woort-Menker
