Xfinity Mobile
Brand Illustrations
The design team for Xfinity Mobile reached out to me develop their brand illustration style and create a series of illustration to use across apps, emails, video, etc. The team wanted a unique style that supported their light and airy brand, but one that didn't feel too distant from other Xfinity products.
The unique feature of Xfinity Mobile is the flexibility within it's data plan. Depending on the user's needs, the user can switch back and forth between 'By the Gig' and 'Unlimited' data options. Rather than representing these concepts literally, we chose to go a metaphorical route to give the illustrations a softer, more humanistic feel. Through all the concepts we kept coming back to this idea of air and space, and eventually landed on hot air balloons representing the 'By the Gig' option and a rocket ship for 'Unlimited'. The hot air balloon echoes the relaxed, easy as it goes attitude of the 'By the Gig' option, and the rocket ship breaks through Earth's atmosphere to reach the possibilities the 'Unlimited' option has to offer.
Once those were established, it was time to apply them to the Xfinity Mobile app interface, and create illustrations for other states. In these early stages, in order to keep the illustrations more universal we wanted to include evidence of people's lives rather than showing people. The introduction of character illustrations is something we chose to reserve further down the timeline.
Along with the full bleed illustrations to be used within the app, I created framed options to be used on the Xfinity Mobile website, with items breaking the frame to help add depth to the overall flat aesthetic.
Masking
Moving forward, I began exploring how to apply and utilize the masking elements as tools to help tell stories and create themes.
These allowed us to adopt elements from other illustrations, but completely transform their purpose by applying either the a wifi symbol or LTE bars as a mask.
For the icon set, I kept the illustrations to a unified monochromatic color scheme, primarily for their size multiple icons are used within close proximity of one another.
Style Guide
Once the illustration style was fleshed out enough, it was time to compile all of the documentation and create the style guide. The guide covers color application, gradient usage, building with shapes, lighting effects, masking, perspective, etc.
Once the system was established, I created assets to build out their library. These illustrations include editorial, framed heroes, app heroes, icons, background patterns, headers, and spot illustrations.
