
Full time
CENTINELA FEED
Closing the Order Fulfillment Gap: How Customer Transparency Increased Orders
Retail | Website | B2C
See Website

Full time
CENTINELA FEED
Closing the Order Fulfillment Gap: How Customer Transparency Increased Orders
Retail | Website | B2C
See Website
Full time
CENTINELA FEED
Closing the Order Fulfillment Gap: How Customer Transparency Increased Orders
Retail | Website | B2C
See Website

Role
Product Designer
Contributions
Led end-to-end UX Audit, by conducting user interviews with pet owners, store general managers, and customer support teams.
Worked with social media team to rebrand/ reposition the company value.
Partnered closely with the data team to analyze the reports and dashboards of current state of the website, and collaborated with design engineers, and frontend developers to optimize the design system.
Team
Team of 6- 1 Product Designer (me), 1 Digital Marketer, 1 Frontend Developer, 1 Design Engineer, 2 Backend Developers, 1 Product manager
Time Taken
8 Months
This case study focuses on one work stream inside a larger site redesign and the product page rebuild.
The full scope of the project is noted at the end
Role
Product Designer (Full- time)
Product
Website
Tools
FigJam, Figma, ChatGPT, Google Meet and Trello
Team
Team of 6- 1 Product Designer (me), 1 Digital Marketer, 1 Frontend Developer, 2 Backend Developers, 1 Product manager
Time Taken
8 Months
This case study focuses on one work stream inside a larger site redesign and the product page rebuild.
The full scope of the project is noted at the end
About Centinela
About Centinela
About Centinela
Centinela Feed & Pet Supplies is a family-owned Southern California business with over 40 years of serving local pet owners. With multiple physical locations thriving and a growing e-commerce presence.
Centinela Feed & Pet Supplies is a family-owned Southern California business with over 40 years of serving local pet owners. With multiple physical locations thriving and a growing e-commerce presence.

The Problem
The Problem
The Problem
The product page showed no real-time inventory number. The store's system showed full inventory list.
Customers noticed the gap first: they'd order a bag of food online, get a cancellation or change from same-day to a two day delivery, to cancellation emails a day later, and so stop they stopped trusting the site altogether. Some started calling the store directly to confirm stock before ordering. Others skipped the site and drove over to check the shelf themselves
Broader Problem
Broader Problem
Broader Problem
The initial read was that this was a content problem. Add a stock status label to the product page, done.
But the deeper issue sat further back. Centinela didn't have a reliable way to surface real-time, store-level inventory in the first place. The product page was just the last stop for a number that was already unreliable by the time it got there. Total stock on hand lived in one system.
Any fix that only touched the front end would've done nothing but relabel the same bad number. Customers would see a stock status with more confidence than before, on inventory nobody on the retail side could actually stand behind. That's worse than showing nothing. It would've papered over a supply chain problem instead of fixing it, and the next round of cancellation emails would've landed with even less trust behind them.

Understanding the Root Cause
Before Designing anything, I ran a mixed-method UX audit combining: user interviews (12 pet owners, 3 General managers, 1 Retail Division Head, 2 customer support reps), heuristic evaluation across all key pages, Salesforce dashboard analysis with the data team, and session recordings to map drop-off points.
"I can't tell if the food I want is in stock at my local store, so I just go in person."
→ Stock visibility was broken. Customers defaulted to in-store because the online inventory wasn't trustworthy.



Notes from my user interviews at one the Centienla Feed store, where I sat with the general manager and recorded the interview to later properly document them and present the finding to my manager

Understanding the Root Cause
Before Designing anything, I ran a mixed-method UX audit combining: user interviews (12 pet owners, 3 General managers, 1 Retail Division Head, 2 customer support reps), heuristic evaluation across all key pages, Salesforce dashboard analysis with the data team, and session recordings to map drop-off points.
"I can't tell if the food I want is in stock at my local store, so I just go in person."
→ Stock visibility was broken. Customers defaulted to in-store because the online inventory wasn't trustworthy.



Notes from my user interviews at one the Centienla Feed store, where I sat with the general manager and recorded the interview to later properly document them and present the finding to my manager

Understanding the Root Cause
Before Designing anything, I ran a mixed-method UX audit combining: user interviews (12 pet owners, 3 General managers, 1 Retail Division Head, 2 customer support reps), heuristic evaluation across all key pages, Salesforce dashboard analysis with the data team, and session recordings to map drop-off points.
"I can't tell if the food I want is in stock at my local store, so I just go in person."
→ Stock visibility was broken. Customers defaulted to in-store because the online inventory wasn't trustworthy.



Notes from my user interviews at one the Centienla Feed store, where I sat with the general manager and recorded the interview to later properly document them and present the finding to my manager

Understanding the Root Cause
Before Designing anything, I ran a mixed-method UX audit combining: user interviews (12 pet owners, 3 General managers, 1 Retail Division Head, 2 customer support reps), heuristic evaluation across all key pages, Salesforce dashboard analysis with the data team, and session recordings to map drop-off points.
"I can't tell if the food I want is in stock at my local store, and so I just go in person."
→ Stock visibility was broken. Customers defaulted to in-store because the online inventory wasn't trustworthy.



Notes from my user interviews at one the Centienla Feed store, where I sat with the general manager and recorded the interview to later properly document them and present the finding to my manager
Talked to users
Conducted UX Audit and Interviewed 12 pet owners, 3 store managers, and support team. Found pain points of offline shopping and frustration of the e-commerce website
Checked the data
Worked with the data team to map the ratio of fulfilled to cancelled orders over a set period, confirming inventory mismatches were a real, recurring problem, not isolated incidents.
Validating to See Repeating Patterns

Two Systems, Two Counts
Two Systems, Two Counts
Two Systems, Two Counts
Retail managers tracked two numbers: shelf stock and a safety-stock buffer (called the ATF).
Customers online saw nothing at all.
Neither number was safe to show a customer. That gap hurt trust
Retail managers tracked two numbers: shelf stock and a safety-stock buffer (called the ATF).
Customers online saw nothing at all.
Neither number was safe to show a customer. That gap hurt trust
Every order ships from a store, not a warehouse: pickup, same-day, or standard shipping. If the number on the page was wrong, there was no backup plan to quietly fix it."
The Real First Step
The Real First Step
First step was making the the live-inventory number match reality, which meant getting two groups who didn't normally talk to each other aligned:
Store General Managers: non-technical, closest to the customer in store, but not the ones tracking actual stock numbers on the salesforce channel
Retail/inventory managers: technical, owned the real inventory data, but had no visibility into how customers were interpreting the website

The Fix
The Fix
Live, store-level inventory on the product page, pulled straight from the same supply chain data that store GMs used for fulfillment, and tied to whichever store the customer selected.
This meant reconciling two numbers that had never talked to each other. Total stock on hand and the reserved or minimum-stock threshold now fed into a single, accurate available-to-sell number, generated per store, in real time. The product page stopped guessing and started reflecting what was actually sitting on the shelf.
For the customer, this closed the gap that had been driving them offline. "Is this in stock near me" got answered on the product page itself, before they ever reached checkout. No more adding an item to cart only to see "Out of Stock" three steps later. No more cancellation emails a day after ordering. No more driving to the store just to confirm what the website should have told them.
For the business, it meant the front end finally reflected the back end. Order fulfillment stopped fighting the website instead of supporting it, and the number customers saw was one the retail team could actually stand behind.

This reroute problem shows up after checkout, not before, so it's not the browsing-stage root cause. It's proof the inventory issue ran deeper than the product page, which is why the fix had to correct the data, not just the display.
Final Designs
Final Designs
Before
No stock info appeared on the product page. People could add items to cart without knowing if they would arrive.
After
Live, honest, store-by-store inventory now shows at the shopper's chosen store.. On-hand stock and safety stock match behind the scenes — the shopper sees if the item is in stock or no. The same info also feeds internal systems, giving the shipping team a heads-up on incoming orders.

Before

After
Most Challenging Part
Most Challenging Part
Stores held back a safety buffer so in-person shoppers wouldn't get shut out by online orders. I had to understand that distinction well enough to design around it, and translate it between both teams so the online experience matched what was actually happening in the backend.
To make that translation stick, I mapped out what happened when a store couldn't fulfill an order and had to reroute it to another location, in plain terms both teams could follow.
Stores held back a safety buffer so in-person shoppers wouldn't get shut out by online orders. I had to understand that distinction well enough to design around it, and translate it between both teams so the online experience matched what was actually happening in the backend.
To make that translation stick, I mapped out what happened when a store couldn't fulfill an order and had to reroute it to another location, in plain terms both teams could follow.
This reroute problem shows up after checkout, not before, so it's not the browsing-stage root cause. It's proof the inventory issue ran deeper than the product page, which is why the fix had to correct the data, not just the display.
This reroute problem shows up after checkout, not before, so it's not the browsing-stage root cause. It's proof the inventory issue ran deeper than the product page, which is why the fix had to correct the data, not just the display.

The coral steps are what happens behind the scenes (the address reassignment you documented), and the teal step in the middle is the piece you actually designed — what the customer sees, either an updated fee or a fallback to standard ground shipping, instead of a confusing or silent failure.
The coral steps are what happens behind the scenes (the address reassignment you documented), and the teal step in the middle is the piece you actually designed — what the customer sees, either an updated fee or a fallback to standard ground shipping, instead of a confusing or silent failure.
Process Summary
Process Summary
Here is the design process I setup to follow which lead us to successful implementation, step by step-
Here is the design process I setup to follow which lead us to successful implementation, step by step-
1
UX Audit + Problem Validation
The multi-method research above, done before any screens were touched
2
Wireframes + PRD
Detailed spec covering the inventory logic, interaction states, and technical dependencies for engineering
3
Hi Fidelity Design
Done, on the existing design system
4
Developer Handoff + Implementation Review
Weekly reviews through build with design engineers and frontend developers, plus the stakeholder-alignment work above running in parallel
1
UX Audit + Problem Validation
The multi-method research above, done before any screens were touched
2
Wireframe + PRD
Detailed spec covering the inventory logic, interaction states, and technical dependencies for engineering
3
Design + Test
Done, on the existing design system
4
Developer Handoff + Implementation Review
Weekly reviews through build with design engineers and frontend developers, plus the stakeholder-alignment work above running in parallel
Process Summary
Here is the design process I setup to follow which lead us to successful implementation, step by step-
1
UX Audit + Problem Validation
The multi-method research above, done before any screens were touched
2
Wireframe + PRD
Detailed spec covering the inventory logic, interaction states, and technical dependencies for engineering
3
High Fidelity Design
Built against the existing design system rather than around it
4
Developer Handoff + Implementation Review
Weekly reviews through build with design engineers and frontend developers, plus the stakeholder-alignment work above running in parallel
Flow Implementation
Flow Implementation
Flow Implementation
Impact Created
Impact Created
40%
reduction in checkout time
via reservation timer, FY2024
$105
AOV Reached
up from $91 in FY2023
35%
Conversion lift
mobile-first approach, FY2024
40%
reduction in checkout time
via reservation timer, FY2024
$105
AOV Reached
up from $91 in FY2023
35%
Conversion lift
mobile-first approach, FY2024
I don't have a clean post-launch conversion or revenue number isolated to this specific feature as the numbers I can confidently report elsewhere (checkout time, AOV, overall conversion) belong to a different part of the same redesign, noted below.
I don't have a clean post-launch conversion or revenue number isolated to this specific feature as the numbers I can confidently report elsewhere (checkout time, AOV, overall conversion) belong to a different part of the same redesign, noted below.
Larger Project Scope
The numbers above are part of a broader scope of the project, which included some of these flows-
Mobile-first rework of the product and checkout flow
Rework on presenting the subscription flow
Design system scaling including typography, tokens, components, across the redesigned pages
Competitor analysis and ongoing funnel analysis feeding prioritization decisions
That's me presenting the whole new website as "Website 2.0" representing my whole team, to stakeholders and executives in the quarterly CF meetup

Larger Project Scope
The numbers above are part of a broader scope of the project, which included some of these flows-
Mobile-first rework of the product and checkout flow
Rework on presenting the subscription flow
Design system scaling including typography, tokens, components, across the redesigned pages
Competitor analysis and ongoing funnel analysis feeding prioritization decisions
That's me presenting the whole new website as "Website 2.0" representing my whole team, to stakeholders and executives in the quarterly CF meetup

Impact Created
40%
reduction in checkout time
via transparency in inventory, FY2024
$105
AOV Reached
up from $91 in FY2023
35%
Conversion lift
mobile-first approach, FY2024
I don't have a clean post-launch conversion or revenue number isolated to this specific feature as the numbers I can confidently report elsewhere (checkout time, AOV, overall conversion) belong to a different part of the same redesign, noted below.
Larger Project Scope
The numbers above are part of a broader scope of the project, which included some of these flows-
Mobile-first rework of the product and checkout flow
Rework on presenting the subscription flow
Design system scaling including typography, tokens, components, across the redesigned pages
Competitor analysis and ongoing funnel analysis feeding prioritization decisions
On the right, you can see me presenting the whole new website as "Website 2.0" representing my whole team, to stakeholders and executives in the quarterly CF meetup

Screens from other projects at Centinela
Screens from other projects at Centinela
Screens from other projects at Centinela








Next Case Study ->
What I'd Do Differently
What I'd Do Differently
What I'd Do Differently
I’d validate the support-team pattern data before doing GM interviews, not after, it would’ve focused my first round of interviews faster
I’d validate the support-team pattern data before doing GM interviews, not after, it would’ve focused my first round of interviews faster

Another CF Design Case Study
Currently locked, due to NDA.
Cart Page Redesign
Reducing decision fatigue by cutting 5 choices to 1

Next Case Study ->






