CITY FEED WEBSITE
E-commerce for urban shoppers
City Feed & Supply is a bustling market and cafe in the Jamaica Plain neighborhood of Boston. I developed an e-commerce concept to improve the shopping experience for customers without compromising City Feed’s community-oriented identity.
The problem
City Feed customers are rarely shopping for more than a small basket’s worth of items.
City Feed is an anchor institution of Jamaica Plain, and is loved by its customers. But waiting in line to pay for groceries—especially during peak hours when cashiers also juggle coffee and sandwich orders—can take longer than the process of shopping itself.
Providing customers the option to browse, order, and pay for their groceries online in advance of their visit could ease congestion in the store and result in happier customers and staff. By stopping short of offering home delivery, my solution could be implemented without major changes to current business operations.
Approach
With an emphasis on addressing information architecture to ensure that the market’s large selection of products could easily browsed and selected, I designed a medium-fidelity prototype of an e-commerce portal.
My thinking was guided by a few questions. Who were City Feed’s customers? What were their needs? How could e-commerce strengthen a neighborhood business?
Getting to know City Feed
I sketched a map of City Feed’s small storefront to help me visualize how it was organized.
I began my project by visiting the shop in person and observing the popular business in action.
Even at 3:00pm on a Tuesday, it was a hub of activity. At one point, the store became particularly congested when yoga classes at the studio directly above the store were letting out, or about to start.
Grocery shoppers at City Feed were often picking up a just few essentials—butter, a few greens, or some lemons. A high percentage of the customers had bike helmets, emphasizing the desire for quick, small-basket shopping.
The vast majority of shoppers took the same path through the store (see arrows on the map, right), visiting the produce section first and then entering the checkout line within a couple of minutes, ready to pay…only to find a long wait.
Questions sparked by contextual research
How might we…
…relieve the easily-congested checkout line?
As an organic grocery, deli AND cafe, all three types of customers were funneled into a single line that could quickly overwhelm the cashiers. The option to order online could ameliorate this challenge.
…preserve the communal in-store experience that customers value?
The store’s convivial atmosphere and convenient location meant that any digital solution I developed should preserve the in-store experience that was fundamental to City Feed’s identity.
Understanding urban shoppers
Affinity map of ideas shared in interviews.
My research so far pointed to a website that would allow customers to browse and order their groceries online—for pick-up rather than delivery.
Gathering qualitative data about how people currently go about shopping in physical stores would be critical to designing an online solution that worked for City Feed’s customers. I conducted user interviews focusing on people who shop organic in local groceries.
Quotes from user interviews
“Sometimes it’s difficult to find something, especially if it’s something out of the ordinary like a sauce or a condiment and I’m like where the heck?”
“I like to buy one item I’ve never tried before, which incentivizes me to go down all the different aisles. But if I don’t have time to do that, I’ll go to the frozen aisle to find something new.”
User pain points and behaviors
Where’s the Sriracha?
In physical stores, certain products—like condiments—were inconsistently located. Would hot sauce and pickled ginger be found in the international aisle, or near the ketchup and mustard?
An online store could solve for this by putting certain items in multiple locations.
Frozen-spiration
Users shopped with a list, but also budgeted for impulse buys during their visit. For several users, the Frozen section was a place to experiment with a new meal they’d never tried before.
Our website needed to offer inspiration and the invitation to try something new.
Almost forgot tea!
Users were reminded of items they needed while viewing a similar product from their list. For example, when users bought coffee and saw tea nearby, they’d be reminded that they should grab tea as well.
Suggesting "similar products” to customers could assist shoppers and drive sales.
Site map
To organize the major sections of my prototype, I started by creating a site map based on City Feed’s current website. Because their website was already fairly simple, there was room to integrate the key features of an online shop into the main navigate without the need for a completely separate website.
Early paper flows
Taking cues from other websites, my early sketches asked users to navigate through multiple pages of categories and then sub-categories before finally presenting them with individual products nested in that subcategory. Early tests of these screens indicated that users did not have the patience to click through so many screens to see specific products. How could we put products “within arms reach” of customers, as they actually are in the intimate physical space of City Feed?
1) User starts by choosing a top-level category (e.g. “Meat & Fish”).
2) User selects a sub-category (e.g. “Chicken”).
3) User selects individual product (e.g. “Chicken Sausages”).
“Flattening” product discovery
Based the feedback on my paper sketches, I adapted my site’s structure in order to present users with all products as soon as they entered the online store. To refine the results, users had the option to:
Sort products A-Z, by Price, etc.
Filter products by major categories using the left-side facet navigation.
Use the search bar to locate a specific product.
If a user saw what they needed right away, they could add it to their cart with a single click.
Card sorts for product categories
Similarity matrix shows the percentage (in the intersecting cell) of participants who grouped any 2 items together.
I conducted cart sorts using Optimal Workshop to see how people organized a sample of 100 City Feed products in a way that made sense to them.
Open and closed card sorts helped me develop a set of categories. There was agreement across particpants around produce, meat, dairy & eggs, but items like spices, seeds, condiments, and baking products were less consistently grouped. To address this, I turned to established online groceries for direction. Companies like Whole Foods and Food Lion placed most dry goods into the larger umbrella category of “Pantry,” and then broke this up into many smaller categories.
Fortunately, the web platform meant that we could locate certain products like hot sauces under “Sauces” as well as “Condiments,” so that people could find them through either path.
Refreshing the homepage
While researching City Feed, I had encountered a post on their Instagram advertising a tasting event, where they invited customers to try frozen pierogis and beers sold in their stores. Separately, I had heard in my interviews from several shoppers that they liked to look in the frozen aisle as a place to buy one thing they hadn’t tried before—a kind of “planned impulse purchase.”
I was inspired to introduce the concept of a rotating (monthly?) featured pairing of a beverage and a frozen/prepared meal or snack, as a way to offer a similar kind of inspiration to customers online. City Feed’s home page currently had large images of their products on a centered carousel, and so this provided an easy place to introduce the pairings to online shoppers.
A post on City Feed’s instagram inviting customers to a tasting of craft beer and pierogis.
Taking inspiration from their instagram post, I introduced the concept of a monthly recommended pairing of a frozen food and beverage.
User testing
Test scenario: You’re about to go to a yoga class at the studio above City Feed on Centre Street. You don’t feel like cooking tonight and you heard from a friend that you can now order groceries online from City Feed for pickup at their stores. You have some time on your hands before you leave your house, so you decide to order some items to pick up right after yoga.
Test results: In the version we tested, users did not have a way of re-discovering the store’s “Featured Food & Drink Pairing” if they had missed it on the homepage. In response, I re-configured the top level-navigation of the site to make room for a banner advertisement inviting users to view the pairing. In addition, users had trouble seeing the left-side facet navigation, and even when they did the filters didn’t feel “clickable.” Thus, I increased the visibility of the panel and converted the filters to checkboxes.
Before
After
Final mid-fidelity prototype
My final Axure prototype shows how a user would accomplish the following tasks:
Enter shopping portal and set your pickup location (Centre St).
Find product information for an Amy’s Frozen Burrito with Beans and Rice, and add 1 to shopping basket.
Read about February’s Featured Pairing, and add 1 Jaju Frozen Pierogi to shopping basket.
Remove the burrito from shopping basket and pay for the pierogis.