Zuora Microsite Navigation

Freedom to showcase relevant information across zuora.com

Image for post
Image for post

Beginning / Problem Statement

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

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.

Image for post
Image for post

Project Getting Back Home

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

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.

Image for post
Image for post
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.

Image for post
Image for post
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

Image for post
Image for post
Current global navigation system in production.
Image for post
Image for post
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

Image for post
Image for post
Image for post
Image for post

Option 1.1 : Call out Main Menu

Image for post
Image for post

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

Image for post
Image for post

2. Relative

Relative : Global Header

Image for post
Image for post

Relative : Contextual Header

Image for post
Image for post

Relative : Breadcrumbs

Image for post
Image for post

Relative : Contextual Footer

Image for post
Image for post

Relative : Header Promotion

Image for post
Image for post

Flexibility

Flexibility : Link & CTA Freedom

Image for post
Image for post

Flexibility : Color Themes

Image for post
Image for post

Flexibility : Promotional Banner

Mobile Specific Use Cases

Contextual Dropdown Navigation

Image for post
Image for post

Contextual Footer Navigation

Image for post
Image for post

Breadcrumbs

Image for post
Image for post

Global Header : Navigation

Image for post
Image for post

Contextual CTA

Global Header : Search & Login

Image for post
Image for post

Promotional Banner

Image for post
Image for post

To fill in any other gaps this document may have left out I have created a complete walk through of the navigation system to view.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store