Nov 10, 2016
Connect UI Chick-lets
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.
V2: More headline / Less description
No changes in any UI. Allows for more flexibility for headline.
Pros
Get more headline ( less than 46 characters )
Cons
Shorter Description ( less than 59 characters). Still feels a bit crammed and busy with the amount of information needed to be considered successful.
V3: Move to wider column layout ( 3 per row)
With the wider column we can add more emphasis on the headline. I made the headlines all uppercase to draw attention to the title. And brought the category to the top of the chick-let.
Pros
Wider width allows for more content all around. headlines move up to 50 characters, and descriptions are 86 characters.
Cons
A lot of emphasis on the Zuora certified. Had to change the icon width to allow for headline to work.
V4: Better Balanced Design: Smooth Transitions
After a couple iterations it started coming together. We now have some balance across the card and are starting to understand where the users eye will be going. Icon was brought back to full size. and the only thing to move out of the frame is the icon, the description simply arises from the bottom with no other information on the card moving a cm. Headline accepts anything less than 50 characters. and the description can afford anything less than 86 characters.
Headline Characters allowed : 50 Characters
Descriptions Characters allowed : 86 Characters
Feel free to pass on your thoughts and we can incorporate them into the design.
V5 : Full width Description / Explanation for Content Display
Headline restriction (50 characters / 9 words)
Copy Restriction ( 113 characters / 19 words)
Yesterday Jason and I were talking about the partner logos and how they would affect both the default states and hover states and how the layout currently supported more of a horizontal logo over a vertical logo so we went pretty conservative about allowing content into the right panel of the card.
This morning I worked up the padding / wireframes to help understand what a vertical logo scenario would look like.
Headline restriction is based off of the default state, even though you could fit a few more characters on hover, it wouldn’t make sense to make a different API call for to different character length for up to 5 more characters. The gif below shows the how each area affects each other and the spacing needed between each element to work together to make the card work.
Removing Category from on:hover state
There was talk about removing the category on:hover. I would like to keep the experience of the cards unison between views to keep the card as unison as possible between the states. I wanted to showcase the amount of space the category took on the hover state. Right now the padding under the category is 3px and the x-height of the font is 5px (font-size is 9px) that amounts to 8px’s of space. In order to bring another line of copy we would need 15px of space, leaving a 7px deficit. If we leave the category in we don’t disrupt the users experience between the hover state and default state and only remove one element (the icon) and introduce another (the copy).
V6 : Add Proxima Nova for Product Cards
As the cards will eventually be part of the product we wanted to ensure we kept the integrity of the cards across both platforms. Product / Core uses proxima nova for both display and body fonts. Below are a side-by-side comparison of both of the fonts in action.
Using Proxima Nova in the product actually gets you a little bit more spacing allowing for the text to wrap up more onto the initial line. For obvious reasons, this is the best case scenario as we don’t have to rethink the character count that will work for both product and marketing purposes.
V7 : Remove Zuora Branding from Cards
As we take the approach to allow our partners the ability to promote their brand on Zuora’s marketplace we need to have Zuora’s brand become transparent to ensure no conflicts arise.
Removing the teal from the Zuora certified icon allows for any type of color to be applied to the icon without having any kind of conflicting clash of colors. We still bring out the certified because it will mostly stand out due to the high contrast between the solid color icon and the dark black background of the certified badge. a subtle drop shadow is applied to separate itself away from the icon and white background if there is no icon, such as onHover of the cards.
The next project is promoting these assets on the homepage. See more here.
