After designing an all new experience in the Account Management page, I created a UI framework and style guide which was used to redesign the Brandzooka Campaign Builder. The campaign builder is the central piece of the Brandzooka software. Using this builder, users can launch video advertising campaigns on the TV's most popular channels and the web's most trafficked websites.
Since users already loved the functionality and workflows of the existing Brandzooka builder, the primary task in updating the UI was to do a visual overhaul while maintaining the same functionality. In the process, I created new features (such as a new campaign overview panel on the right and sticky navigation on the top) to make the application more usable than ever.
In creating an all new UI style guide, I created an expansive icon set with 100+ icons and counting for use across the Brandzooka site. Available in three colors, the icons were created to be adaptable so users subscribed to Brandzooka's premium membership option can take advantage of their ability to change the application's color scheme.
Along with this visual overhaul for the website came the need for a mascot character to communicate important information to the user in an energetic, emotive, and empathetic (most of the time) way.
During this project, I began creating the Brandzooka Design System that would continue to grow and evolve as I worked on more projects.
Using all the data at our disposal, I was able to identify that very few users attempt to create a campaign on older browsers, like Internet Explorer. Additionally users on mobile often like to browse our marketing site or help pages but rarely attempt to build or launch a campaign. So I created fallback messages for users on those browsers to make sure they switched over to a modern desktop experience.
The most powerful tool of the Campaign Builder is the new Campaign Overview panel on the right side of the page. This provides users with a ton of information in a compact space. As the user makes selections for their campaign, such as targeting their audience by location, device, or demographic, they can see their audience information, budget, and estimated forecast update live in the Overview Panel. Additionally, the overview panel has a checklist of steps required to launch a campaign. So it was incredibly important that the user was able to view as much of this panel as possible, at all times. I created a custom scroll behavior to accomplish that user need. On large screen browsers this entire panel remains fixed, while shorter browsers have as much of the panel viewable as possible.
