The Design@UCI Project Teams is a quarterly competition where students collaborate to solve real-world design challenges. In 2023, I served as the lead UI/UX designer on a team of six. We worked together to create a grocery shopping app that tackled key issues in grocery shopping.
Competing against 9 other teams, our project earned 2nd place in the competition.
Problem Discovery
PROBLEM EXPLORATION
Shoppers face inconsistent prices and limited access to ethnic stores
Our challenge was to address the inefficiencies in grocery shopping, especially for those looking for ethnic products. Shoppers often struggle with visiting multiple stores, managing grocery lists, and finding affordable items, leading to time and money wasted.
Comments on the challenges of finding ethnic ingredients, discovering the best deals, and navigating inconsistent pricing
EMPATHIZING
The frustration of multiple trips and the lack of cultural products
Imagine a busy professional or parent juggling daily tasks who also has to visit three different stores just to complete a grocery list. For those looking for ethnic items that aren’t available in larger chain supermarkets, this becomes even more challenging, requiring additional time and energy for an already difficult task.
User Research
Phase 1: Competitive analysis
We analyzed 6 top grocery apps... and found a lack of support for ethnic stores.
We reviewed 6 grocery shopping apps but focused on the top 3 that closely aligned with our goals: Basket, Bring!, and Grocery Pal. These apps stood out for their strong shopping list features and nearby store tracking functionality, which were crucial for our project. While each had strengths, we identified gaps in their ability to compare prices at ethnic stores and cater to users' cultural needs, which became a key focus for markit.
Competitive analysis of 6 grocery apps
Phase 2: USER INTERVIEWS
Interviewing 12 UCI Students
We conducted 12 user interviews and distributed a survey to understand how shoppers manage their grocery trips, particularly when looking for ethnic items. We focused on how they track their grocery lists, stay within budget, and how often they need to visit multiple stores to find everything. Our goal was to uncover how we could help users save money and locate all their desired products, including ethnic foods, in fewer trips.
Organizing survey and quotes from my research through affinity mapping
Phase 3: usability Testing
Observing user navigation and gathering insights
We conducted usability testing on 6 participants from our user interviews. The participants were asked to complete specific tasks within the app, such as creating a grocery list, comparing prices, and locating ethnic products. During these sessions, we observed their interactions, took detailed notes, and gathered feedback to identify pain points and areas for improvement.
We made three major modifications based on the feedback that we received from the usability testing sessions.
information Architecture
Structuring the User Experience
The Information Architecture for markit was developed to ensure an intuitive flow that minimizes the user's effort in navigating through the app. By organizing key features such as grocery list creation, price comparison, and ethnic store discovery, the structure supports seamless navigation between deals, search, and list management, making grocery shopping a more efficient and streamlined process for users.
MOCKUP DEVELOPMENT PROCESS
From Low to High-Fidelity
Sketches: Our initial sketches outlined three key flows: account setup and location preferences, creating a grocery list, and finding deals at local stores. These sketches laid the groundwork for the app's core user experience.
Low fidelity mockup
Low-Fidelity Mockups: We focused on the main flows of the app: sign-up/in, search, deals, list, and settings. These wireframes helped us map out the app's functionality and user journey, ensuring a smooth experience from start to finish.
Low fidelity mockup
Mid-fidelity stage: We added visual details and made buttons clickable, refining the design to enhance user interaction and improve the app’s overall functionality.
Mid fidelity mockup
Hi-fidelity stage: Our high-fidelity prototypes incorporated final design elements, colors, and interactions, bringing the app to life. This stage focused on creating a seamless user experience, with fully functional features like grocery lists, price comparison, and ethnic store integration.
High fidelity mockup
Translating into Solution
SOLUTION
Simplifying Grocery Shopping with Collaboration, Ethnic Store Discovery, and Cost Savings
markit is a user-friendly app that enables users to search for grocery products across multiple stores in their area, including ethnic grocery stores. The platform highlights cost-saving opportunities by suggesting the cheapest products closest to the user’s location. With its deals feature, markit promotes budget-friendly shopping while ensuring access to culturally specific ingredients that are often hard to find in larger chains. Additionally, markit allows users to collaborate on grocery lists in real-time with friends and family, helping avoid duplicate purchases and ensuring all necessary items are bought efficiently.
Locate Ethnic Grocery Stores
____________________
Users can explore new cuisines and find specific ingredients for ethnic dishes that are unavailable in larger chains, making this a one-stop solution for diverse grocery needs.
Collaborate on grocery list
____________________
The collaborator list feature enables users to share grocery list with friends and family in real time to avoid duplicate purchases and ensure all necessary items are bought.
Locate Ethnic Grocery Stores
____________________
Users can explore new cuisines and find specific ingredients for ethnic dishes that are unavailable in larger chains, making this a one-stop solution for diverse grocery needs.
The final prototype
Ready to simplify your grocery shopping and save money?
Working on markit was a valuable learning experience for me, especially as it was my first time leading a team in a project this involved. Over the course of eight weeks, I learned a lot about balancing user needs with project constraints, and collaborating with a team to bring a project from concept to completion. Here are a few of the lessons I took away from the experience:
🌟 Managing Extra Work When a teammate fell ill, I stepped in to take on extra tasks, which pushed me to manage my time better and support the team in meeting deadlines.
🌟 Maintaining Consistency Across Screens One of the biggest challenges was ensuring design consistency as each team member worked on different parts of the app. I focused on keeping the design cohesive so that the final product felt seamless.
🌟 Iterating on Design for Usability Through several iterations, I learned the importance of refining design elements based on user feedback to improve usability. Each round of testing highlighted small tweaks that made a big difference in the user experience.
.jpeg)
