Research
When researching for this app, I was interested in how grocery shopping habits had changed due to COVID. Surprisingly, aside from ongoing supply chain issues in some neighborhoods, most of the complaints I found from pre-2020 were similar to those after 2020.
Common complaints included:
• Stores can be crowded
• Items can be out of stock with no indication
• Items can be tough to find
• Shopping can take too much time
• Buyers forget to buy things
• Cost and limited funds
Research
When researching for this app, I was interested in how grocery shopping habits had changed due to COVID. Surprisingly, aside from ongoing supply chain issues in some neighborhoods, most of the complaints I found from pre-2020 were similar to those after 2020.
Common complaints included:
• Stores can be crowded
• Items can be out of stock with no indication
• Items can be tough to find
• Shopping can take too much time
• Buyers forget to buy things
• Cost and limited funds
Ideation
Compared to previous projects, this sitemap was much larger—it turned out to be the most complex I’ve made so far.
During a competitive audit, I noticed that a few indirect competitors offered recipe recommendations. I thought this would be useful for users who felt overwhelmed with meal planning. I also added a feature to allow users to add recipe ingredients to their cart directly from the recipe page—so they wouldn’t need to look up each item manually.
I wasn’t sure if this would be valuable to users, but during interviews, several participants expressed interest in the idea.
Ideation
Compared to previous projects, this sitemap was much larger—it turned out to be the most complex I’ve made so far.
During a competitive audit, I noticed that a few indirect competitors offered recipe recommendations. I thought this would be useful for users who felt overwhelmed with meal planning. I also added a feature to allow users to add recipe ingredients to their cart directly from the recipe page—so they wouldn’t need to look up each item manually.
I wasn’t sure if this would be valuable to users, but during interviews, several participants expressed interest in the idea.
Wireframing
Notable features to include:
• Show stock availability
• List the aisle number for products
• Indicate shelf height
• “Add” symbol for quick cart addition
• Estimated price calculator
• Prominent search bar
Paper wireframes:
Drawn on paper to quickly sketch core layout ideas.
Digital wireframes:
Built in Figma based on finalized layout decisions.
Wireframing
Notable features to include:
• Show stock availability
• List the aisle number for products
• Indicate shelf height
• “Add” symbol for quick cart addition
• Estimated price calculator
• Prominent search bar
Paper wireframes:
Drawn on paper to quickly sketch core layout ideas.
Digital wireframes:
Built in Figma based on finalized layout decisions.
Prototyping
After creating lo-fi prototypes, I conducted the first round of user interviews. I chose to test the designs without images, to see how users responded to layout and copy alone. This also helped evaluate basic accessibility for screen reader users.
In addition to in-person interviews, I also launched a short SurveyMonkey questionnaire with usability tasks.
🔗 SurveyMonkey Questionnaire
Prototyping
After creating lo-fi prototypes, I conducted the first round of user interviews. I chose to test the designs without images, to see how users responded to layout and copy alone. This also helped evaluate basic accessibility for screen reader users.
In addition to in-person interviews, I also launched a short SurveyMonkey questionnaire with usability tasks.
🔗 SurveyMonkey Questionnaire
Refining
Although I’d used Figma before, this was my first time sharing a prototype for remote feedback. I quickly ran into issues—for example, the “Play” button was technically placed outside the interactive frame, so testers didn’t know how to start the prototype.
Testing actual interactions forced me to learn more about Figma components, states, and modal interactions. This dramatically improved my design workflow in later projects. Since then, I’ve learned how to organize Figma files to make them easier for collaborators to understand.
Third image: Instead of creating a separeate confirmation frame or popup frame, I decided to make these modals
Refining
Although I’d used Figma before, this was my first time sharing a prototype for remote feedback. I quickly ran into issues—for example, the “Play” button was technically placed outside the interactive frame, so testers didn’t know how to start the prototype.
Testing actual interactions forced me to learn more about Figma components, states, and modal interactions. This dramatically improved my design workflow in later projects. Since then, I’ve learned how to organize Figma files to make them easier for collaborators to understand.
Third image: Instead of creating a separeate confirmation frame or popup frame, I decided to make these modals
Takeaways
Iterating on design is an ongoing process
I’d love to conduct additional usability tests when I have more time
I followed the Web Content Accessibility Guidelines, but I want to go deeper into accessibility best practices
Figma’s component and state systems are powerful—mastering them saves time and keeps files organized
Looking back, I now see many areas where I could have saved space or streamlined my layouts for clarity
Takeaways
Iterating on design is an ongoing process
I’d love to conduct additional usability tests when I have more time
I followed the Web Content Accessibility Guidelines, but I want to go deeper into accessibility best practices
Figma’s component and state systems are powerful—mastering them saves time and keeps files organized
Looking back, I now see many areas where I could have saved space or streamlined my layouts for clarity