Object cards

Overview

This project was aimed at shoring up some long-standing technical + experience debt related to our object cards. The goal was to consolidate all of the various card types and capabilities in our product to one component both in Figma and the codebase. By taking care of this technical debt, it allowed us the freedom to innovate on the cards in the future.

Role

Lead Product Designer

Research (collaborator)

output

Solution mocks

Element migration specs

Breakpoint breakdown

Grid breakdown

Problem

Overcoming Technical Debt to Unlock Card Component Innovation

The core challenge faced by this project stemmed from the inability to innovate within our card components, constrained by accumulated technical debt. With FullStory's growth, we found ourselves burdened with a variety of card components, each developed independently without shared coding standards. This fragmentation severely limited our capacity to apply global enhancements across our cards, making any significant updates contingent upon addressing the underlying technical debt.

Goal

Create a Singular, Versatile Card Component with a Unified Design Vision

This project aimed to unify all the varied card types across our product into a single, streamlined component. In doing so, it was crucial to make sure this new, unified card component could accommodate every atomic element from the diverse card types we previously had.

This a demo space I built in Figma to quickly display our developing card component in context with other cards

Consideration

Designing Card Sizes for Grid Layouts with Responsive Scaling Across Viewports

We needed to have a small, medium, and large card size. These cards would almost always be presented in a grid format. As such, on a desktop-sized viewport, the small cards needed to be a quarter of the width and height of a medium card, the medium cards needed to be half the width of a large card, and the large card would take up the entire container.

Consideration

Ensuring Consistency for Data Attribution and Workspace Ownership in Card Component Updates

While working through this updated version of the card component, I needed to ensure that there was a consistent home for both the attribution of underlying data object type, as well as the workspace it was owned by. Previously this, information was inconsistently placed within the cards across the different card types.

Research

Optimizing Card Layouts with User-Centric Sorting Studies Conducted on Usertesting.com

I ran a modified card-sorting study where I asked users and user-look-a-likes to arrange the various atomic elements of cards in order of importance. I used that information to decide, across the different card sizes, what information needed to be readily scannable, and what elements could be obscured behind an interaction (hover, click, etc.). This FigJam was originally designed by Curtis McCrady. We used it in conjunction with Usertesting.com to to run our study.

Research

Tailoring Card Design to User Viewports for Balanced, Responsive Layouts

Using existing data I determined what our users’ most common viewport sizes are. With that information I was able to define the ideal, base-container size to start with. This in turn allowed me to define the widths of the different card sizes such that they could all be balanced when a user rearranged them.

Output

Streamlining Designer Workflows with Intuitive Figma Card Components

In this project, my aim was to simplify the workflow for designers using our Cards component in Figma, making their process as seamless as possible. I focused on creating a card component that allows for consistent inputs, like object titles and data date ranges, to be easily transferred when a designer changes card types or sizes. This approach mirrors the intuitive experience users enjoy when adjusting card sizes or visualizations within the product.





Solution

Solution iterations

This carousel includes the different iterations our card went through as we responded to rounds of incoming feedback.

Solution

Card Element Migration Specs

These are the artifacts I provided to our engineers to illustrate where all of the elements of the different card types would be migrating to in the new card component.

Solution

Final mocks

After extensive user testing and thoughtful consideration of viewport sizes, we finalized a versatile card component that adapts seamlessly across devices. This is the final mock-up, showcasing a design that balances information visibility and user interaction, tailored to our users' needs.

Results

Technical Debt Cleared for Data Visualization Innovation and Streamlined Workflows

Having tackled the technical debt head-on, we've now set the stage for rolling out global updates to our data visualization library. Also with the introduction of our new, standardized Space attribution has allowed us to streamline, eliminating complex workflows and visuals that were previously used to solve for this attribution problem.

Collaborators

Product Designer
Head of UX Research
Design Systems Lead
Product Designer

That's a wrap for this project!

See more of my work from

FullStory