Connect : Featured Apps

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.

No additional fields are needed to become a promoted app compared to a default app.

Featured Apps V2

We moved away from the consistency of the cards in the default view to kill the monotony.

Featured apps : Partner Centric

Putting the partner’s brand front and center is the main priority of this color palette.

Functionality

As this is a slider, the user will be able to slide via the arrows provided or on touch screens would be able to slide their fingers vertically to showcase other apps in the marketplace.

:onHover the apps on the right would come forward allowing the user to quickly access the app via click.

No separation between featured app and background

I applied a gradient over the left hand side to bring it out from the background a bit. The main asset was getting drowned out by the flood of white, and when we needed to showcase that the app was ‘zuora certified’ it became extremely noticeable how much it was floating in space.

Was discovering whether or not to allow for an overflow of promoted apps on the right to showcase the breadth of cool featured apps Zuora has to offer.

separation from background to allow for items to ‘hook’ around asset

Issues

Main issue with this iteration is that there are distractions between the left side ‘main asset’ and the right hand side due to color contrast.

Another thought was if we removed the high color contrast and brought it back to Zuora’s brand a bit, to help level the playing field and keep the world feeling a bit more consistent.

Monochromatic color scheme that brings down the contrast and puts more focus on the primary app

onHover the apps will come forward for easy access to the app without having to scroll it up to the primary position to gain access to the view app button.

Playing with different shades of the navy to help discover how contrast would work between the main app and the secondary apps.

Issues

After witnessing the :onHover state, it came to me that the left and right should be related. As it is now, it felt distracting to hover over the right hand side and have it ‘pop’ out and bring so much more attention to the right side of the screen that it became apparent that on every scroll the left and right hand side should be related to each other.

V3: Bringing the 2 sides together

Partner Focused

Having the two sides work in tandem started to make sense. Bringing out the icon brought great attention to the app, and having the brand colors on the left tied the 2 sides together well.

Partner focused Featured App section

Zuora Focused

If for the initial launch we come to realize we don’t have a lot of apps from our partners we can focus the color treatment to be more Zuora centric until more partners join our community.

Zuora focused Featured App Section

Ahh what about mobile?

The slider works great on mobile. Users will be able to scroll from left-to-right quickly and see the details of each app before committing to the click.

How does it look on the marketplace?

Glad you asked.

More information about how the featured apps live with the default chic-lets on the Marketplace can be found here.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.