Loading

Insightful web applications

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

DISCOVER

  • Wireframes
  • UX Design

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.

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.

DISCOVER

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.

DESIGN

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.

DEVELOP

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

CO-FOUNDER // MOONLLIGHT
 

SERVICES

Networking Training

We changed the way network administration training is delivered across Cisco’s organization.

Shopping Basket

What can we help you find?

I’m Looking For