Grocery Cart UI

Project

Grocery Cart UI: a comprehensive tool for grocery shoppers to improve the in-store grocery shopping experience

Timeline

7 Weeks (October - November 2021)

Role

Team Leader

Approach

Lean UX

Introduction

At the start of our Interaction Design II course, each student had to present a project pitch idea to the class on which project to work on. During this time, I dreaded going grocery shopping weekly and found my method of a shopping list extremely inconvenient. I thought of ideas on the best solution, and I decided that I could present this idea and come with are fined solution for this with my potential teammates. I then presented a speculative project idea of a screen attached to the grocery cart that would solve for improving the in-store shopping experience because this is a realm that has not been explored as much as other grocery applications.

My project idea was selected, and I was appointed as the team leader for the grocery cart UI with three other teammates. For this project, we would be following the Lean UX approach to complete the project. Lean UX is a combination of UX, Agile, and Scrum. UX would be the focus on the user and their relationship with the overall product. Agile is methodology that frames the project by dividing the work needed to be done into phases. Lastly, Scrum is the framework that our team would operate by having specific meetings to keep our teammates aligned on track to complete the project. The tools we utilized for organization, communication, and design are Miro, Discord, Zoom, Photoshop, and Figma.

Since this is a classroom environment with a restricted time frame, we completed the project in two 3-week sprints throughout the semester. We designed and framed our project with hypothetical stakeholders in mind and how we would solve business and user needs. In this page, you will see our process and my individual contributions to how we completed the project in the seven-week timeline.

View Prototype

Sprint 1 ➔ Sprint 2 ➔ Conclusion

Sprint 1

Our project was divided into two sprints that consisted of three design weeks each. Each design week set us on a track to complete specific tasks that were unique to each week. By the end of each sprint, our goal was to have a Minimum Viable Product (MVP), that we could show to users to get feedback from. The purpose of this was to save time and effort to test out bold decisions early before refining our product.

As the team leader, I organized all our schedules to decide when we would meet to collaborate on our tasks. We met in a hybrid environment this semester, where we would meet in-person for some meetings and utilize Discord and Zoom to meet virtually other days.

Week 0

Week 0 was planned to kick off our project and understand our business and user needs before we begin any research or design. Before Week 0 began, I asked everybody to fill out their schedule on a template created on Miro. I then planned our week based on everyone’s availability to see when we can come together and collaborate. After analyzing everyone’s busy schedules, I scheduled two 2-hour meetings for us to meet in person for the week to kick off the project.

During this meeting, we created a Product Problem Statement to have a concise phrase to refer to for the remainder of the project. The statement touched on how current grocery apps are focused on replacing in-store shopping, and we want to address this gap by creating an application that would enhance the in-store shopping experience. To solve for this, we would focus on assisting users with organizing the items they need.

We then focused on what our business and user assumptions would be. We concluded that our customers would be grocery stores that would purchase our service to implement into their stores, and our users would be their customers. Having a good user experience for their customers would retain and attract more giving them a larger ROI in the end.

Based on our assumptions, we created proto-personas(personas created without the foundation of extensive research) to represent who would be using our product.

Using our assumptions of who are users would be and what their needs are, we filled out a product backlog, where we decided on which features we would include in our project. Then, we narrowed our focus to stay lean and decided on which features we would focus on for Sprint 1.

Week 1

Following the same strategy as the previous week, I had my teammates input their schedules on Miro so I could plan the week out. During this week, we began our standups where we would meet for 15 minutes every other day to give status updates and make sure we were aligned on the work for the project. In addition, we planned to conduct three research interviews in one two-hour session to get a general scope on user needs and their shopping habits. My teammate, Krista, wrote our research script, and we rotated after each interviewee so everyone can get a chance to moderate a session. We synthesized our notes as a team and found key insights that users want to be able to easily navigate through the grocery store, compare product prices and nutritional information, and save money and time during their store visits.

Using these insights and our sprint backlog, we divided our features among team members to focus on wireframing. Each team member worked on their individual section of the wireframe, and I later connected all our screens to one cohesive wireframe.

Week 2

For Week 2, we continued our schedule organization and our standups throughout the week to stay aligned. We scheduled another research session with three participants to conduct usability testing on our low-fidelity wireframes. We wanted to get feedback as early as possible to iterate before making anything high-fidelity. From this session, we concluded that users wanted to checkout directly from the application, the screen can get cluttered with so many items, and finding our navigation feature was not clear.

After synthesizing our usability results, I delegated sections of the prototype for each team member to iterate on in a mid-fidelity prototype based on their preferences. We held a mini-critique session to get feedback from each other on one another’s sections after we were completed.

At the end of the week and sprint, we had a retrospective meeting where we discussed what went well, what issues we came across, and how we can improve for the next sprint.

Sprint 2

After a week of decompression to reflect on our work and refresh from the intensive work, we were ready to begin Sprint 2. For this sprint, we followed a similar structure to the previous sprint with our Agile ceremonies and workflow. Our goal for the end of Sprint 2 was to have a final, high-fidelity prototype that we could present to our hypothetical stakeholders to show the value of the work we completed.

Week 0

The focus of this week was to revalidate our assumptions from Sprint 1 and see what changes we had based on our discoveries. We revalidated our problem statement, our personas, and our product backlog, as well as creating a sprint backlog for us to follow for the next two weeks.

For our product problem statement, we kept the original statement the same, but added a few items. Originally, our focus was solely on assisting users with organizing items, but we added that we would assist with product comparison and purchasing groceries. We made these changes based on feedback we got from users that they’d want to be able to checkout directly from our application and that comparing products easily would be most valuable to them.

Our two personas remained the same as we validated our assumptions with the insights from the people we spoke to. However, we noticed that there was a trend among users that we failed to represent. For this, we added a third persona, Alice Cobb, to represent users with strict dietary restraints and wanting to reuse previous checklists to easily access previous purchases.

The last item we revalidated was our product backlog. We discussed each feature we already had in the product backlog and any we felt we needed to add for this last Sprint. Based on our conversations with potential users, we added a checkout feature, a filter on products for dietary restrictions, a feature to save previous lists, a call for assistance, and indication of coupons & deals associated with products on the screen.

Week 1

Taking everyone’s schedules into account, I scheduled our standups and a usability session for Week 1. In our usability session, we tested our mid-fidelity prototype that we completed in Sprint 1. From our tests, the key insights were that the navigation was still difficult to locate, and our changes made from our previous insights were valuable and effective to the user.

In our following standup, we divided the sections we wanted to iterate on and add to our wireframe. I asked for everyone’s preferences and delegated the work to each member. I then took everyone’s sections and combined it to a cohesive, singular wireframe.

Week 2

The Sprint and overall project were coming to an end, so I made it clear to my team was needed to be done and what our expectations are for a final product. I scheduled a last usability session with the team as well as our Agile ceremonies, including our standups and retrospective.

In our last usability session, we tested our mid-fidelity prototype with changes made from our discoveries last week. Our biggest insight was that with all large list on the screen, it can get cluttered, and the items would be difficult to find. We decided to solve this issue by providing collapsible categories to give the user the option to limit what is presented to them on the screen.

In our last usability session, we tested our mid-fidelity prototype with changes made from our discoveries last week. Our biggest insight was that with all large list on the screen, it can get cluttered, and the items would be difficult to find. We decided to solve this issue by providing collapsible categories to give the user the option to limit what is presented to them on the screen.

In our last standup, I delegated sections of the prototype to each team member to complete. I asked them to complete a low-fidelity at the minimum because I would style each screen to be visually consistent and working as a fully functional high-fidelity prototype.

After my teammates completed their sections of the prototype, I connected everything, created animations, and designed a visual style for our final prototype. As aforementioned, our customers are different grocery stores who want to utilize our application, so I included a design for Publix utilizing their visual style with color choices and their logo. I also created a screen to showcase how it would look with Kroger, who has a completely different visual identity.

Our last team meeting ended with a retrospective on Sprint 2 to reflect on the work that we completed. For the “what could be improved" section, we focused on how we can take what we’ve learned and need to grow from into our field and apply to our future jobs and projects.