Design and develop a fantasy sports desktop and mobile web application for Breeder’s Cup. The object of the game is to predict the order of the top 10 horses across the finish line. $1M dollars will be awarded to the player who accurately predicts every pick. Include public and private leagues, leaderboard, celebrity picking, social sharing.
Primary designer and front end developer working with rails development team and project manager. Also worked with 3rd party independent contractor who provided the site’s primary content wrapper.
After gaining an understanding of the scope of the game, I created a mood board by finding common design elements in Breeders’ Cup events. I was never a horse racing fan before this project, so I had lots to learn. My mood board included things like silks (the numbers on the horses), flowers (the purple and yellow flowers given to the winner), differing track logos, jockey jersey colors, and more. The typography and action item elements were already laid out in the primary Breeders’ Cup website. I was able to stay consistent with their gutter padding, vertical rhythm (line height), action items (buttons), typographical hierarchy, etc. to maintain consistency with their existing website.
Design and development cycle was 2 months.
This was my first fantasy gaming up. The idea of designing for different states of a sporting event was a new challenge for me. The “pre race” layout was different than the “live race” layout, and the “live race” was different than “post race.” Each one of those sections were different as well. “Pre-race”, was broken down into “picks not yet opened”, “picks opened” and “picks closed.” Each of these phases would require different ui elements, some actionable, some visible but not actionable, etc. All of these varying layouts took place within the same view. This was a major departure from the marketing oriented websites from my past.
I quickly learned that scoping based on a game state was very similar to responsive design, in theory. Rather than scoping features to a media query, they were scoped to a class. Once I got my head wrapped around that, things were good to go!
3 year project extension after first season.Back to Portfolio