cherry
Redesigning the product card for clarity.
Redesigning the product card for clarity.
Industry Charity
Year 2025
Tools Figma, Framer
Category UX / UI Design
Industry Charity
Year 2025
Tools Figma, Framer
Category UX / UI Design
Overview
I really didn't think I'd spend this much time on a product card.
I really didn't think I'd spend this much time on a product card.
When I joined Cherry, the team had already designed a fair number of screens, but several needed improvement. I chose the product card first because it's the initial point of contact when a user checks out a clothing item. The existing version had too many competing elements in a limited space: logos, clothing condition, and a like button all sat on top of the product image, fighting for attention. Colours and shapes were inconsistent and needed simplifying, and the product title sat below the image at a larger size than the price, even though price mattered more.
My task was to investigate how to simplify the card and reduce cognitive load.
When I joined Cherry, the team had already designed a fair number of screens, but several needed improvement. I chose the product card first because it's the initial point of contact when a user checks out a clothing item. The existing version had too many competing elements in a limited space: logos, clothing condition, and a like button all sat on top of the product image, fighting for attention. Colours and shapes were inconsistent and needed simplifying, and the product title sat below the image at a larger size than the price, even though price mattered more.
My task was to investigate how to simplify the card and reduce cognitive load.
Approach
Before redesigning anything, I tried to strip the product card back to its purpose.
What information does someone actually need when deciding whether to explore an item?
I identified:
Product image
Price
Condition
Size
Charity the purchase supports
A way to save/like the item
The existing design had most of this information, but the problem was how it was presented.
Important information was layered over the product image, making the image harder to see. The card was communicating a lot, but not necessarily communicating it clearly.
Before redesigning anything, I tried to strip the product card back to its purpose.
What information does someone actually need when deciding whether to explore an item?
I identified:
Product image
Price
Condition
Size
Charity the purchase supports
A way to save/like the item
The existing design had most of this information, but the problem was how it was presented.
Important information was layered over the product image, making the image harder to see. The card was communicating a lot, but not necessarily communicating it clearly.
Research
I started by putting myself in the user's position: what does someone actually need from a product card? Image, price, condition, size, and, specific to Cherry, which charity the sale supports. The existing card crowded these details on top of the image, making it hard to see the product clearly
I also ran a competitor analysis. Cherry doesn't have much direct competition, since few platforms combine clothing resale with charitable giving, but there's no shortage of clothing resale platforms generally. Their cards stayed simple and put clear emphasis on price. I also noticed their product images ran taller, since users were uploading in portrait orientation, which kept images from being cropped or obscured.
I started by putting myself in the user's position: what does someone actually need from a product card? Image, price, condition, size, and, specific to Cherry, which charity the sale supports. The existing card crowded these details on top of the image, making it hard to see the product clearly
I also ran a competitor analysis. Cherry doesn't have much direct competition, since few platforms combine clothing resale with charitable giving, but there's no shortage of clothing resale platforms generally. Their cards stayed simple and put clear emphasis on price. I also noticed their product images ran taller, since users were uploading in portrait orientation, which kept images from being cropped or obscured.
Exploration
I started by stripping out unnecessary colours and font sizes. I removed everything sitting on the image except the like button, made images taller, and gave the final price more visual weight. Cherry also needed a purchase security fee shown, so I added that.
The charity logos were a harder problem. They're central to Cherry's mission, representing the cause each purchase supports, but they varied wildly in shape, size, and complexity, which made cards feel inconsistent and unbalanced. I built a small logo system with two fixed sizes, large and standard, which cut down manual adjustment, kept brand integrity intact, and scaled cleanly across card types.
I started by stripping out unnecessary colours and font sizes. I removed everything sitting on the image except the like button, made images taller, and gave the final price more visual weight. Cherry also needed a purchase security fee shown, so I added that.
The charity logos were a harder problem. They're central to Cherry's mission, representing the cause each purchase supports, but they varied wildly in shape, size, and complexity, which made cards feel inconsistent and unbalanced. I built a small logo system with two fixed sizes, large and standard, which cut down manual adjustment, kept brand integrity intact, and scaled cleanly across card types.
Impact
An A/B test showed 70% of users found the redesign easier to scan and use, with less guesswork, and they preferred the emphasis on price. One issue surfaced during testing: clothing condition was shown as a number, and users didn't know what the numbers meant. I replaced them with plain descriptions like good, excellent, and well worn.
An A/B test showed 70% of users found the redesign easier to scan and use, with less guesswork, and they preferred the emphasis on price. One issue surfaced during testing: clothing condition was shown as a number, and users didn't know what the numbers meant. I replaced them with plain descriptions like good, excellent, and well worn.
The simplification also made the card easier to build and maintain, not just easier to look at:
Fixed logo system: two set sizes instead of arbitrary dimensions meant no per-card manual resizing or edge-case handling for oversized or oddly-shaped logos
Consistent image ratio: standardising on portrait orientation removed the need for dynamic cropping or aspect-ratio logic per upload
Fewer style variants: cutting down colours and font sizes meant fewer CSS classes and tokens to maintain, and less chance of visual drift between cards
The simplification also made the card easier to build and maintain, not just easier to look at:
Fixed logo system: two set sizes instead of arbitrary dimensions meant no per-card manual resizing or edge-case handling for oversized or oddly-shaped logos
Consistent image ratio: standardising on portrait orientation removed the need for dynamic cropping or aspect-ratio logic per upload
Fewer style variants: cutting down colours and font sizes meant fewer CSS classes and tokens to maintain, and less chance of visual drift between cards
Learnings
I expected the product card to be a quick, straightforward fix. It wasn't, and the constraints I ran into made it a genuinely interesting first project. Product cards are more complicated than they look. Onward to the product page.
I expected the product card to be a quick, straightforward fix. It wasn't, and the constraints I ran into made it a genuinely interesting first project. Product cards are more complicated than they look. Onward to the product page.
Other work for cherry
cherry
Digital rejuvenation of an app with a brand new way of making donation.
cherry
Digital rejuvenation of an app with a brand new way of making donation.
cherry
Digital rejuvenation of an app with a brand new way of making donation.
cherry
Why are websites for charities so bad?
cherry
Why are websites for charities so bad?
cherry
Why are websites for charities so bad?
Al Attakora
I'm open to taking on new projects right now. Hit me up, let's talk and turn your business ideas into pragmatic yet delightful user experiences.
© 2025 AL ATTAKORA. All rights reserved.
Crafted with care
Al Attakora
I'm open to taking on new projects right now. Hit me up, let's talk and turn your business ideas into pragmatic yet delightful user experiences.
© 2025 AL ATTAKORA. All rights reserved.
Crafted with care
Al Attakora
I'm open to taking on new projects right now. Hit me up, let's talk and turn your business ideas into pragmatic yet delightful user experiences.
© 2025 AL ATTAKORA. All rights reserved.
Crafted with care