In the beginning of 2016 Chartbeat's design director laid out a plan to unify the UX of our product suite. At the time the leadership of the company had released a plan that outlined a new sales structure that grouped offerings into tiers. One of the major challenges for both of these was cross-product navigation. Products were vastly inconsistent visually and there were multiple navigation structures. From a brand and design standpoint this was a sore spot. From a sales perspective, this disjointedness represented a missed opportunity to facilitate upsells from the basic offering to a more premium group of products. Over the course of several weeks I worked closely with the design director to put together a proposal for a new unified navigation system.
The first step was to establish a baseline and make our case to the executive team. To do so I performed an audit of the existing navigation structures, and pulled inspiration from other companies with tiered product systems for guidance on how we might indicate upsell opportunities to users.
One of our major considerations was incremental implementation, so we decided on a navigation system that could be broken up into smaller pieces. After defining all the necessary elements — global versus product specific, primary versus secondary in the hierarchy — I explored different modular structures and visual treatments.
The resulting proposed design was anchored by a colored header, the color of which could expand into a sub-brand for the particular product. Within the header would be displayed a logo lock-up with the user's current tier, as well as the title of the currently viewed product and subsection if applicable. Each product would have 3 global secondary functions: switching between products, switching between domains, and accessing global settings. The list of products to switch between would contain products not yet purchased, labeled as 'premium,' and allow the user to navigate to pages containing more information.
Each product had different levels of filtering available, some not at all, and some could be filtered by multiple facets. To accommodate this variation filters (by tag, section, date range, etc.) would be contained in a bar beneath the global header in products where they were available. An additional navigational piece that varied between products was internal navigation. Some products contained multiple internal pages, while others were a single dashboard. In cases where it was needed, an internal navigation menu would be displayed on the same z–index as the product content itself.