GROCER
GROCER
Produce Price Comparison iOS App
Produce Price Comparison iOS App
Produce Price Comparison iOS App
Role: Individual, UX/UI Designer
Timeline: 4 weeks
Tools: Figma, Marvel
Role: Individual, UX/UI Designer
Timeline: 4 weeks
Tools: Figma, Marvel
Role: Individual, UX/UI Designer
Timeline: 4 weeks
Tools: Figma, Marvel
Role: Individual, UX/UI Designer
Timeline: 4 weeks
Tools: Figma, Marvel
Role: Individual, UX/UI Designer
Timeline: 4 weeks
Tools: Figma, Marvel
Problem
Problem
Problem
Problem
How might we design an app that allows produce shoppers to find the best prices at their local grocery stores?
How might we design an app that allows produce shoppers to find the best prices at their local grocery stores?
How might we design an app that allows produce shoppers to find the best prices at their local grocery stores?
Solution
Solution
Solution
Solution
Solution
From research to prototyping, I designed an app called Grocer where produce shoppers can create a shopping list, select the specific type of produce, and compare the total price of the entire shopping list at local markets. This app will help users save time and money. Many people shop for produce multiple times a week and the prices for produce are constantly changing. Grocer will keep produce prices updated with data collected directly from the markets and from user input. Users will be able to share deals with others as well.
From research to prototyping, I designed an app called Grocer where produce shoppers can create a shopping list, select the specific type of produce, and compare the total price of the entire shopping list at local markets. This app will help users save time and money. Many people shop for produce multiple times a week and the prices for produce are constantly changing. Grocer will keep produce prices updated with data collected directly from the markets and from user input. Users will be able to share deals with others as well.
RESEARCH
RESEARCH
RESEARCH
RESEARCH
RESEARCH
Secondary Research & Competitive Analysis
Secondary Research & Competitive Analysis
Research & Competitive Analysis
I started this project with secondary research and got a better understanding of the produce market, user motives for buying produce, and the future of the industry. There are currently no price comparison apps specific to produce but I was able to do a competitive analysis of a grocery price comparison app, an app to find coupons and deals, and other grocery shopping apps. Through this analysis, I was able to pinpoint the threats and opportunities so that Grocer can better solve the problem of finding the best produce pricing.
I started this project with secondary research and got a better understanding of the produce market, user motives for buying produce, and the future of the industry. There are currently no price comparison apps specific to produce but I was able to do a competitive analysis of a grocery price comparison app, an app to find coupons and deals, and other grocery shopping apps. Through this analysis, I was able to pinpoint the threats and opportunities so that Grocer can better solve the problem of finding the best produce pricing.
Interviews
Interviews
Interviews
Interviews
Interviews
After getting an overview on the produce industry through research, I conducted 1:1 interviews with 4 participants who have experience with produce shopping. The interviews revealed the users' values, experiences, and insights into the challenges they've faced. Below are the main needs and wants of users in order to find the best produce deals.
After getting an overview on the produce industry through research, I conducted 1:1 interviews with 4 participants who have experience with produce shopping. The interviews revealed the users' values, experiences, and insights into the challenges they've faced. Below are the main needs and wants of users in order to find the best produce deals.
After getting an overview on the produce industry through research, I conducted 1:1 interviews with 4 participants who have experience with produce shopping. The interviews revealed the users' values, experiences, and insights into the challenges they've faced. Below are the main needs and wants of users in order to find the best produce deals.
- Ability to differentiate between organic vs non-organic
- Up-to-date pricing and locations of stores
- Ability to compare pricing of produce items between stores
- Seasonal info (produce is cheaper and tastes better in season)
- Be able to shop entire shopping list at one store even if it costs a little more
- Ability to share deals with others
- Incentives for contributing pricing
- Food safety warnings
- Ability to differentiate between organic vs non-organic
- Up-to-date pricing and locations of stores
- Ability to compare pricing of produce items between stores
- Seasonal info (produce is cheaper and tastes better in season)
- Be able to shop entire shopping list at one store even if it costs a little more
- Ability to share deals with others
- Incentives for contributing pricing
- Food safety warnings
Define
Define
Define
Define
Define
I developed two personas based on my research and interview findings to better empathize with the types of users who shop for produce. The two main target audiences include users who use produce to fight disease and stay healthy and users who use produce for daily meals.
I developed two personas based on my research and interview findings to better empathize with the types of users who shop for produce. The two main target audiences include users who use produce to fight disease and stay healthy and users who use produce for daily meals.
Business, User & Technical Goals
Business, User & Technical Goals
Business, User & Technical Goals
Business, User & Technical Goals
Business, User & Technical Goals
After listing out all the possible features for Grocer, I created a venn diagram of the business and user goals to see which features would be a priority.
After listing out all the possible features for Grocer, I created a venn diagram of the business and user goals to see which features would be a priority.
After listing out all the possible features for Grocer, I created a venn diagram of the business and user goals to see which features would be a priority.
Journey Map
Journey Map
Journey Map
Journey Map
Journey Map
I created a journey map to better visualize the process that users go through as they use Grocer to find the best produce pricing. I was able to get into the minds of users and understand their motivations, needs and pain points. The journey map is a great way to see which features would be the most helpful in solving the users' problems.
I created a journey map to better visualize the process that users go through as they use Grocer to find the best produce pricing. I was able to get into the minds of users and understand their motivations, needs and pain points. The journey map is a great way to see which features would be the most helpful in solving the users' problems.
INFORMATION ARCHITECTURE
INFORMATION ARCHITECTURE
INFORMATION ARCHITECTURE
INFORMATION ARCHITECTURE
Sketches of Low Fidelity Wireframes
Sketches of Low Fidelity Wireframes
Sketches of Low Fidelity Wireframes
Sketches of Low Fidelity Wireframes
Sketches of Low Fidelity Wireframes
After determining the must-have features for Grocer, I sketched out wireframes for the main screens. This gave me a better idea of what steps users would take to reach their goal.
After determining the must-have features for Grocer, I sketched out wireframes for the main screens. This gave me a better idea of what steps users would take to reach their goal.
INTERACTION DESIGN
INTERACTION DESIGN
INTERACTION DESIGN
INTERACTION DESIGN
INTERACTION DESIGN
User Flow
User Flow
User Flow
User Flow
I created a user flow based on my sketches to make sure that all the features were included for a seamless flow.
I created a user flow based on my sketches to make sure that all the features were included for a seamless flow.
High Fidelity Wireframes + Testing
High Fidelity Wireframes + Testing
High Fidelity Wireframes + Testing
High Fidelity Wireframes + Testing
High Fidelity Wireframes + Testing
I created high fidelity wireframes based on the sketches and added the UI elements. Since Grocer is a food app, I chose a vibrant green as the main color as green signifies nature, health, and freshness. The logo is an image of fruits and vegetables in a shopping cart so that users can get an idea right away that this app is about produce and shopping. I chose a really simple font called SF UI Display that is easy to read for Grocer's clean and modern brand.
I created high fidelity wireframes based on the sketches and added the UI elements. Since Grocer is a food app, I chose a vibrant green as the main color as green signifies nature, health, and freshness. The logo is an image of fruits and vegetables in a shopping cart so that users can get an idea right away that this app is about produce and shopping. I chose a really simple font called SF UI Display that is easy to read for Grocer's clean and modern brand.
I created high fidelity wireframes based on the sketches and added the UI elements. Since Grocer is a food app, I chose a vibrant green as the main color as green signifies nature, health, and freshness. The logo is an image of fruits and vegetables in a shopping cart so that users can get an idea right away that this app is about produce and shopping. I chose a really simple font called SF UI Display that is easy to read for Grocer's clean and modern brand.
I put together a prototype from the initial high fidelity wireframes to test out the ease of usability of Grocer. I created 2 tasks for the users. Below are the challenges users faced/suggestions and the changes that were made:
I put together a prototype from the initial high fidelity wireframes to test out the ease of usability of Grocer. I created 2 tasks for the users. Below are the challenges users faced/suggestions and the changes that were made:
- Change wording of "Shop at Stater Bros" to "Check Off List at Stater Bros" since it's confusing because it seems like the button is taking the user to Stater Bros' online website to shop. Change the navigation SHOP to IN STORE so that users know to check off their shopping list when they get to the store.
- Make onboarding screens swipable and include an option to skip screens.
- Place arrows to go back to previous screen where it's necessary.
- Show how much a produce item costs at different markets.
- Rename "Shopping List" to "Produce Shopping List" so that users don't add other types of items to the list.
- Make whole area clickable for filter options.
- Change wording of "Shop at Stater Bros" to "Check Off List at Stater Bros" since it's confusing because it seems like the button is taking the user to Stater Bros' online website to shop. Change the navigation SHOP to IN STORE so that users know to check off their shopping list when they get to the store.
- Make onboarding screens swipable and include an option to skip screens.
- Place arrows to go back to previous screen where it's necessary.
- Show how much a produce item costs at different markets.
- Rename "Shopping List" to "Produce Shopping List" so that users don't add other types of items to the list.
- Make whole area clickable for filter options.
- Change wording of "Shop at Stater Bros" to "Check Off List at Stater Bros" since it's confusing because it seems like the button is taking the user to Stater Bros' online website to shop. Change the navigation SHOP to IN STORE so that users know to check off their shopping list when they get to the store.
- Make onboarding screens swipable and include an option to skip screens.
- Place arrows to go back to previous screen where it's necessary.
- Show how much a produce item costs at different markets.
- Rename "Shopping List" to "Produce Shopping List" so that users don't add other types of items to the list.
- Make whole area clickable for filter options.
- Change wording of "Shop at Stater Bros" to "Check Off List at Stater Bros" since it's confusing because it seems like the button is taking the user to Stater Bros' online website to shop. Change the navigation SHOP to IN STORE so that users know to check off their shopping list when they get to the store.
- Make onboarding screens swipable and include an option to skip screens.
- Place arrows to go back to previous screen where it's necessary.
- Show how much a produce item costs at different markets.
- Rename "Shopping List" to "Produce Shopping List" so that users don't add other types of items to the list.
- Make whole area clickable for filter options.
Steps/Info for Task #1
Steps/Info for Task #1
1. User's favorite markets are Target and Trader Joe's
2. Title is List for Mom
3. Add bananas and tomatoes to the shopping list
4. Choose 3 organic bananas and 3 roma tomatoes
5. User already has an account
6. Shop at closest market
7. Check off shopping list and verify pricing
1. User's favorite markets are Target and Trader Joe's
2. Title is List for Mom
3. Add bananas and tomatoes to the shopping list
4. Choose 3 organic bananas and 3 roma tomatoes
5. User already has an account
6. Shop at closest market
7. Check off shopping list and verify pricing
1. User's favorite markets are Target and Trader Joe's
2. Title is List for Mom
3. Add bananas and tomatoes to the shopping list
4. Choose 3 organic bananas and 3 roma tomatoes
5. User already has an account
6. Shop at closest market
7. Check off shopping list and verify pricing
- User's favorite markets are Target and Trader Joe's
- Title is List for Mom
- Add bananas and tomatoes to the shopping list
- Choose 3 organic bananas and 3 roma tomatoes
- User already has an account
- Shop at closest market
- Check off shopping list and verify pricing
Steps/Info for Task #2:
Steps/Info for Task #2:
1. Check pricing of organic bananas at different markets
2. Browse produce
3. Add apples
4. Filter options Unit Price: Low to High
5. Add Fuji Apples
6. Compare pricing of entire shopping list
7. Shop where entire list is cheapest
1. Check pricing of organic bananas at different markets
2. Browse produce
3. Add apples
4. Filter options Unit Price: Low to High
5. Add Fuji Apples
6. Compare pricing of entire shopping list
7. Shop where entire list is cheapest
1. Check pricing of organic bananas at different markets
2. Browse produce
3. Add apples
4. Filter options Unit Price: Low to High
5. Add Fuji Apples
6. Compare pricing of entire shopping list
7. Shop where entire list is cheapest
- Check pricing of organic bananas at different markets
- Browse produce
- Add apples
- Filter options Unit Price: Low to High
- Add Fuji Apples
- Compare pricing of entire shopping list
- Shop where entire list is cheapest
CONCLUSION
CONCLUSION
CONCLUSION
CONCLUSION
CONCLUSION
What I Did
What I Did
What I Did
What I Did
What I Did
- Secondary research
- Competitive analysis
- Interviews
- Persona creations
- Business, user & technical goals
- Journey map
- Sketches of low fidelity wireframes
- User flow
- High fidelity wireframes
- Usability testing of the high fidelity prototype
- Update with changes
- Secondary research
- Competitive analysis
- Interviews
- Persona creations
- Business, user & technical goals
- Journey map
- Sketches of low fidelity wireframes
- User flow
- High fidelity wireframes
- Usability testing of the high fidelity prototype
- Update with changes
- Secondary research
- Competitive analysis
- Interviews
- Persona creations
- Business, user & technical goals
- Journey map
- Sketches of low fidelity wireframes
- User flow
- High fidelity wireframes
- Usability testing of the high fidelity prototype
- Update with changes
- Secondary research
- Competitive analysis
- Interviews
- Persona creations
- Business, user & technical goals
- Journey map
- Sketches of low fidelity wireframes
- User flow
- High fidelity wireframes
- Usability testing of the high fidelity prototype
- Update with changes
- Secondary research
- Competitive analysis
- Interviews
- Persona creations
- Business, user & technical goals
- Journey map
- Sketches of low fidelity wireframes
- User flow
- High fidelity wireframes
- Usability testing of the high fidelity prototype
- Update with changes
What I Didn't Do
What I Didn't Do
What I Didn't Do
What I Didn't Do
What I Didn't Do
- Design and prototype all the items in the feature roadmap
- Test the updated high fidelity prototypes
- Collaborate with developers and engineers to put the app together
- Design and prototype all the items in the feature roadmap
- Test the updated high fidelity prototypes
- Collaborate with developers and engineers to put the app together
Key Takeaways
Key Takeaways
Key Takeaways
1. I learned that the order in which user research tools are used is important. I began this project with 1:1 interviews to get an overview of the produce industry, but I should have waited until after the competitive analysis. There were some questions that came up after the competitive analysis and I had to ask my users more questions. However, doing the interviews at the beginning was helpful too as the interviewees confirmed the need for this app.
2. It's important to ask clear questions and not interrupt the users as there may be valuable feedback that I could miss out on.
3. The journey map could either be used to show the steps a user takes to currently solve a problem or the steps a user takes while using the app that is currently being designed. Creating a journey map is a great way to make sure that no important features are left out.
4. I learned that if a user doesn't sign in, an app can save info like a shopping list if the user is always using the same device. As a result, I was able to place the create an account screen in any part of the user flow since the app can save data inputed temporarily without the user creating an account.
5. There's no need to add all the navigation headers in an app if there's no use for them.
6. Allow users to skip onboarding screens so that Grocer doesn't lose users.
7. Referring back to the user research and synthesis throughout the whole process helps to refocus on the problem and make sure user needs are being met.
1. I learned that the order in which user research tools are used is important. I began this project with 1:1 interviews to get an overview of the produce industry, but I should have waited until after the competitive analysis. There were some questions that came up after the competitive analysis and I had to ask my users more questions. However, doing the interviews at the beginning was helpful too as the interviewees confirmed the need for this app.
2. It's important to ask clear questions and not interrupt the users as there may be valuable feedback that I could miss out on.
3. The journey map could either be used to show the steps a user takes to currently solve a problem or the steps a user takes while using the app that is currently being designed. Creating a journey map is a great way to make sure that no important features are left out.
4. I learned that if a user doesn't sign in, an app can save info like a shopping list if the user is always using the same device. As a result, I was able to place the create an account screen in any part of the user flow since the app can save data inputed temporarily without the user creating an account.
5. There's no need to add all the navigation headers in an app if there's no use for them.
6. Allow users to skip onboarding screens so that Grocer doesn't lose users.
7. Referring back to the user research and synthesis throughout the whole process helps to refocus on the problem and make sure user needs are being met.
1. I learned that the order in which user research tools are used is important. I began this project with 1:1 interviews to get an overview of the produce industry, but I should have waited until after the competitive analysis. There were some questions that came up after the competitive analysis and I had to ask my users more questions. However, doing the interviews at the beginning was helpful too as the interviewees confirmed the need for this app.
2. It's important to ask clear questions and not interrupt the users as there may be valuable feedback that I could miss out on.
3. The journey map could either be used to show the steps a user takes to currently solve a problem or the steps a user takes while using the app that is currently being designed. Creating a journey map is a great way to make sure that no important features are left out.
4. I learned that if a user doesn't sign in, an app can save info like a shopping list if the user is always using the same device. As a result, I was able to place the create an account screen in any part of the user flow since the app can save data inputed temporarily without the user creating an account.
5. There's no need to add all the navigation headers in an app if there's no use for them.
6. Allow users to skip onboarding screens so that Grocer doesn't lose users.
7. Referring back to the user research and synthesis throughout the whole process helps to refocus on the problem and make sure user needs are being met.
Featured
Craigslist IRental Page Redesign
GrocerUX/UI Design
Espy CollectiveResponsive Website & Rebrand
MirrorResponsive Website & Rebrand
VenmoAdding a New Feature
Craigslist IIHomepage Redesign