Project summary

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.

Tools

Axure

Figma

miro.

optimal workshop.

Group 1252.png

Trader Joe's 

TJS facade.png
"I would NEVER shop at a Trader Joe's in NYC, especially during Covid. It's just too crowded."
MacBook - 5 (2).png

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.

trader-joes-logo.png

From these interviews I was able to aggregate over 100 insights. I plugged those into Miro and began to synthesize the data.

Group 1.png

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

 
Frame 2.png

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.

Ramy%20Hesh%20(1)_edited.png
  • 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

Melanie%20(1)_edited.png

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.

  • Safeway

  • Whole Foods / Amazon

  • Instacart 

  • Fresh Direct 

Frame 1 (4).png
 

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:

Search directly

Users searched items on their grocery list and added to cart.

Suggestions

Users added items from the suggestions based on their past purchases.

Shopping History

Users went directly to their history and added items from there.

Browse

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.
 
dendrogram.png

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.

Group 72.png

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

Frame 1 (5).png

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.

Frame 2 (1).png

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.
Group 70.png

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.

Screen Shot 2021-04-09 at 12.54 1.png
 
Page 1; nothing open.png

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.

Competitor's:

Group 43.png
Group 42.png

My design iterations:

Group 55.png
Group 54.png
Group 68.png

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.

Group 69.png

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

Group 45.png
Group 46.png
Group 47.png
 

Reflections

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