Pod: Retailers Tools & Programs
Team: Lead Designer (myself), Engineers
Timeline: 1 month
Skills: Visual Design, Cross-functional collaboration
Retailers currently have to switch back and forth between Faire and their inventory record-keeping systems to construct reorders. This makes the reordering process tedious and time-consuming.
scroll to see how i did this ↓
Faire is an online wholesale marketplace with the mission to empower brands and retailers to strengthen the unique character of local communities. I was part of the Retailer Order Management Pod, tasked with making it seamless for retailers to confidently order and manage inventory for their shops.
Faire integrates with several POS systems, Shopify, Clover, and Square, to streamline the reordering journey for retailers. Currently, Faire provides a dedicated POS Connect page, where users can access centralized inventory data synced from their POS systems.
While the POS Connect page shows inventory data, it's not integrated across the platform during the retailer's shopping journey. Without real-time stock visibility, retailers must toggle between Faire and their POS systems, creating inefficiencies and frustration.
For POS-integrated retailers, contextually showing inventory data across various parts of their journey on Faire will streamline reordering by providing the necessary context to inform ordering decisions.
To start, we focused on the product display page (PDP) as the MVP surface. Around 64% of GMV is added to the cart from the PDP, and almost all users visit this page during their journey.
1
Retailers must clearly distinguish between Faire's brand stock data and their own POS inventory to avoid confusion.
2
The PDP is primarily designed to display product details and drive ATCs (add-to-carts). POS information must be added without detracting from these primary goals.
My design process looked something like this ...
This project followed Design Diamond approach focused on the latter stages of the design process, leveraging prior UXR. The emphasis was on developing a high-fidelity design that addressed edge cases, finessed visual design, and aligned with technical development constraints.
What information can I display?
For multi-location retailers with items that have variants and sizes, inventory is organized into multiple levels. This includes total inventory, inventory by location, inventory by variant (e.g., color), and inventory by size (e.g., small, medium, large).
diagram illustratING INVENTORY LEVELS
What is the right information to display?
🚧
CHALLENGE #1
Understanding The Levels
There were four independent levels of information to display: Total, Location, Variant, and Sizes. These levels could be combined in various permutations, such as only Location, Location + Variant, Location + Total, or more complex combinations like Location + Total + Variant + Sizes."
shows TOTAL
✅
shows LOCATION LEVEL
✅
shows VARIANT LEVEL
✅
shows SIZES LEVEL
✅
Exploring Design Solutions
I mocked up early visual directions for most possibilities from the checklist above to get a gauge on what frameworks can be employed and investigate feasibility of the solutions.
EXAMPLE EXPLORATIONS FOR SOME OF THE MANY POSSIBILITIES:
shows TOTAL
✅
🚫
🚫
🚫
Feasibility of the solutions
Collaboration Checkpoint
To ensure alignment, I collaborated with the Growth and Discovery teams to assess technical feasibility and gather input on the impact of each solution
Outcome
All solutions were technically feasible, but minimizing visual weight was crucial to maintain the primary goal of driving Add To Cart.
💡
DECISION POINT
This approach provides the most actionable and useful information for retailers to understand inventory breakdowns and make reordering decisions—while maintaining minimal visual disruption.
Accounting for all the PDP variations when designing
As I began designing solutions, every visit to the PDP revealed yet another new component, variation, or edge case to consider. These—and many more—questions constantly floated around in my mind:
🤔 What is open sizing ?
🚧
CHALLENGE #2
To better understand how these cases function and when specific UI components are triggered, I collaborated with the Growth and Discovery teams. I identified three key cases for the PDP, organized for this project, each requiring a distinct design solution.
3 key cases
1
0 variants
Simplest case, representing single-item products with no variants (i.e Book)
2
1+ variants
Includes combinations of UI elements such as swatches (colors), dropdowns (sizes), or tiles for different variants (e.g., a plushie toy)
3
Open Sizing
Most relevant for apparel, where multiple sizes are available for each color (e.g., a red T-shirt offered in sizes S, M, and L).
After identifying the 1) level of information to display and 2) defining key cases to design for, the next step was exploring solutions with the right visual weight adhering to the design principles.
🚧
CHALLENGE #3
Case 1&2: Visual Hierarchy direction options
Decision making
🚫
Options 3&4 – Not Selected
Too far from the quantity picker and variant selector, making it difficult to connect dynamic changing stock to help inform user actions.
Added visual distractions that disrupted the logical flow of the PDP.
👍🏼
Option 1&2 – Preferred
Proximity to the variant selector ensured better usability and seamless interaction.
✅
Option 2 – Final Choice
Stock information dynamically updates in line with the SKU, aligning naturally with variant selection.
Maintains a clean design by minimizing additional space usage and keeping the ATC (Add to Cart) button in the same line.
After settling on the visual hierarchy options for Case #1 and #2, the next challenge was accommodating Case #3: Open Sizing.
case #3: open sizing
Challenges
Open Sizing introduced additional complexity because it required displaying multiple size options for each variant, which significantly increased the space required.
Key challenges:
Differentiating POS stock from brand stock in the same table.
Ensuring the design remains visually clean despite added details
Solution
To solve this, I introduced a dedicated 'In POS' column, clearly separated from brand stock.
WITHOUT STOCK INFO
WITH STOCK INFO
With the main design challenges resolved, the next step was refining the finer details like copy, colors, and interactions to ensure clarity and usability for retailers.
Case #1 & 2: 0 and 1+ variant case
TOOLTIP (DEFAULT)
🖊️
Copy Decisions
🎨
Styling Decisions
⚙️
Interaction Decisions
Case #3: Open Sizing
This was by far the hardest case to nail. Open Sizing required displaying multiple size options for each variant, which significantly increased the space required. Through two design jams and several iterations, the final solution incorporated a dedicated column to maintain clarity and consistency.
Final outcome
Key Outcomes
✅
Scalable Design System: Accommodates all variations, including edge cases like open sizing and preorders
✅
POS Inventory Integration: Seamlessly embedded within the PDP, providing actionable insights without disrupting the primary purpose of the page or detracting from ATCs
✅
Responsiveness: Built responsive designs for Mobile Web and Mobile App
0 Variant
1+ Variant
Open Sizing
FYI: All of these designs were shipped 🚀
Key Learnings
🚀
Shipping Scalable and Responsive Solutions
Collaborating with developers to define edge cases, variations, localization logic, and responsive designs across web, mobile web, and mobile apps
🧭
Navigating and Designing for a High-Intent Surface
Gained experience working on a high-impact surface with heavy visitor traffic, coordinating across multiple teams, pillars, and pods to align on solutions.
📐
Pixel-Perfect Visual Design
Delved into the finer details of visual design—spacing, typography, color—and intentionally crafted solutions that balance usability and adherence to design principles. Realized how even the smallest design changes can have significant effects, especially on high-traffic pages.