SYFT PRODUCT CARD
2026
DESIGN SYSTEMS & COMPONENT CREATION
When creating a product, the systems and rules behind it are what make or break it. As a UX/UI intern at SYFT, I focused on design systems and component work, along with creating a cohesive presence through visual branding and design.
In this role, I got to experience firsthand what it’s like working as a design systems associate under a design systems lead at JP Morgan. I learned so much about Figma, methodologies like atomic design, and how thoughtful systems create consistency, scalability, and better collaboration across teams.
THE PROBLEM
Browser extensions like SYFT must deliver high-value information without disrupting the browsing experience, yet many shopping tools overwhelm users by packing limited space with non-essential details. Because users turn to extensions for fast, actionable insight, there is a clear need for a high-density UI that balances transparency with visual clarity.
How might we design a product card component that makes users feel like their needs are seen, performs within narrow spatial constraints, and enables confident, at-a-glance decisions?
DISCOVER
OBJECTIVES
-
Explore the problem space and what the component is solving for
-
Begin to identify user context/needs/pain points
-
Start conceptualizing potential solution directions
REQUIREMENTS
-
Product cards will need the ability to like/dislike the product which will populate the closet of saved items while also training the model on what the user wants to see more of.
-
Understand what else should be displayed. Image and price for sure. But what about reviews, additional colors, more images
-
Functionality will need to open to the product details page. So entire card is linked as a click area.
USER CONTEXT
Gen-Z, Female, Budget Conscious, Trend Driven Digital Native
-
Using an empathy map, we know the user is "Frustrated," "Overwhelmed," and scrolls endlessly when shopping online. They struggle with finding items that match their unique style even at stores they like.
EXISTING DESIGN SYSTEMS AUDIT
-
Image leads hierarchy, driving initial interest before name or price.
-
Most product cards that are rectangular in shape and portrait oriented, like how SYFT wants, allow >50% of the vertical space to be taken up by an image.
-
-
Consistent core anatomy: image, title, quick info, and primary action.
-
Optional elements like badges or save buttons are layered in as icon buttons usually on the image.
-
-
Some secondary details often appear on hover, or in some cases, the image expands.
-
Core anatomy is modular, allowing pieces (media, title, description, button) to be used together or independently.
-
Necessary States: Clicked, Hover, Normal, Skeleton, and Focused.
-
Focus state with visible outline with contrast for accessibility and tab through keyboard navigation.
-
-
CTA leading to product page could be as basic as "see more," or as vague as "more colors."
BEHAVIORS AND PERCEPTIONS
What do people expect from, and how do they interact with product cards?
-
Users scan product cards rather than read them
-
They follow F-pattern or Z-pattern scanning
-
Image and price are processed before description
-
Cards with strong visual hierarchy perform significantly better
-
-
Poor image quality or inconsistent sizing in images causes users to skip cards entirely, even for products they'd want.
-
Users rarely expand or scroll within a card
-
If the key decision-making info (image, name, price, rating) isn't immediately visible, conversion drops.
-
Trending towards taller cards
-
-
-
Users prefer cards with 3–5 pieces of information
-
Too many badges, labels, or CTAs create decision fatigue.
-
Whitespace significantly improves perceived quality
-
-
Users hover over cards to preview
-
Quick-view functionality and hover-triggered secondary info reduces pogo-sticking.
-
-
3–4 columns on desktop is optimal, however for an extension that occupies around 20% of the screen, the user views it almost as a mobile device where 2 columns is preferable.
-
Users want just enough to decide whether to click through. Research supports the pattern of leading with the "hook" (image + name + price)
-
PRIORITIZATIONS AND TRADEOFFS
-
I focused on features that helped users decide faster and feel less overwhelmed, while staying practical for SYFT. Features that were highly specific to the products would deprioritized in favor of clear, glanceable core details. If users want to learn more, they can click and open the product page external link in a new tab.
-
-
Images drive first impressions
-
Price sensitivity outweighs other details
-
Clarity beats specifics at this stage
-
-
Tags are very important, I toyed with an idea of visual borders rather than text tags: something to test!
INTERACTION CONTEXT
-
How might we surface the right information at the right moment without pulling users out of their browsing flow? This context map aligned user needs, existing context, and interaction flow, directly informing layout, content hierarchy, and card behavior. It also opened a question of how will the product page open after clicking on the card?
So much thinking goes into the small details! After working on this I truly understood and respected the work of Design Systems professionals.
DEFINE
LOW FIDELITY
I began with ideating three different possible styles, displaying modular heights for each. This helped with hierarchy decisions, and picking out the "atoms" within the "molecule."
IDENTIFYING FOUNDATIONAL ELEMENTS
Using established design systems library, I gathered existing components, editing them to fit into the context of the product card:
EDITED COMPONENTS
I made choices based on the context of the product card, visible colors on image overlays, and confined/blocked spaces.
HOVER STATES TEST
In a group, we identified areas of the mid-fidelity prototypes that aligned best with SYFT. from there, I made a few variants and tested a hover state with each.
DESIGN
INTERACTIONS PRACTICE
Creating all necessary states for one of the samples to show the different variants that one product card could have.
Sometimes it felt like we were taking a step backward,
but each critique session actually moved the design forward.
As we reviewed concepts together, new questions surfaced: How do we make SYFT’s differentiators instantly clear? What keeps someone scrolling? At times we preferred one direction visually, only to realize it didn’t hold up once we tested it against the context of the SYFT extension.
Those “back to the drawing board” moments weren’t resets, they were deliberate brainstorming sessions, SYFT Product Card Idea 2.0, that sharpened the experience and strengthened the final outcome. We kicked off the next round by annotating the original hover-state samples:
RETHINKING DIFFERENTIATORS (Tags)
DELIVER
In Progress: Here I will showcase how the product card fits into the extension
GALLERY
A showcase of other projects I did for SYFT, including brand systems and logo ideating:
