Redesigning Centinela's e-commerce to convert browsers into buyers

Redesigning Centinela's e-commerce to convert browsers into buyers

See Website

Impact Created

50%

Cut checkout time by

via reservation timer, FY2024

$105

AOV Reached

up from $91 in FY2023

35%

Conversion lift

mobile-first approach, FY2024

Role

I 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. I 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. I also worked with the product manager to define requirements and prepare clear PRDs to support smooth handoff and execution.

Team

Team of 6- 1 product Designer (me), 1 Digital marketer, 1 Frontend developer, 1 Design Engineer, 2 Backend Developers, 1 Project manager

Time Taken

4-6 Months

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 Challenge

Centinela Feed was experiencing declining online sales despite strong in-store performance. As the UX/UI designer, I was brought in to diagnose UX issues and redesign critical pages to reverse the trend. The goal: boost e-commerce conversion rates by improving product discovery, reducing friction in the purchase flow, and better leveraging their local store advantage

Centinela Feed was experiencing declining online sales despite strong in-store performance. As the UX/UI designer, I was brought in to diagnose UX issues and redesign critical pages to reverse the trend. The goal: boost e-commerce conversion rates by improving product discovery, reducing friction in the purchase flow, and better leveraging their local store advantage

Understanding the Root Cause

To validate assumptions before designing anything, I ran a multi-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.


Six root causes emerged:

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

"The checkout is confusing- I couldn't figure out if I was getting it delivered or picking up."

→ Shipping vs. pickup was unclear at checkout — a direct cause of cart abandonment.

"I trust the staff at the store to recommend the right food. The website doesn't give me that."

→ The expert-staff advantage Centinela had in-store had zero digital presence. Product pages were spec sheets, not guidance.

"The site is really hard to use on my phone. I always end up switching to the desktop."

→ 60% of traffic was mobile, yet the mobile experience was the weakest surface.

"I didn't know about the Frozen Friday Day deals, I only found out because a staff member told me."

→ Promotional deals weren't surfaced online. Community loyalty wasn't translating to digital revenue.

What the data team's dashboards confirmed

Working with the data analysis team on Salesforce reports, three patterns emerged that the user interviews alone couldn't quantify:

1st

Cart abandonment spiked at the shipping/pickup selection step — confirming the checkout confusion pet owners described in interviews.

2nd

The product pages with no feeding guides or size filters had a 40% higher bounce rate than pages that did — validating the 'expertise gap' finding..

3rd

Mobile sessions had a 2.3× higher drop-off rate at category pages versus desktop — despite representing 60% of traffic.

Before/ After the Implementation

Before/ After the Implementation

Here is the before and after images of the website 's product page redesign project

Before

After

Foundation to Implementation

Foundation to Implementation

Foundation to Implementation

Here is the design process I setup to follow which lead us to successful implementation, step by step-

Step by step implemntation-

1

UX Audit + Problem Validation

Ran a multi-method audit combining user interviews, heuristic evaluation, Salesforce dashboard analysis, and session recordings. Validated all problem statements with the customer success team and data team before touching any designs.

2

Define + PRD

Wrote detailed PRDs for each of the 3 redesigned pages — product page, cart, and checkout. Each PRD included user stories, acceptance criteria, technical constraints, success metrics, and color/UI specifications for the redesign.

3

Sketch, Design + Test

Wrote detailed PRDs for each of the 3 redesigned pages — product page, cart, and checkout. Each PRD included user stories, acceptance criteria, technical constraints, success metrics, and color/UI specifications for the redesign.

4

Developer Handoff + Implementation Review

Provided design specs, annotations, and responsive breakpoint documentation. Ran weekly implementation reviews to ensure design fidelity and resolved technical constraints collaboratively — including a custom mobile nav pattern not supported by the existing design system

15+

Features Added

3+

Page Redesgined

1

Design system Scaled

Website Pages

See Website

If I were starting this project again, I'd push for a dedicated mobile usability test session earlier, before the design phase, not after. We discovered the mobile nav collapse issue during implementation review, which added two weeks. Earlier mobile-first prototyping would have surfaced sooner.

If I were starting this project again, I'd push for a dedicated mobile usability test session earlier, before the design phase, not after. We discovered the mobile nav collapse issue during implementation review, which added two weeks. Earlier mobile-first prototyping would have surfaced sooner.

If I were starting this project again, I'd push for a dedicated mobile usability test session earlier, before the design phase, not after. We discovered the mobile nav collapse issue during implementation review, which added two weeks. Earlier mobile-first prototyping would have surfaced sooner.

I'd also instrument more granular analytics before the redesign, page-level heatmaps and scroll depth data would have made the before/after impact story sharper. The Salesforce dashboards were powerful, but page-level behavioral data would have let us prove causality, not just correlation.

I'd also instrument more granular analytics before the redesign, page-level heatmaps and scroll depth data would have made the before/after impact story sharper. The Salesforce dashboards were powerful, but page-level behavioral data would have let us prove causality, not just correlation.

The project reinforced something I'll carry forward: the biggest design wins on this project weren't visual, they were structural. Moving the deals module, adding the pickup toggle, surfacing stock availability. Conversion design is often about removing friction in the right order, not adding features.

The project reinforced something I'll carry forward: the biggest design wins on this project weren't visual, they were structural. Moving the deals module, adding the pickup toggle, surfacing stock availability. Conversion design is often about removing friction in the right order, not adding features.

Reflections+ Learnings

Reflections+ Learnings

What I'd do differently

What I'd do differently

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