Trader Joes is a chain grocery store. They are known for their reasonable prices, fun atmosphere, ethical practices, familiar layout, delicious brand treats, and happy, friendly staff. Basically, it’s the (more ethical) Disneyland for adults.
When Covid 19 hit, die hard Trader Joesians (a term I made up) lined up around the block in the rain, sleet or snow to shop their favorite store, social distance style. But, because they don’t offer online grocery delivery, those who are high-risk or disabled had to stop shopping there because it was just too risky.
So, I created a virtual grocery shopping experience for Trader Joe's that solved this problem.
"I would NEVER shop at a Trader Joe's in NYC, especially during Covid. It's just too crowded."
Ok, so why don't they offer delivery?
Well, as you can imagine many people have asked before, and this was their reply.
“Creating an online shopping system for curbside pickup or the infrastructure for delivery, it's a massive undertaking,” he explains. “It's something that takes months or years to plan, build and implement and it requires tremendous resources. Well, at Trader Joe's, the reality is that over the last couple of decades we've invested those resources in our people rather than build an infrastructure that eliminates the need for people.”
It really is hard not to love them when I read answers like that, and this; “Instead of passing along unsustainable cost increases to our customers, removing delivery will allow us to continue offering outstanding values—quality products for great everyday prices, and to make better use of valuable space in our stores.”
It’s clear Trader Joe's cares about their users and their employees, and considered that when they decided to opt out of delivery. So, fair reasoning, but the need remains for the users.
Getting to know the user.
What I wanted to know when creating this online platform was how people shopped for their groceries online, what platforms they used, and what they liked and disliked about them.
Then, I wanted to interview Trader Joe's customers to learn more about TJ's distinguished them from other grocery stores. What made waiting in line worth it for them? My goal was to highlight these features in this platform.
From these interviews I was able to aggregate over 100 insights. I plugged those into Miro and began to synthesize the data.
From those interviews, I was able to synthesize the data and come up with the following “I statements" about the users.
I like discovering new products
I am organized
I want the best price
I don’t want to be exhausted searching
I need convenience
Covid changed my shopping habits
I love grocery shopping
I care about my health
I am particular about the products I buy
Ramy and Melanie
After synthesizing all my insights, I developed two proto-personas. Both are Trader Joe's customers who's shopping habits have been deeply influenced by Covid-19.
This is Ramy
Ramy is my primary persona.
Lives in a busy city where the closest Trader Joe's is two trains away
Likes Trader Joe’s products and quality
Has a handful of their products on his weekly shopping list
Will go out of his way to shop at Trader Joe’s despite the inconvenience
Maintains a tight budget
Is very organized and likes to plan his meals for the week on the weekends
Knows exactly what he wants when he goes shopping
Is often inspired for new recipes by products he discovers at Trader Joe’s
This is Melanie.
Melanie is my secondary persona.
Lives with her small children and her elderly mother, so stopped shopping at TJ's after Covid hit
Entire family eats vegetarian
Uses shopping with her children as an opportunity to educate them and bond with them
Enjoys the shopping experience with her children and finding ideas for new recipes together
Shopped at Trader Joe’s because price is extremely important, as well as the quality of the food
Prefers Trader Joe’s because it’s an ethical company
Information architecture among direct competitors
Because the information architecture was the primary focus in this project I began by analyzing the IA of Trader Joe's direct competitors.
Whole Foods / Amazon
I then conducted a contextual inquiry to see how users navigated these sites and created a user flow based on this data. Users found items based on these four categories:
Users searched items on their grocery list and added to cart.
Users added items from the suggestions based on their past purchases.
Users went directly to their history and added items from there.
Users browsed for items via the global and secondary navigation.
In my interviews I learned that people who shop at Trader Joe's find their items a little differently than those who shop at competitors' stores. People who shop at Trader Joe's really appreciate that the layout is VERY similar in every store, so that no matter what location they shopped at, they could find the ingredients they needed. The continuity of the layout makes it so users can reliably shop by the layout of the store. They even group their items on their shopping list by layout.
I kept that in mind while conducting my card sort.
I did a card sort with 10 participants. I didn't exclusively have users who shopped at Trader Joe's. This contributed to some confusing results in the card sort.
Some people sorted items very similarly to the IA of competitor's sites.
Some people sorted them based on how things are grouped inside of Trader Joe's.
I realized I needed to accommodate both groups. This would benefit users who were familiar with the Trader Joe's layout, and the new customers who weren't.
So, I created a site map based on the card sort.
But I was still missing something for the Trader Joe's customers who shopped by the aisle...
Then it hit me...a virtual store! So I started sketching
I began creating low-fidelity wire-frames in Axure.
The goal was to create screens that would seamlessly incorporate e-commerce into the existing website, and allow for a familiar layout that resembled many of the competitor's site. Using the card sorting results, and Trader Joe's style sheet, I was able to create these low-fidelity wire-frames.
I used Axure's dynamic pannel feature to create a virtual store.
This way, Melanie and Ramy could explore the store, discover new products and shop by the familiar Trader Joe's format.
The key for this component was to replicate the layout of the store.
The user also needed to be able to easily add items to their cart.
Then I started on the visual design.
Then I moved into Figma to design the full interface. It was important that the virtual store seamlessly integrated with Trader Joe's current interface design. Trader Joe's has a signature look that I wanted to replicate, but I needed to source from other competitors to see what the standard was for major components.
My design iterations:
This was the most intuitive spot to add "Shop" into the existing Trader Joe's site.
These items feature boxes make their page beautifully visual. I wanted to continue to use this component for featured content.
This basket was the cleanest option for this component, while also representing the cartoonish style of Trader Joe's.
Many of the competitors offered a shopping history once logged in so the user could easily add previous items to their cart.
Then I built out a virtual shopping browse user flow
I conducted usability testing on this initial prototype, but not enough to have significant data.
I should have narrowed my usability testing subjects to Trader Joe's customers, and not just those who shopped for groceries online. The Trader Joe's store is so unique in how they group their items, I think not focusing on their customers influenced the data.
Over-all I really enjoyed this project, especially working in Axure.
Moving forward with this project will mean more user testing, contextual inquiries and usability testing on the current design.