Timeline

  • January - May 2021

My Role

  • UX/UI Product Designer

Executive Summary

Our goal was to create an application to assist JMU students who live off-campus with a grocery application to assist their issues in shopping and money management. GroceryGrab’s purpose is to find an alternative way for off-campus students to grocery shop that will specifically benefit them. Our application allows the users to create their own account, create a budget range, find meals that will best suit their nutrition needs, and order their items through Instacart. With this application, offcampus students will save money and no longer struggle to buy what they need. After conducting user research, interviews, and usability testings, we were able to create an application that would assist users to find an easy way to find and buy their groceries

Problem

JMU students living off campus need a way to calculate their weekly/monthly grocery budget so that they can cook healthy meals based on their budget, because users don’t know what groceries to buy and want to find a way to make recipes that are affordable and different.

Related Work & Competitors

When engaging through this challenge we have researched other similar shopping apps to see what and how their system offered to a user. We have reviewed the following systems:

  • BigOven

  • AnyList

  • Flipp

  • Instacart

  • FridgeToTable

Design Process

User Research

For our user research, participants were JMU junior and senior undergraduate students living off campus. Due to COVID-19 limitations, participants that were more accessible and within reach were chosen for the process. These participants were either relatives, roommates, or friends. The face-to-face interviews were casual and conducted at participant off campus homes. We interviewed four boys and one girl to gather information for our data.

During the interview, we have asked these questions to the participants:

  • What does your process look like when grocery shopping?

  • What is your budget for groceries?

  • Where do you usually shop for groceries in Harrisonburg?

  • How long does it take for you to shop for groceries?

  • What are some difficulties you experience during the grocer shopping process? Be specific.

  • As a college student, what’s the hardest part of grocery shopping that doesn’t need to be hard?

  • When you started cooking and shopping for yourself, what were your biggest challenges?

Interview Findings

Based on our research questions, we have created a primary and secondary persona to represent similar issues with grocery shopping as a college student

Storyboards & Sketches

Data Analysis

Based on our collected data, we have created journey maps, card sorting, as well as design requirements when engaging the product design for the app. Approaching the low fidelity prototype, we wanted to incorporate as much features that would satisfy the users needs through a user friendly navigation system throughout the application.

Design Requirements

Data requirements

  • Ability to compute prices and apply coupons

  • Ability to make judgements based on budget

  • Store and compute demographic information

Functional requirements

  • Ability to store archived recipes

  • Ability to compare prices between stores

  • Ability to filter based on specified preferences

Contextual requirements

  • Necessity to cook own meals

  • Constant update of weekly/monthly/yearly coupons

  • Restricted budget and desire to get best price on goods

Technical requirements

  • Ability to detect location

  • Simple system that includes a search bar

  • Daily updated that show products from different stores

User requirements

  • Simple and uncluttered minimalistic design

  • Vibrant colors that are easy to the eye

  • Straightforward navigation and functionality

Low Fidelity Prototype

With all of the information and data we collected, we have created a low fidelity prototype with Adobe XD and Figma. Designing and created a smooth user flow for the viewers. For our low fidelity prototype, we focused on six tasks when creating this application: create a user profile, create a budget that will fit user needs, choose a meal preference that fits user needs, find a store coupon and add it to the bookmark section of the app, shop at Aldi, and track order through the Instacart feature. We had a solid base on what we were planning to create, but we had some issues here and there during our prototype.

Feedback

Creating an account was simple and self explanatory for our users. Although our design and images looked the part, our color scheme was very simplistic. We needed to re-edit our design and add some cleaner and more eye opening color schemes. One issue we had was finding a coupon and adding it to the bookmark section of our application. Users were confused on where the market and bookmark sections of the application were. For the high-fidelity prototype, we need ed to make sure that each task was clear and easy to follow for users. Overall, we were satisfied with how our low fidelity prototype turned out, however we still ran into issues that we would need to fix towards our high fidelity prototype.

High Fidelity Prototype

For our high fidelity prototype, we took into consideration of all the feedback we received. We focused on improving the functionality, design, and navigation of our application. We also updated our shopping feature and improved the color scheme of the Instacart feature. Due to some issues, we decided to remove the feature of comparing items between stores.

Similar to our low-fidelity prototype, the first task was simple for users when creating an account. For tasks two and three, we fixed the budget range feature and added more options to our meal preference feature. With tasks four and five, we enhanced the functionality of the shopping feature. Users will now be able to choose a certain store n their area and add items to their cart. We added specific store items and options to choose from compared from our low fidelity prototype. With task six, we noticed that the artwork and color scheme felt repetitive from the other features, so we decided to add a light green color scheme to give our app a brighter look. Our delivery and pickup features both worked correctly. The user can easily choose which action to approach and use with ease. With these new features and edits, our application is now working more efficiently compared to our first prototype.

Usability testing and Design Recommendation

With our high fidelity prototype, we have conducted three think-aloud interviews through Zoom and giving tasks to our participants with access to the prototype. In the beginning, we gave the participants a short briefing, pre-questions, post questions, and recommendations.

Usability testing tasks:

  • Sign up to create a user profile

  • Create a budget range that fits your needs

  • Choose a meal preference that fits your needs

  • Select Aldi to shop groceries at

  • Add an item to your cart

  • Place and Track order through InstaCart

Each participant completed the six tasks as they were told. The first participant took 79 seconds to complete all six tasks. The second participant took 122 seconds, and the last participants took 196 seconds.

Overall, the testing went smoothly with some tiny issues. Although each times were different, tasks were performed as needed and most of the time was involved in exploring the application.

The Final Product

Final product walkthrough below

Final Product Prototype

Conclusion

We have created this application to be a user-friendly application that would help off-campus students with their grocery shopping needs. Based on our research, most JMU offcampus students would either order delivery regularly, or wouldn’t have time to go grocery shopping due to school work or outside activities. With this application, we planned to relieve that difficulty and make student lives easier when approaching their grocery needs. We made this application to be minimalistic, simple, and easy to navigate through. We gained inspiration from other food/grocery applications in creating the layout of the application. We used simple but bright color schemes, so it would look pleasing to the eye of the users. As a team, our main goal was to make sure this application would assist off-campus students from any sorts of struggles when grocery shopping. After testing and making changes to our functionality and design, we were very pleased with our final product. We hope that this application fulfilled its purpose in helping off-campus students shop for groceries, GroceryGrab.