Zuora Microsite Navigation

Freedom to showcase relevant information across zuora.com

9 min readAug 6, 2017

Beginning / Problem Statement

Acquiring a company, launching 7 annual Subscribed events, 5 products, an App Marketplace, Developer Center & API Reference, Community, Training Platform, it was no doubt that our corporate website site & it’s subsidary sites have become compartmentalized causing the navigation across Zuora to become fragmented. With all these sites, we were noticing users were getting pigeon-holed into sections of the site with no viable option to make their way from one section of zuora.com to another.

Microsite Mission Statement from Tien Tzuo

Allow the business the flexibility to create relevant navigation and content that pertains to the users they’re targeting.

Blast From the Past

Our first run-in with having a unified navigation system across Zuora came up when we launched Zuora’s Community back in Q4 2015. We had placed Zuora’s global navigation across the top, and tested it with users and they immediately were confused why Community users were given options like “Vision” and “Resources” & “About” that placed them back on the marketing website. Questions like “Where are the Community boards?” “Where’s links to the Knowledge Center?” came up more than “How do I get back to zuora.com”

Another big issue was that Zuora has a login button on the marketing website that allows our users to login to our product. While testing the global navigation on the Community, users were constantly hitting the login button up top thinking they were logging into the Community. Without an SSO solution in place this became a rather big issue, so instead of trying to solve SSO to have a global navigation system on the Community it was easier to provide only relative links to the Community, with their own login button so users weren’t confused when they attempted to login to the system.

Users weren’t provided a way back to zuora.com and that seemed to be OK with the business. But from a UX standpoint we knew we would have to solve this in the future.

Project Getting Back Home

3 words came to mind when beginning this project, Priority, Relative, & Flexibility. I knew that if I could solve for these 3 words, then the project could lead us to a promising solution.

sidenote** all content between the navigation system & footer is for presentational purposes. There are other sprints currently in place that are tracking the creation of our product + revpro microsites, & subscribed microsites.

1. Priority

Priority : Global vs Contextual

Prioritizing content for the user to decide what to look for helps them view relative content quicker across the section they’re interested in reading more about.

We ran through multiple iterations to help solve for priority. We started with two ratios 1:1 to 1:1 and 1:3 : 2:3.

1:1 to 1:1

We investigated this ratio first to help debunk if our eyes would be drawn more to color rather than size. Having the contextual navigation added below the global navigation didn’t showcase what we were telling the user to prioritize. Too many links were available and as users read left to right it would be too long until they got to the contextual links to dig into the section they were reading.

Iteration : 1 — Size was 1:1 for both contextual nav + global nav. Links from both were available. It became really cluttered and as English speaking users speak left to right , they would prioritize the global nav first, which isn’t the point.

1:3 to 2:3

Once we figured out that prioritization for this use case was more driven by size, we took into account that users could go from one section to the other which may or may not have a contextual navigation. I wanted to ensure that when a user goes from zuora.com’s homepage to a product microsite or our Subscribed microsite that the navigation doesn’t gain / lose height at all to help keep a consistent height across the site. This would help users / designers / developers in understanding the real estate the navigation takes up across the site.

The ranges we tested for navigation height started at 100px and moved up to 2oopx.

After mocking up a 1:3 ratio with 100px being the max height, I quickly noticed that our poor Zuora logo was getting crushed and wasn’t getting the respect it deserved.

We have the right ratio, but the height was a bit off.

We landed on 135 px for the navigation height to allow for enough breathing room for our stand alone global navigation, but allowing enough room and priority for the contextual navigation when it is present.

Reveal : Current Navigation + New Navigation

Current global navigation system in production.

Enhancements : 1:3–2:3 ratio is feeling good, parent page navigation is simplified by removing Language selector, phone number and providing users with 1 contextual cta to click on while placing global CTA and links under hamburger nav.

Showcasing : Breadcrumbs

Option 1.1 : Call out Main Menu

As we de-prioritize our parent nav it might be wise to use a CTA and insinuate that the 3 horizontal lines are a button, as some users may not instinctually know that the icon is for navigational purposes.

Option #2 for Marketing specific Micro-sites ( Product-line use-case )

Since Product Pages are heavily influenced towards prospects, adding an option to provide onLoad the global navigation so that the user can quickly jump to Resources, About, Customers, etc… if they need to, allows the user to quickly gain access to those links. When the user scrolls down the page the contextual navigation reveals itself for users to use as they begin to invest time in the section. This also showcases the breadcrumbs for users to access to go back up the sitemap tree.

2. Relative

Relative : Global Header

We needed to reinvestigate what links were considered global and wanted to test if users gravitate towards the word support rather than having community on the parent nav. Our nav in production currently has Community in the parent nav and doesn’t allow us to put much under it in a dropdown because none of our other support links are technically communities and are forced to live under resources at this point in time. Since the word support has a broader connotation our Knowledge Center, Developer Center, Support Center, & Training could be placed under the Support umbrella.

Relative : Contextual Header

Relative links and CTA’s are placed at the forefront, allowing users to quickly view and get to places relative to that section of the site.

Relative : Breadcrumbs

After the user shows interest in that section of the site by scrolling down the page the global navigation is removed and breadcrumbs show up to help the user understand where they are in context of the entire site. Immediately when the user scrolls up the page the global navigation appears to allow the user to either head to the zuora.com homepage, choose a global link or head to other sections of the microsite.

Relative : Contextual Footer

Once the user gets to the bottom of the site we wanted to provide the ability to get to complimentary sections of the website that may not have a place on the contextual header navigation. For example if the user is on the Developer Center, the contextual microsite footer could include links to the Knowledge Center, and Community. To simplify the navigation we removed the global navigation footer and replaced it with just what is required for the site. A sitemap, privacy statement, terms and conditions, & copyright.

Relative : Header Promotion

Promotions now have the option to be relative to the microsite. If zuora.com is promoting the Gartner Report, the product pages could promote a new feature that may be coming out for that product line. The options are limitless.

Flexibility

Flexibility : Link & CTA Freedom

The business will have the ability to place parent and child links in their navigation. A contextual CTA can be placed in the navigation to help drive conversions for that specific microsite.

Flexibility : Color Themes

The design & content team will now have the ability to have a navigation system that looks and feels like it belongs to the section they are representing.

Flexibility : Promotional Banner

The microsite’s have various options to choose when they are thinking about the promotional banner at the top of their microsite. They have the option to show global promotion that shows up on the homepage of zuora.com. If that option doesn’t speak to the microsite they can choose a global promotion that will span to that entire microsite. And if that wasn’t flexible enough you can provide a promotion for every page under that microsite. Go nuts!

Mobile Specific Use Cases

Contextual Dropdown Navigation

All items fall under the contextual site name. The parent navigation item opens allowing user to click the child and grand-child links.

Contextual Footer Navigation

Just like the header navigation, the contextual footer allows users to dive into each parent link if they have child links, the user can click the area to dive into each respective section.

Breadcrumbs

Breadcrumbs show up on scroll just like on desktop. They are placed above the contextual nav, not to interfere with users as they use the contextual nav to get to dropdown items.

Global Header : Navigation

Global Header hides on scroll allowing the same real estate for breadcrumbs instead. When the user wants to access the global nav they simply click on the hamburger nav on the left and it slides out allowing the user to choose nav items and sub items to get to the location they are looking for.

Contextual CTA

The CTA on mobile is sticky and follows you throughout your journey on zuora.com. Even when you open the navigation it is placed above everything for easy access. For demo see (global header : navigation )

Global Header : Search & Login

To help prioritize search on zuora.com on mobile, we have moved the login button to inside the global navigation. Product acknowledged that since most of our product isn’t mobile ready that we could de-prioritize login on mobile to allow users to search easier on zuora.com.