Loading...

Balls With Friends

"Build up a team and bring your friends down in our newest Basketball simulator, Balls Against Friends!"

PROJECT OVERVIEW

(Balls) Hoops Against Friends features classic arcade-style basketball gameplay and tests your ball skills against the clock and your opponents. As our newest Instant Games experience, you can chat, challenge, compete, and maybe even engage in some friendly trash talk, seamlessly with Facebook friends on Messenger and News Feed.

Our Goals

• Shooting from various locations
• Multiple tries at each location
• Cheering crowd in the background
• Can have multiple balls going at once
• Strong aural feedback

The Team

Creative Direction: Jet Carman | Concept Artist: Malin Falch | UI Design: Emma Li | Engineer: Kenny Anderson | Game Designer: Katherine James |

My Role

In my role as Creative Lead for Zynga's Growth Initiative, I established the new guidelines by creating both our concept and UI/UX pillars thus drafting the graphical direction for our suite of 20 games that launched on several networks including iMessage, Facebook, and other social platforms.

My main responsibilities included creative direction for the various projects, driving the progress of a small 3 person in-house art/design team, as well as an offsite art outsource agency to maintain art pipeline and cadence.

I also delivered the basic core loop UX flow and UI visuals for our suite of games in collaboration with our Product and Design team. I designed rough wires, paper to clickable prototypes, to fully-fleshed high fidelity product.

CONCEPT DESIGN PHASE

We needed to explore different art styles that would fit this genre. The goal was to appeal to the mass public and to a broader audience. The art team created distinctive concepts; from 16-bit to fully rendered 3D style.

Above: Initial concept art; styles explored ranged from 3D to 16-bit art


The art is inspired by cell-shaded games, and the UI is designed to mimic real college basketball scoreboards and shot clocks. This style resonated to a broader set of audience hence checking off our goal to appeal to the general public.

Initially the design of the game called for hands to be displayed with the ball. We found that this was redundant and heavy-handed and ultimately removed it from final concept.

Above: Game Concepts - 'Player hands' in view VS. just the ball


The crowd scene is rendered in a similar fashion but we opted to tone down the realism and knock the scene back drastically to help frame and focus the players to the main action of the game which is on the court. We opted to add a overlay layer to help guide and focus the player on the gameplay as well as highlight the UI HUD.

There are also 3 viewpoints from the players perspective that the game is programmed to rotate from from time to time. 2-pointer center, 2 pointer-45˙, and a 3-pointer from the 3-point line.

Above: Crowd scene examples and the 3 different angles the game is played/viewed from


LOGO DESIGN

Designing the logo for this game was one of my favorite parts of this project. Started off with pouring thru all of the game references our concept artists went thru, then formulated my own set of various pro, minor, and amateur basketball league logos for inspiration.

My main goal was to capture the essence of the sport and to produce a logo mark that had both the energy and the feel we wanted to the game to evoke to the players. It was important to have several visual elements to help convey to players what the game was at first glance without having to decipher or read the actual logo or the games description.

Above: Logo inspiration samples and prelimenary logo exploration sketches


From here I digitalized several of the sketches that I thought would work. Several iterations were made for each mark. We also ran into some indecisiveness when it came to the actual final title of the game. After several surveys and naming tests, we were able to settle on "Balls With Friends".

Above: Digitalized logo variations for review


Above: Final logo mark


GAME STYLE GUIDE

The development of the game style guide was important for ease of implementation of the game between different disciplines as well as document out all our visual elements.

UI DESIGN

The UI design for this game needed to be sleek and evoke the game of basketball. After various iterations on style and font choices. We opted for a very simple and minimalistic UI design that resonated subtle elements of the sport incorporated in.

The main HUD contains the player score, timer, and previous high score for reference. We kept the FTUE really simple for this game by virtually not having one. The game starts out with a 3 second countdown with lights flashing. The only elements present for the player is the basketball in the center bottom of the screen and subsequent available balls to the left. Visual affordances of the the timer signals to the player that it is a timed session. If player does not interact within the first 3 seconds of gameplay, we designed a simple arrow swiping up to clarify required player interaction.

Above: Active gameplay view. View of main UI HUD


Apart from good ball/net physics, designing the responsive feedback as players progressed thru a game session was an integral part of the UX. We needed this to both look and feel good to the player. Giving players a sense of accomplishment and achievement was key to draw the complusion of coming back to play and ultimately the need to share the entertainment with friends.

There are 3 categories of attaining bonuses and/or multipliers. There is the standard 2 and 3 point system. Successful concurrent baskets allow for players to gain a 2x On-Fire, 5x Golden, or 10x Magical multipliers to garner higher scores.

Above: Bonus moments and multipliers


Above: Active gameplay of bonus moments and multipliers


Creating the social engagement for this game heavily relied on building and generating a healthy competition among friends in the players social network. Since this game was launched on the Facebook Messenging platform, we had the advantage to make those connections happen. We leveraged Facebook's social network to allow players to share their experiences via chat and social share posts. We also designed an robust internal leaderboard that allowed players to keep track of their highest scores on a more granular level so they can compare their weekly progress against either friends in their network or globally across all our players.

Players were also allowed to create teams that enabled them to invite other players to join.

Above: End of game session screens


Above: Team leaderboard screens


Above: Join team screens


SOUND DESIGN

Sounds mimic real basketball SFX and include various crowd sounds to emulate a real basketball game and provide feedback based on the player’s performance.

Client: Zynga