01/18
NBA Pick n’ Roll
Boom Sports wanted to continue the success of its world-class gaming products for the biggest brands in sports and casino gaming. The next project would be a professional basketball fantasy sports game for the new NBA season and playoffs. I joined the team to help conceptualized the overall visual direction, art directed all supporting assets, designed the branding, native app UI, and UX in collaboration with the Product team.
I developed a dynamic design system that was inspired by the basketball game, the teams uniform and the swagger of the players. As the user swipes from screen to screen, you need to predict the outcome of the game by answering the header questions. The branding and UI carry on the feel for the NBA brand. This dynamic design made the app easy to use for the player never detracted from the information, while being clean to make playing fun and simple.
Role: Brand Design, UI/UX Design and Visual Design
Clients: Boom Sports, NBC Sports and Points Bet
Wireframing
The concept for the NBA Pick n’ Roll was to maintain the style and look of their previous fantasy sports games: Premier League Pick ‘em and NFL Sunday Night Seven.
I started working on Adobe Illustrator to make the wireframes has similar to the licensed games with a header card that includes a question about the game and the buttons for the predictions. You have to predict correctly to win the complete jackpot. This would be the first round of concepts to be approved by the Project Manager.
The following images will show the wireframing process to be presented in a PowerPoint presentation to be showed to NBC Sports for feedback and critique.
Lobby screens and wireframe
First set of wireframes: Lobby Screen (L), Most Points by teams (C) and Most Points by player (R)
Second set of wireframes: Kevin Durant Total Points (L), Golden States 3-Pointers (C), Total Points Match-Up (R)
Third set of wireframes: Portland Trailblazers Points & Rebounds (Teams)
Fourth set of wireframes: Brooklyn Nets vs. Miami Heat (Match-ups example)
UI Design in Figma
For UI/UX Design projects I am starting to gravitate using Figma because of the ease and user friendly interface all at your display. Figma feels pretty straight-forward. The features, shortcuts, and user experience feels pretty similar to Sketch. Overall the UI and design tools seem copied from Sketch. It not only works for the production stage but also allows you to comment and collaborate inside your Figma projects.
NBC Sports came with different assets to create the design system for the game. The basic idea is to maintain the style of the previous licensed games. For the NBA Pick n’ Roll the design system was inspired on the team jerseys and uniforms. For the cards and components I overlay with the team colors the basketball jersey swatches as backgrounds.
Tools: Figma, Adobe XD
Full screen view of the UI design project inside Figma
The Visual Design for Round 2
Working with Boom Sports was a great experience, as their recent fantasy sports game offers dynamic color, typography and pattern options. The challenge came in applying it to the app, where I worked with the development team to figure out the best way to implement the user interface seen in their design system for iOS. The result is a exciting gaming experience for each NBA game night that highlights important match-ups, statistics and featured pro players.