Optimizely “One”

Unify an Enterprise Product Suite

Design Lead Product Design User Experience

  1. The Challenge
  2. The Strategy
  3. The Process
  4. The Results

Following the acquisition of Optimizely, along with a handful of other companies, the resulting product suite had divergent strategies and a disconnected experience for customers and partners. Each product had it's own login URL, username, and password and not only created a headache for users, but was a huge friction point for cross-sell and upsell efforts.

Each product had it's own set of challenges, from lack of APIs and consistent user experience to supporting different SSO needs (or not at all). Visual hierarchy, navigation systems and menus varied widely, making any existing approach impossible.

As part of the larger initiative "One Optimizely", customers needed to see progress towards a unified vision for a combination of products that had no integration whatsoever. The primary objectives were:

  • Enable all customers to have a single point to access any product, a unified login and user experience when accessing and switching between products, including supporting SSO use cases
  • Lay the foundation for future integrations with a new platform supporting common APIs and functionality across the suite.
  • Identify opportunities for product-led growth and cross-sell/upsell.

Therefore, each product would need to incorporate integrations with this new platform as well as changes to how products navigate using a common design language and nomenclature.

The company was in the process of rebranding initiative, which meant all 16 products in the suite had to be rebranded as well and launch day-and-date with the marketing release. Not only was it necessary to make some improvements to bring products more on brand, we took the opportunity to make some lightweight consistency improvements and lay the foundation for a means to switch between products.

We conducted a cross-functional design sprint to gather initial requirements from every product and explore solutions that might be extended to each. Some products had a concept of switching between instances of the product. Some had a way to manage multiple accounts for a single user and others had only a single account. No two menu systems or visual hierarchies were alike.

By the end of the sprint, we had almost as many new questions as we had answers (including consistent terminology by which to call many of these new concepts). But a common thread emerged in that we needed a scalable approach to a series of hierarchical menus and the optimal location was at to the top of the interface for flexibility. The first version of this new UI paradigm started with a Global Bar and contained the Optimizely logo, the product name, and a place for product specific system features such as help resources (which varied by product). This is what each product implemented as part of the rebranding effort.

Rebranding with a Global Bar.
Exploring consistent terminology across products.

By the time the rebrand launched a few months later, the team was well into explorations for the next phase—a new "product switcher" anchored in the Global Bar that would also serve as a breadcrumb-style hierarchy to clearly display in which account and product in that account the user was currently using.

Product switcher use cases.

For partners and customers requiring multiple accounts (e.g. for geographic or PII reasons), the first menu would enable switching. The second menu enabled switching between the products assigned to that account (including a submenu for products requiring an additional tier for specific instances of a product). When the number of items in any given menu exceeded 10, a filter field appeared at the top to more easily find a specific item.

If a product was already using the Global Bar space for primary navigation, it was relocated and redesigned as a vertical menu in the left sidebar. This created a consistent hierarchy between the products.

Relocate existing top menus.
Collapsible sidebar menu.

To accommodate the need to both have product specific features and common features, the System Menu are on the right side of the Global Bar. The Help and Support resources were unified on a single system and provided homogenized resources. As an interim solution, items like user profiles were accessed here despite them being product specific at launch (later to be unified in the platform along with provisioning and permissions).

System & product-specific menus.

The problem still remained that each product had it's own login URL and page, as well as underlying technology. These were all unified on a single login URL that was easy to remember (login.optimizely.com) and a flow that supported a typical email/username combination, single sign-on, and password reset. Once a user logged in once, they had access to all their product entitlements.

Login flow with and without SSO.

This process took several quarters of cross-functional collaboration from start to finish. We had to ensure each individual product was able to address the gaps needed for the entire product suite to come together.

The new product switcher was rolled out to beta program members first and the feedback was universally positive, primarily how easy it was for customers and partners with multiple accounts to seamlessly switch accounts. The prototype was shown in the keynote of our annual Opticon event.

OptiID – A Redesigned (and Welcomed) Login & User Management experience