Role | UX Lead
B2B2C
Overview
The primary purpose of this B2B2C web app was to provide a solution for efficiently increasing inventory to a large set of independent retailers specializing in pet food and supplies. When PetFlow merged with Phillips Pet Food and Supplies, one of the nation’s largest pet supply distributors, there was an immediate need to leverage PetFlow’s design and technology strengths to provide direct benefits to the distributor’s main customer base. These customers were primarily comprised of independent pet food and supply shops, who often struggle to maintain brick-and-mortar businesses in the landscape of an ever increasing competitive online market.
Initial Research
When we asked independent retailers what they felt they needed to help improve their own sales, we were overwhelmingly met with the same response. Out of 45 respondents – who categorized themselves as independent small businesses – 85% said they were regularly losing sales for not having enough variety in their shop to offer their customers. Less than half of these respondents also had an online shop to accompany their brick-and-mortar.
In order to help close the gap, we launched a digital platform to allow retailers to special order items for their customers in-store, without the hassle and extra expense of physically carrying additional products. All they would need is an active account with Phillips and a web-enabled device for online access. From a business sense, not only were these small retailers able to offer more products to their own customers, but it also provided an opportunity for Phillips Pet Food and Supplies to distribute more items, yielding to higher profits.
The Inventory Issue
In order to design an experience which meets the needs of independent pet shop retailers, we expanded our initial research pool and asked 200 brick-and-mortar retailers (Phillips Pet Food and Supplies customers) which item categories their customers inquired about most which they did not have enough space for in their physical shops. These results informed which product categories we prioritized within the Endless Aisles platform.
The Retailer Landscape
We wanted to learn a little more about the businesses we were planning to help so we asked the same group of 200 respondents whether they had physical shops exclusively or if they had both online and physical shops.
This information helped us decide which retailers would benefit the most from the first version of Endless Aisles. Although 38% of independent retailers currently had both an online shop and physical store, we decided to primarily focus on the value we could provide to retailers without an online shop. Integrating to existing e-commerce stores would prove to be relatively straightforward, since Shopify was the predominant e-commerce platform among our online retailers.
Endless Aisles
A simple and convenient web app designed for retailers to instantly get items special ordered directly to customers, boosting their variety by thousands
-
The Problem
Most independent pet supply retailers are frequently short on square footage in their brick-and-mortars but want to offer their customers more product variety without compromising on physical shop space.
-
The Solution
Endless Aisles was designed to give pet supply retailers the ability to make a sale without physically stocking thousands of additional items. Orders can be shipped directly to customers or be picked up in the store.
Personas
After conducting several rounds of research, we settled on two main independent retailer personas. These two user types allowed us to focus on the features that would meet the needs of Phillips Pet Food and Supply customers (the independent retailers) while also providing a rich opportunity for increased distributor and retail product sales.
Limiting personas helped prevent scope expansion as this platform was the first version of the launched product. Also, we were able to more efficiently meet the needs of our retailer users without compromising any core Phillips Pet Food and Supply business benefits.
Persona A - The Solopreneur
Persona B - The Can-Do Shop Owner
Defining How It Works
To provide a clearer understanding of how Endless Aisles would actually function, I developed a flowchart to visualize the UX. The chart below outlines how a retailer would typically utilize the Endless Aisles platform in an in-store scenario. This visual representation of the user experience proved instrumental in fostering alignment among stakeholders and team members, while also offering an opportunity to address and resolve potential conflicts before the actual design and development processes began.
In-Store Platform Flowchart
Initial Sketches
The in-store experience
Next, we conducted a series of collaborative sketch sessions to explore interface design concepts. Recognizing that effective design emerges from diverse perspectives, developers, designers, and product managers all contributed by sketching their ideas. As the design lead for this project, I synthesized the most promising concepts from the session into a more refined and comprehensive version.
In-Store Platform Wireflow
We underwent several rounds of user testing with a sample of our retailers to validate the overall UX flow. Once we had confidence in our approach, I made a flowchart using the wireframes to provide a comprehensive overview of the various screens and interactions. This documentation was a great reference to help bridge any gaps between stakeholders and the design and development teams.
Defining Additional Views
Sketches
We wanted to make sure we had a well-defined scope of work beyond the overall UX shown above. That meant that we needed to identify all additional views essential to this first iteration of Endless Aisles. After a few sketch sessions, we felt that our team had achieved a consensus around what needed to be built. The following sketches are some views I sketched to show how we might support the needs our retailers. Shown below are more detailed views from a retailer-perspective when using the product.
The Endless Aisles dashboard features the most important information to users at-a-glance. Total revenue, margin, orders and orders shipped are all conveniently located at the top. A dropdown at the upper right corner allows the user to filter the totals view for different ranges of time.
These mobile screens show various team settings views which enable the store administrator to create or remove team members, upload profile images, or view/manage team members by store and location.
The admin view for team member management allows users to add or remove a team member and change permissions. The admin user can filter to view team members by store or collectively.
The Endless Aisles product detail page includes images of the product, the price, and a succinct description of the item in a flexible layout that is easy to visually scan.
The product list page on mobile needed to maintain a visual balance between the product images and their respective titles. This view displays search results on a mobile device for Blue Buffalo pet food products.
The order detail page outlines important information such as the customer's information, the items they ordered, the status of the order, and the amount of margin earned on each item.
-
“It’s so easy for me to order something that I don’t normally stock in-store. I can finally say yes, I can order that for you.”
— Jennifer, Hound About Town
-
“Endless Aisles allows us to have more products on our website than ever before.”
— Gary, Pets On Broadway
-
“Endless Aisles is easy to use and fulfilling orders only takes a few clicks!”
— Ryan, All Is Well Pets
-
Access to the whole catalog for our online shop and physical store has been a game-changer for us.”
— Alex, CB Pets