DESIGN SYSTEMS / RECRUITMENT CHALLENGE
Talabat — one card, a shared language.
Problem / Inconsistent product cards make price, promotions and actions harder to scan.
Approach / Audit the patterns, define a shared hierarchy and compose reusable atoms, molecules and cards.
Delivered / A Figma component proposal, variants and usage guidance, with a validation plan—not a shipped product.
Role: Product designer · Scope: component audit, Figma architecture and documentation · Brief: one-week maximum · Status: concept, not a shipped Talabat engagement
01 / THE CHALLENGE
Similar cards. Different rules.
The employer brief described inconsistent product cards and vendor list items across brands and platforms. I focused on the product card: a small surface carrying a large decision — what am I buying, what does it cost, and why choose it? My app review surfaced differences in image proportions, information hierarchy, promotional labels and spacing.
The design question: how might we standardise the decision-making cues without removing the flexibility different shopping contexts need?
No ad frame
Title weight is regular, not bold
Example 1
No Description or weight
No stroke/outline
Image size is taller
A new favourites button
A pro badge for restaurants
The font size of the restaurant, weight and colour are different
A 5 star rating system + reviews
count
The business logic behind it might be to promote the PRO restaurants more, in a featured style card. Slightly different than a product card.
The restaurant’s logo
% off is bottom aligned
Example 2
No description or weight
This card has a top rated label
No Ad space
No + button
Example 3
When multiple items are included — such as a burger, fries, a drink, and a side — displaying the weight may be confusing, as it’s unclear which item the weight refers to, hence why the description and weight label is not shown here
Image size is different, it follows a horizontal format
The colour of the background is different across all examples
Description or weight label is missing
Price deals are not stacked, they are horizontally aligned
No + button
No ad
A top rated label
Example 4
02 / DESIGN LOGIC
Design around the decision, not the variation.
Proposed task map · a design hypothesis, not a journey validated through customer research.
01 / DISCOVER — What is this product?
A consistent image and title support recognition. Keep the product name readable; move non-essential detail out of the primary hierarchy.
02 / COMPARE — What will I pay?
Make the current price unmistakable. Add an original price and savings label only when a valid promotion applies.
03 / ASSESS — Why choose this one?
Use delivery, ratings or genuine personalisation to support confidence. Prioritise relevant cues rather than displaying every available badge.
04 / ACT — Add, or explore the details.
Allow direct add for a simple product. Open details when options are required, and provide clear feedback after the action.
My key trade-off was flexibility versus predictability. Image size can vary by placement, but the order of title, supporting information and price should remain familiar. Optional content must collapse cleanly; personalisation should never displace essential product information.
03 / THE SOLUTION
One structure. Purposeful flexibility.
I separated foundations, reusable content elements and the assembled card. The Figma proposal includes small, medium and large image layouts, product and business title treatments, standard and discounted pricing, delivery metadata and optional relevance labels. These are composed capabilities rather than a separate component for every combination.
The decisions behind the system
01 / Standardise the hierarchy, not every surface. Keep identity and price stable; let image size respond to browsing density. Trade-off: more flexibility requires explicit composition rules.
02 / Compose optional cues instead of multiplying variants. Savings, delivery and relevance answer different questions. Trade-off: slot priority must prevent badge overload and layout gaps.
03 / Separate browsing from adding. The card opens product details; the add control changes basket state. Trade-off: nested actions need deliberate focus order, clear naming and recovery feedback.
Atoms / the foundations beneath every card.
The proposal uses semantic colour roles, defined type treatments and a four-pixel spacing base. Token values are assumptions for this challenge, not a claim to reproduce Talabat’s production library. Separating those decisions from component anatomy makes future changes easier to govern.
Original Talabat challenge palette: brand, promotion, membership and neutral roles. These colours belong to the product examples; the surrounding case study keeps the portfolio’s visual language.
SPACING / 4 · 8 · 12 · 16 · 24 · 32. A four-pixel base gives designers and engineers a predictable rhythm between image, title, metadata and price.
Molecules / meaningful combinations of atoms.
Seven families cover the card’s decision cues: price, savings, relevance, delivery, identity, the add action and image composition. The original variants below show what changes independently—and what stays consistent.
01 / Price
AED 00.00
AED 00
AED 00.00
Current and original amounts; hide the original when there is no discount.
02 / Savings
Save 00%
Save AED 00.00
Percentage or currency value; never show an unsupported claim.
03 / Relevance
Top Rated
Your Favourite
Ordered Before
Top rated, favourite or ordered before; one contextual cue at a time.
04 / Delivery
25 mins
Free
Time and fee stay together so speed is not read without cost.
05 / Identity
ProductName should
truncate after 2 lines
BusinessName
BusinessName
Product, business and membership treatments; reserve two title lines.
06 / Add action
A distinct target, separate from the card’s navigation action.
07 / Image composition — small, medium and large
Save 00%
Save 00%
Save 00%
Composition rules / keep identity and price persistent. Treat savings, relevance and delivery as contextual slots. Use one relevance label at a time; never let a promotional cue displace the information needed to make a purchase decision.
Organisms / assembling the product card.
Save 00%
Top Rated
ProductName should
truncate after 2 lines
25 mins
Free
AED 00.00
AED 00
Save 00%
Top Rated
ProductName should
truncate after 2 lines
25 mins
Free
AED 00.00
AED 00
Save 00%
Top Rated
ProductName should
truncate after 2 lines
25 mins
Free
AED 00.00
AED 00
Save 00%
Top Rated
ProductName should
truncate after 2 lines
25 mins
Free
AED 00.00
AED 00
Save 00%
Your Favourite
ProductName should
truncate after 2 lines
25 mins
Free
AED 00.00
AED 00
Save 00%
Ordered Before
ProductName should
truncate after 2 lines
25 mins
Free
AED 00.00
AED 00
Original Figma explorations adapted to the portfolio’s typography: image scale and personalisation. Placeholder product content is retained to show the underlying system rather than imply a live implementation.
Usage rules: keep image, title and price in every product card. Show an original price only when there is a genuine discount. Show “Your favourite” or “Ordered before” only when supported by user history. Hide absent optional content without leaving empty space. Keep vendor-specific delivery information contextual rather than forcing it onto every grocery product.
04 / IMPLEMENTATION STRATEGY
Ready for handoff. Built to be tested.
The handoff pairs anatomy and slot rules with accessible interactions, representative content cases and a staged pilot. Design and engineering would agree the contract before build, then validate it together.
05 / IMPACT & REFLECTION
A system proposal, not an impact claim.
Delivered: a modular card proposal and guidance for consistent composition. Intended value: clearer shopping decisions and less duplicated design work. Production impact remains unmeasured.
Next steps
Validate pricing and add-task clarity with shoppers; resolve accessibility and real-content edge cases with engineering; pilot one placement against a baseline before expanding adoption.