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 ->

Next Case Study ->

Create a free website with Framer, the website builder loved by startups, designers and agencies.