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

Image for post
Image for post

Project Getting Back Home

1. Priority

Priority : Global vs Contextual

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.
Image for post
Image for post
We have the right ratio, but the height was a bit off.

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

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