Freedom to showcase relevant information across zuora.com
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” …
V1 : Side filter
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.
Issues
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.
V2 : Top Simple Filter
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.
Image viewer
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.
Animation
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. …
V1: Featured assets with Chic-lets
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.
Featured Animations
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.
Things we need to discuss.
- Is there still a soft landing to the marketplace from a higher level Connect Discovery page?
- Is the messaging suffice for the page? …
Here are some samples of cards to help portray the connect marketplace.
V1 : Small Chick-let / 4 per row
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.
Pros
Having 4 items in a row allow for more items to see on initial load.
Cons
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. …
Challenges
- Showcase Magazines to select from
- Allow users to sign up for Time Subscription through an online form
Showcase magazines
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.
Online Form
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.
Follow up
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.
Mock-up
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.
Challenges / Obstacles
- Mobile Me Not: To meet the demands of social traffic hitting our sites, we needed to create a track template. The template had to feature breakout sessions that displayed complete activity within that track, maintaining ability to drill down into each session. With most of our promotion coming from social, we needed to have an agenda that was easily accessible from phones and tablets. …
