Ballhawk

Branding, front-end, web design

Ballhawk is a Fantasy Football mock draft simulator with customizable A.I., player data analysis, and post-draft team grading. The company was founded in 2016 and I collaborated with the Ballhawk team to create a logo, brand colors, iconography, illustration, and develop a landing page. The team wanted to create a visual system that would be flexible enough to use for the UI of the product as well as marketing materials that would appeal to their target audience — tech-savvy fantasy football enthusiasts.

Branding Ballhawk

Logo

Creating the mark

When I joined the project, Ballhawk's company name was already selected. The company's founder wanted the logo to visually reference football, as the company's name itself was not explicitly related to the sport. We chose the typeface Jockey One Regular because of it's resemblance to letters on a football jersey. After many iterations, the mark was chosen because of it's clear depiction of a football. Upon further inspection however, the form can represent an eye shape using the X as a pupil. The X represents the X's and O's drawn in football strategy, communicating the strategic nature of the app.

Color and typographic brand guidelines

The brand 'in-the-wild'

Ballhawk's brand identity

I compiled a simple brand guide for the Ballhawk team to reference when continuing to develop their UI or when making marketing materials. It outlined logo usage, the official color palette, and typography hierarchy. The typeface Teko was chosen for headlines because of its bold, condensed form that mimicked football jersey typeface but also offered clear legibility. Inconsolata is a mono typeface that resembles source code, evoking the automated and A.I. capabilities of the product.

    The goals of the color system were to:

  • Stand out from the competitive landscape

  • Communicate modernity and automation

  • Create a limited but flexible set of colors

Charcoal was chosen as the primary color with orange as the primary accent and an electric blue as a tertiary accent color. The charcoal is used as a neutral, but is tinted with undertones of a steel blue to give it distinction. Orange and blue are complementary colors and when used sparingly in combination they appear brighter and more vibrant. They are commonly used colors for football teams which tend to favor bright primary or secondary colors on the color wheel. In addition, the colors work well on light or dark backgrounds, making them compatible for UI within the app.

Ballhawk upsell illustration

Ballhawk uses a freemium model, offering basic functionality for free and monetizing by offering premium features for users willing to pay a monthly fee. The upsell screen is trigged when users voluntarily elect to upgrade by clicking a call to action button, or when users try to use a feature that is only offered to premium members. Because Ballhawk is asking users to become paying subscribers, we felt we needed an illustration to signal the significance of this page, offering the user a moment of surprise and delight.

I selected an illustration style that used geometric shapes and hard angles. We wanted the illustration to be representational of football, legible at a glance, and utilizing the brand colors.

Design and development

Landing page inspiration

Ballhawk landing page

See it live

I built Ballhawk's landing page for their product launch. We consistently used to the brand colors and typography, utilizing the photograph of a football player in the background for context. We we're inspired by the boldness and masculinity of brands such as Nike and the U.S. Air Force.

I featured a video of the drafting flow in the app to communicate clearly the value and simplicity of the feature.