Design a side-by-side visual comparison of four editable field styles for a Shopee enterprise system, used inside a data table (e.g., invoice / procurement UI).
The purpose is to help users easily recognize which fields are editable at a glance, without compromising visual aesthetics. Avoid using yellow backgrounds.
Each column should show the same field label: "PO Category" with the value "Inventory – Digital Product".
Design the following 4 variants:
#E5E5E5)#2684FF)#F5F6F7)Place these four variants in a horizontal layout under a section titled:
"Which editable field style works best?"
Use a Shopee-style visual system: rounded corners, clean typography, soft shadows. Avoid using yellow.
This prototype will be used for internal design discussion and usability testing.
I'll create a side-by-side comparison of four editable field styles for a Shopee enterprise system. This will help with design discussions and usability testing.
I've created a comprehensive side-by-side comparison of four editable field styles for the Shopee enterprise system. Here's what I've designed:
This prototype is perfect for internal design discussions and usability testing, allowing teams to evaluate which approach works best for their specific use cases in the Shopee enterprise system.
Redesign the editable fields inside a procurement request matching table, preserving the current layout but making editable fields visually obvious without breaking Shopee-style aesthetics.
📌 Base Layout:
🔧 Redesign goals:
✅ Visual changes to apply ONLY to editable fields (like "PO Category"):
#E5E5E5) around the cell#2684FF)text📌 Remove the always-visible pencil icon if it's misleading
💬 Tooltip:
Keep the rest of the table as-is, only visually differentiate the editable column(s). Style must be clean, professional, and modern.
I'll redesign the procurement request matching table to make the editable fields visually obvious while maintaining Shopee's design aesthetic.
I've redesigned the procurement request matching table with a focus on making the editable "PO Category" fields visually obvious while maintaining Shopee's clean design aesthetic.
#E5E5E5) around editable cells to subtly indicate editability#2684FF) on hover for clear interactive feedbackThe redesign successfully makes editable fields immediately recognizable without compromising the clean, professional aesthetic of Shopee's design system. The subtle visual cues and interaction patterns provide clear affordances for users without requiring explanation.
Design a table of line items where certain fields are editable, using subtle but clear visual indicators.
🧾 Table Structure:
✅ Editable Field Style:
#2684FF)text🚫 Do NOT use yellow background, full borders, or pencil icons.
Maintain a clean, modern, Shopee-style design language.
Also include a trash icon for row deletion and a button for “Add Line Item” at the bottom.
Display Grand Total in bold at the bottom right.