Trader Joe's App
Trader Joe's App
Meal Planning Made Effortless 🍳
Client
Client
Client
Pratt IXD Project,
Lead Product Designer
Pratt IXD Project,
Lead Product Designer
Pratt IXD Project,
Lead Product Designer
Team
Team
Team
Wendy Li,
Aireen Deshmukh
Wendy Li,
Aireen Deshmukh
Wendy Li,
Aireen Deshmukh
Timeline
Timeline
Timeline
2 months
(Sept - Dec 2024)
2 months
(Sept - Dec 2024)
2 months
(Sept - Dec 2024)
Skills
Skills
Skills
Interaction Design,
User Research
Interaction Design,
User Research
Interaction Design,
User Research
The Challenge
Trader Joe’s is a popular grocery brand, but its limited locations and lack of online services make it inaccessible for busy professionals with tight schedules. These users value convenience but also prefer high-quality products and enjoy meal planning.
The goal:
How might we create an app for Trader Joe’s that enhances grocery planning for busy professionals?
The Solution ✨
Introducing the Trader Joe’s Grocery App
An app that empowers users to efficiently plan meals, share lists, and explore recipes tailored to their dietary needs.
The app integrates the familiar and friendly branding of Trader Joe’s, while addressing users’ pain points around time, motivation, and convenience.
01
Meal Planning Made Simple
Browse personalized recipes, auto-generate ingredient lists, and sync seamlessly with shopping lists
02
Collaborative Shopping Lists
Create shareable shopping lists that sync in real-time with item availability at stores near you
03
Enhanced Accessibility
Easily see if all ingredients are available for delivery or pickup at a store near you
The Impact:
40+ screens
Designed and validated with 20+ usability tests
100%
User satisfaction rate for new app and features
100%
User satisfaction with brand identity
the current state of things
What are competitors doing?
We analyzed grocery apps like Instacart, Weee!, Amazon Fresh, and Walmart Grocery. While these platforms excel in ease of delivery and pickup options, they lack:
Personalization for dietary and schedule needs.
Efficient meal planning tied to inventory.
Shopping list collaboration & planning tools.
the current state of things
What are competitors doing?
We analyzed grocery apps like Instacart, Weee!, Amazon Fresh, and Walmart Grocery. While these platforms excel in ease of delivery and pickup options, they lack in personalization for dietary and schedule needs. Efficient meal planning tied to inventory. As will as collaborative planning tools.
competitive analysis
understanding user needs
What do users need?
We conducted user interviews, contextual inquiries, and in-store observations with busy working professionals.
Key Insights:
94% of users review notes or lists while shopping.
Common pain points include forgetting items, managing time, and meal planning for balanced diets.
Users preferred Trader Joe’s but found it inaccessible due to location or time constraints.
making sense of it all
Problem → Solution
Using all of our user insights I categorized each pain point into shared problem space areas such as "Realization for need of groceries and meal ideas". Using these user insight categories we brainstormed solutions for each problem and categorized solutions based on physical store interactions, digital interactions, and key user needs.
making sense of it all
Problem → Solution
Using all of our user insights I categorized each pain point into shared problem space areas such as "Realization for need of groceries and meal ideas". Using these user insight categories we brainstormed solutions for each problem and categorized solutions based on physical store interactions, digital interactions, and key user needs.
making sense of it all
Problem → Solution
Using all of our user insights I categorized each pain point into shared problem space areas such as "Realization for need of groceries and meal ideas". Using these user insight categories we brainstormed solutions for each problem and categorized solutions based on physical store interactions, digital interactions, and key user needs.
Mental Model Snippet
Mental Model Snippet
Mental Model Snippet
Full Mental Model
Full Mental Model
user personas
Who is a typical user?
We wanted to form a deeper understanding of our users' goals, needs, and behaviors. So, we created two personas based on user interviews and surveys, an online shopper and an in-store shopper. We used these personas whenever we wanted to step out of ourselves and reconsider our initial ideas from the perspectives of our target audience.
user personas
Who is a typical user?
We wanted to form a deeper understanding of our users' goals, needs, and behaviors. So, we created two personas based on user interviews and surveys, an online shopper and an in-store shopper. We used these personas whenever we wanted to step out of ourselves and reconsider our initial ideas from the perspectives of our target audience.
mapping it all out
What is a typical journey?
Using our personas and problem space insights we mapped out a realistic User Journey Map for our two personas. These journey maps helped us identify the different stages our solutions could address and also the current pain points associated with typical user journeys.
defining the problem
Refine the Scope
From our research we identified that busy working professionals need a way to integrate meal planning and grocery shopping seamlessly into their busy lives without losing access to high quality products.
We prioritized three core solutions:
Meal Planning – recipes that seamlessly add to cart and grocery lists.
Collaborative Shopping Lists – easily sync with roommates or partners to plan ahead.
Location Based Accessibility – Find stores that have every cart item for efficient shopping.
where does it all go?
Site Map
With the main solutions in mind, we made sure that our users reach the checkout screen without any hiccups. So, we mapped multiple iterations of user journey map, to identify opportunities for improvement. We identified confusing and unnecessary steps and potential drop-off points in the flow. By eliminating these from the new design, we ended up with a much faster user journey experience that would contribute to conversion rates.
Final Site Map of App
Final Site Map of App
validating our ideas
Gallery Walk
To make sure that the site’s information architecture is aligned with user expectations, we conducted 6 in person design feedback sessions.
Our goal was to validate our key solutions, journey maps, and information architecture.
Gallery Walk Setup
Gallery Walk Setup
visualizing it all
Initial Sketches
I began the design process with low-fidelity sketches and wireframes. My sketches were based on the initial user interviews, the key solutions, and the Trader Joe's brand identity. They each pointed to the fact that there were too many distractions in the flow. We came back to the sketches throughout the entire design process to make sure that we don’t lose sight of our primary goals and ideas.
visualizing it all
Initial Sketches
I began the design process with low-fidelity sketches and wireframes. My sketches were based on the initial user interviews, the key solutions, and the Trader Joe's brand identity. They each pointed to the fact that there were too many distractions in the flow. We came back to the sketches throughout the entire design process to make sure that we don’t lose sight of our primary goals and ideas.
visualizing it all
Initial Sketches
I began the design process with low-fidelity sketches and wireframes. My sketches were based on the initial user interviews, the key solutions, and the Trader Joe's brand identity. They each pointed to the fact that there were too many distractions in the flow. We came back to the sketches throughout the entire design process to make sure that we don’t lose sight of our primary goals and ideas.
Initial Sketches
wireframes
Ideation + Creation
Using Figma, I translated my first sketches into low-fidelity wireframes. Then, I improved them by adding a few relevant stock images and copies provided by Trader Joe's branding. At this stage, the wireframes were defined enough for some user testing. Based on 8 tests, I made alternations and moved on to creating high-fidelity prototypes.
user personas
Who is a typical user?
We wanted to form a deeper understanding of our users' goals, needs, and behaviors. So, we created two personas based on user interviews and surveys, an online shopper and an in-store shopper. We used these personas whenever we wanted to step out of ourselves and reconsider our initial ideas from the perspectives of our target audience.
validation
Usability Testing
I created a fully-functional, high-fidelity prototype of the new flows using Figma. At the same time, we started recruiting subjects user testing who fit our criteria. We did 9 usability tests in the first round and 3 after iterating on the issues that we’ve identified.
sticking to the brand
Final UI Design
Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that’s aligned with the Trader Joe's brand and message, which is: “To be the best neighborhood grocery store”. We used stock images from Trader Joe's and matched any news graphics to same comic style to create a friendly vibe throughout the app.
sticking to the brand
Final UI Design
Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that’s aligned with the Trader Joe's brand and message, which is: “To be the best neighborhood grocery store”. We used stock images from Trader Joe's and matched any news graphics to same comic style to create a friendly vibe throughout the app.
sticking to the brand
Final UI Design
Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that’s aligned with the Trader Joe's brand and message, which is: “To be the best neighborhood grocery store”. We used stock images from Trader Joe's and matched any news graphics to same comic style to create a friendly vibe throughout the app.
digital accessibility
Product quality check
Throughout the design we validated our color palette, text size, and icon size with WCAG Level AA – Strong accessibility compliance.
At Level AA, criteria includes all that is outlined at Level A plus an extra 20 requirements. Examples include: Text and background must use good color contrast. For example, have a minimum level of contrast of at least 4.5 to 1.
🏁 With 100% user satisfaction we designed an accessible Trader Joe's app that allows our busy users to plan, share, & track their grocery shopping 🏁
Key Takeaways
It's important not to overload an app with too many features. Instead, focus on including only the essential, core functionality that best serves your target users. We also learned the importance of considering regulations like GDPR which ensures the applications we design are ethical and consider the needs and rights of our users. These regulations are in fact part of our responsibility as UX designers and researchers, and will equip us with design and content requirements.
Next Steps
There's an opportunity to enhance the interactions between features, as our app's functionality is highly interconnected. Improving how features interact with one another could streamline the grocery planning and shopping experience, making it more intuitive and efficient. Further testing would help identify any friction points and ensure that the app is not only functional but also delivers a seamless, enjoyable experience for users.
Other Projects
Copyright © 2025 Manvi Tandon
Copyright © 2025 Manvi Tandon
Copyright © 2025 Manvi Tandon
Copyright © 2025 Manvi Tandon