Trader Joe’s App
BUILDING AN APP FOR A POPULAR NEIGHBORHOOD GROCERY STORE.
BRAND
TRADER JOE’S
MY ROLE
UX DESIGN
PROGRAM
FIGMA, ADOBE XD
The Challenge
Frequent shoppers of Trader Joe’s know that the store has lots of seasonal items and different availability per store. Because of their wish to keep the stores at a certain size and keep it feeling like a small, neighborhood store, items often come and go quickly. Furthermore, Trader Joe’s has a large following of customers who thrive and find enjoyment in browsing shelves at the store. Whether it be to find new items or simply admire the details in package design and store signage, customers often find enjoyment shopping in-person. Due to the pandemic, the shopping experience that in the past used to be peaceful started to become stressful for many. Will the store be crowded? What if they don’t have the items I need?
Taking these into account, my main challenge was this:
How might I create a virtual Trader Joe’s shopping experience that mimics fun in-store browsing in order to provide an easier shopping experience to those who cannot or do not want to physically go into stores?
The Process
USER INTERVIEWS
To gather insight into general interest in a Trader Joe’s app and important features, I began with user interviews.
Would you use a Trader Joe’s app? What are your 3 main goals in using this app?
Target user group
Avid Trader Joe’s shoppers who are interested in ordering for grocery delivery and making the general shopping experience easier.
main INTERVIEW takeaways
100% of people want and would use a Trader Joe’s app. Only 71% currently use a similar app. In a Trader Joe’s app, people are looking for these features:
Delivery/ Curbside or Store Pickup
New Items
Availability of in-stock items per-store
Recipes
Item Reviews
Rewards
Shopping List
Fun games in-line with the quirky Trader Joe’s brand
WIREFRAMES
Item Availability per-Store
In my initial wireframe, I tried to take into account my user interviews and present key features in an easy-to-use manner. The main takeaway from my interviews was that customers want a way to see whether products are available in their store and what new items are available. To do this, I created a MY STORE tab. By selecting a store location, this will change the app’s information and show in-stock and out-of-stock items at the specific location chosen.
Additional wireframe features:
Fearless Flyer Easter Egg
Taking into account users’ wants for a fun game, a rewards system, and getting an additional perk that non-app users don’t get, I created a Fearless Flyer Easter Egg. The idea is that when people are scrolling through products, a Fearless Flyer will be hidden within a product photo. If the image is clicked, the user gets 10 extra rewards points. This is a fun way for users to scroll through and see items they otherwise might not have come across, which benefits both users and the client.
Wireframe Usability Testing
To test layout and basic functionality with users, I conducted user tests with my wireframe prototype. To test usability, I had participants complete a series of tasks.
Show me how you would add a Pumpkin-Ginger Hold the Cones! to your shopping list.
See which Fall items are out of stock.
Add the ingredients from the Beef Shawarma Bowl recipe to your shopping list.
Order your shopping list for store pickup.
MAIN TESTING TAKEAWAYS - ADJUSTMENTS
Browse - “Let inspiration find me”
From interviews, I came away with the following takeaways.
I had been trying to use phrasing in the app that would mimic shopping in person. However, I found that “Aisle” is confusing to users, because sometimes people don’t know what aisle a product is in. Change to “Department”
Browse as if in-store. Users wanted to “let inspiration find them” while shopping, as what happens often while shopping in person. Is there a way to add a feature that simulates a shopper walking into a store with no to-buy list?
Add a Wishlist / Save for Later feature for items that people don’t want to add to their current shopping list but want to potentially purchase in the future.
Add visual “1” to shopping list after an item is added to cart.
“5-Star Product” section for shoppers to see all items that have been rated 5 stars by other shoppers.
KEY FEATURES
Shop items in YOUR Store, Shareable Shopping Lists
From initial interviews, users wanted a way to see item availability in the store location they shop at. It’s not helpful if a TJs location across the country has the item you’re looking for, but the store you’re going to doesn’t! A key feature is being able to pick a specific store location, adapting the app information to stock at each specific store.
Additionally, users wanted a way to keep an ongoing shopping list. This shopping list has a couple important qualities:
Ability to share the shopping list with multiple people - this feature is helpful for users in multi-person households. Keeping a joint shopping list makes sure no items are forgotten on grocery trips or grocery orders.
Use for in-store shopping AND grocery orders - grocery ordering isn’t for everyone. If a user would rather go into a store to shop, the list functions as an in-store shopping list as well, with a checkmark function to indicate when an item has already been picked up.
ADDED FEATURE
Walk the Store
A big takeaway from usability testing was the importance of customers’ journeys through the store. Trader Joe’s is known for their hand-drawn, well-thought-out in-store signage. You will find a fun product name and price in big, bubbly letters, in addition to advice on how to consume it. Specific items are often featured whether they’re in season, new, or loved by customers.
How can I best mimic a shopper’s experience and journey in Trader Joe’s in an app?
To do this, I added a “Walk the Store” feature. When browsing ALL DEPARTMENTS, there is an option to sort the options as if you’re walking the store. Frequent shoppers of Trader Joe’s are very aware the layout of the store they shop at - this rarely changes. When picking this option, the app transforms into different shopping experience. Items are listed in the order they would be seen if a customer was walking up and down aisles of a store. Featured items are labeled as such.
HIGH FIDELITY MOCKUP
An Easier Way to Shop
Adjustments and Added Features
“Walk the Store”
5-Star Products
Wishlist / Saved for Later
“Department” instead of “Aisle”
Prototypes
To see prototype functionality, please click here.
The Take Away
Overall, this app was extremely fun and rewarding to create. Throughout this process, I aimed to create an app that makes the Trader Joe’s shopping experience easy for customers while still keeping the branding and vibe of the store.
As a frequent customer of Trader Joe’s I knew that the store was lacking in an app. Customers rely on the internet for Trader Joe’s recipes, Social Media for product reviews and to see new products, and some had to choose other grocery stores with grocery delivery during the pandemic. Having all these features in the same place would definitely benefit lots of customers and save time switching back and forth between different apps to make an easier, more organized shopping experience.
As I created this app, I had to take into account users who might not be as well acquainted with the Trader Joe’s layout, products, etc. rather than my own personal knowledge of the store. This led me to some important features such as my “Walk the Store” feature and the general layout of my browsing pages. By giving users multiple options of how to shop and browse, I think I made the app usable and helpful for all levels of Trader Joe’s shoppers.
Through wireframe usability testing, I was able to see which features users liked, which additional features users wanted implemented, and generally how easy the app was to navigate. I learned that by testing at the wireframe stage rather than at the mockup stage, people really have to rely on buttons and text, whereas people often rely on photos for navigation. This helped in testing usability in features and is a step I’d definitely implement in future projects.