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.
Allow the business the flexibility to create relevant navigation and content that pertains to the users they’re targeting.
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” …
Starting with a filter on the left hand side allowed for easy navigation, and allowed the ability to toggle between topics, content type, and other types of categories.
Having it sit inline with the default cards caused the cards to fall to 2 per row.
Creating this for mobile would cause some headaches.
Went with a simpler approach that helps separate the main hero area away from the default cards.
This tool bar allows to filter by the following types : Categories, app type, and sort by featured, views, newest,downloads, and last modified.
We added back in the capability to search**. …
The single app view of connect allows the user to view more details about the app, and learn more about partner details if the app is provided by a third party vendor.
The image carousel keeps it’s look and feel consistent to the homepage and allows the user to hover over the left panel and gain access to toggle through the images that the app has to offer. If the app requires a video to help pitch it’s story, this location will facilitate that need as well. …
The featured apps section of the site lives on the connect marketplace, and serves as a place for users to understand what apps are putting their best foot forward on Zuora. These apps can be both partner and Zuora apps.
on:Hover both the largest app on the left and the secondary apps on the right have a box shadow on:Hover to pull them away from the background and initialize that the area is clickable. No button is needed as the entire card is acting as an active area for the user to click to access the single app.
The largest app showcases both the title and description on load and requires no other animation on:hover. The smaller ‘chic-let’ apps on the right hand side take on the same animation as the default chic-lets, showcasing only the headline onLoad and on:Hover displays the description text. …
I’ve placed the featured items and chic-lets into the bootstrap grid, to see how they work together. A lot of the same layout applies to the sub featured assets in the featured section. No additional fields from the Connect API are needed to construct the featured apps.
The animations for the default chic-let will follow suit for the featured chic-lets as well. There won’t be any additional animations for the main asset as all the allotted content will fit appropriately in the default view.
Here are some samples of cards to help portray the connect marketplace.
This version allows for 4 items in one row. onHover reveals the short description ( less than 90 characters ) from the bottom. Zuora certified treatment is fixed to the bottom right and headline (less than 21 characters ) and category remain on both default and hover state.
Having 4 items in a row allow for more items to see on initial load.
Feels a bit crammed with all the information inside the chick-let. Animations will seem busy as the placement of partner logos and icons will move in separate directions onHover. Card size limits the max amount of both the headline and short description to pretty low numbers, causing for very precise headlines and descriptions. …
Scrolling asset central. The header of the form will scroll through the front covers of the magazines that are available for their Free Subscription Promotion.
The form will hold all the appropriate fields that’s needed for Time to process the request. The code tied to the Magazine title will be stored along with the Magazine title on form submit.
Thank you page will thank the user for signing up, with a single message describing what magazine they signed up for and the ability to go back to the Subscribed Homepage.
The mockup below showcases this use case.
This year we decided to create an agenda that started with tracks (categories) that lead to individual breakout sessions attached to speakers. We decided that designing a mobile-ready, easily digestible agenda would be our top priority.