In 2013, Boingo's online presence was fragmented into various websites which represented different services, all of which lacked continuity with a single brand vision. This fragmentation was exacerbated by the fact that these websites were not mobile friendly; instead, separate mobile-only sites were served to mobile users.
To answer the challenge, we designed a flexible identity system that was customized to fit the needs of Boingo while ensuring it was scaleable and easy to maintain by both the design & development teams. This system was then utilized across Boingo’s online presence starting with customer’s first point of entry, the airport walled-garden, and eventually expanded to their primary domain.
I worked as both designer & front-end developer on the Boingo rebrand, working with a small team of talented designers at Motive. I was integral to the design process throughout the project and lead the development of all prototypes and supporting assets, which were then handed over to the internal Boingo development team.
We carefully selected typefaces which provided the technical versatility we needed but also supporting the brand’s personality.
Versatile Iconography System
A custom iconography system was designed specifically to help aid in visual efficiency for every use case and location.
For many travelers, the Boingo “Walled-Garden” is the first touchpoint they will have with the brand. This page is shown to users whom are accessing airport wi-fi and can change for each location. We created a design system for this page which would allow airport branding to live along with Boingo branding, while being able to accommodate a variety of content.
The next touchpoint for Boingo users is the Sales Page, which provides information about the various plans available and access to supplementary airport/location information and content.
We designed and developed a live interface toolkit to ensure branding and design elements remained consistent between all teams during the rebranding process.
An object-oriented approach was adopted for the interface toolkit to ensure that CSS was efficient, predictable and easily maintainable. The ability to toggle HTML/CSS information regarding the various standardized components was baked into the toolkit to help the development team.