ABC Groceries
Shared
Carts
Timeline:
8 weeks
My Role:
UX/UI designer and researcher from conception to delivery.
About:Individual Project, UC Berkeley Extension, Mentored by Kristen Kator
Software:
Figma, Adobe Photohop,
Adobe Illustrator & Miro
OVERVIEW
Creating a playful spin on grocery shopping: ABC Groceries' new interactive shared cart feature.
As part of my U.C. Berkeley extension specialization, all students were tasked with creating an innovative feature for the fictional grocery store, "ABC Groceries." Following the User-Centered Design methodology, I gathered insights from research participants and led a design workshop to establish my chosen concept, focusing on the implementation of a shared and interactive cart between shoppers.
First Iteration
Second Iteration
Third Iteration
Empathize
Define
Ideate
Prototype
Test
Week 1 and 2:
-
Competitive Analysis
-
Contextual Inquiry
Week 3:
-
Affinity mapping
-
Persona
Week 4:
-
Design Workshop
-
Storyboard
Week 5:
-
Paper Prototype
-
Test Paper Prototype
Week 6:
-
Interpretation of Paper Prototype Testing
-
Redesign from the findings
Week 7:
-
Digital Prototype
-
Test Digital Prototype
Week 7:
-
Interpretation of Digital Prototype Testing
Week 8:
-
IA
-
Annotated Wireframes
-
User flow
CHALLENGE
How might we assist group shoppers in enjoying a fun and interactive grocery shopping experience while easily managing their carts and items?
We've all faced the grocery shopping challenge for group activities or when planning with partners or roommates. It's a common struggle - making sure everything's on the list and figuring out how to split the bill. After digging into my research, I noticed this issue kept coming up, and I personally knew the feeling too. That's when I realized we needed a better solution.
So, I decided to take on a design journey with a clear mission - to find smart solutions that make group grocery shopping easier and more enjoyable for everyone.
OUTCOME
By creating an interactive shared cart!
Seamless cart creation:
Craft a new cart in just two steps: Choose a playful cart name with your friends and add them to start adding items.
Simplify invitations by sending a link to shoppers not in your friend list.
Effortless cart management:
Access an always-visible dropdown menu for selecting and monitoring active carts.
Ensure easy navigation with a constant CTA, guaranteeing shoppers can effortlessly move between their carts.
Interactive shopping delight:
Infuse fun into the shopping experience with an interactive cart allowing group shoppers to leave comments, likes, and dislikes under each item.
Eliminate the need for external chat apps; make shopping a more engaging and enjoyable activity.
Flexible payment options for group shopping:
During checkout, along with regular details, explore a novel way to split bills: pay the full amount, split equally, or pay individually by item.
Tailor the payment experience to the desires of the shared cart shoppers for a hassle-free and fair process.
Let's dive into my research!
UNDERSTANDING SHOPPERS: CONTEXTUAL INQUIRY
The idea of grocery shopping feels more like a "chore", something my participant takes on only when absolutely necessary.
I personally shadowed one participant, while my classmates followed a total of 11 additional participants. This collaborative effort allowed us to gather insights from a diverse pool of 12 participants as they shopped for groceries, both online and in-store. Throughout these sessions, which each lasted approximately 1 hour, I asked very few questions while observing their typical shopping routines.
TO AFFINITY & BEYOND!
Mapping it out, we nailed down patterns behind the why, the when, the how, and the what of their shopping spree!
After collecting data from our contextual inquiries, we organized the information through affinity mapping. This process helped identify common themes from insights shared by participants. Some recurring themes allowed me to identify the main challenges shoppers face during their shopping experiences and develop an appropriate persona.
WHAT DID I LEARN FROM SHOPPERS?
Four recurrent pain points were identified from the affinity map, forming the basis for my thoughts and considerations.
Through the process of creating an affinity map with insights from all participants, I identified a consistent set of recurring pain points that were prominently evident.
Inconvenient time spent shopping for groceries.
Forgetting items when relying on my memory.
Sticking to a budget when grocery shopping.
Shopping when running out of items.
Time to create using the insights I gathered.
PERSONA
Creating Josh, the exemplary student!
“Juggling my studies, job, and social life is my forte, but I'm looking for a convenient and budget-friendly way to shop for groceries.”
Biography
Josh is a hard working college student who's trying to juggle his schoolwork, part-time job, and social life. He's so busy that he mostly prepares for himself quick cold sandwiches during the week. But he really looks forward to his weekly gatherings with friends on the weekends; they just hang out, play video games, and enjoy their favorite snacks and drinks.
JOSH
The Exemplary Student
Goals
-
Find a balance between his academic responsibilities, part-time job, social life but also his household duties.
-
Consistently plan enjoyable weekend gatherings with friends, complete with snacks and drinks, without the worry of running out.
-
Ensure he never runs out of food during the week while being mindful of his budget as a student.
Pain-Points
-
His busy schedule leaves him with limited time for grocery shopping, which can be time-consuming.
-
Keeping his fridge full: his habit of postponing trips to the supermarket until he runs out of food.
-
Josh feels the pressure of being budget-conscious and constantly seeks ways to secure the best deals on groceries to save money
Demographics
-
Age: 20
-
Location: Boston, MA
-
Gender: Male
-
Education: Engineering student
-
Living Situation: Alone, in a studio near campus
-
Part-time Job: Physics particular lessons
-
Income: varies 1500-2000$/month
I NEEDED A BIT OF HELP TO FIND A GREAT IDEA!
The design workshop led me to formulate four concepts ideas aimed at addressing Josh's goals.
In a dynamic 90-minute virtual brainstorming session involving three participants, I introduced my persona, Josh, to foster empathy within the group.
Three distinct scenarios, reflecting Josh's goals, were presented and discussed. Participants engaged in a rapid idea generation process, dedicating 10 minutes to each scenario and using sticky notes in Miro.
The collected ideas were organized into three categories:
-
Blue sticky notes: Questions
-
Pink sticky notes: Design Ideas
-
Green sticky notes: Comments/Considerations
These ideas were deliberated upon, leading to the identification of common elements. From this collaborative effort, four standout ideas emerged.
Ready-to-Cook Recipe Subscription
Shared Cart Feature
Smart Budget Planner
Weekly Automated Delivery
System
BY NOW, YOU'RE PROBABLY EAGER TO DISCOVER WHAT I'M GOING TO CREATE!
The Chosen Concept: Creating a friendly interactive shared cart for effortless, fair and enjoyable group shopping!
After brainstorming concepts in the workshop, I put my ideas to the test using the NUF approach. This helped me sift through and rank the concepts based on their usefulness, innovation, and feasibility. Combining insights from my research, personal experiences, test results, and discussions with the workshop participants, it became evident that the shared cart concept held immense potential.
The shared cart feature isn't just a solution; it's a game-changer. Whether for group activities, roommates, or couples, it promises to simplify and organize the grocery shopping experience, making it less of a hassle. Moreover, it ensures fair cost-sharing, making it an inclusive solution for a wide audience. In my view, this concept is not just a development opportunity; it's a solution waiting to be created and embraced by a large audience facing similar challenges. So, why not take the initiative and develop it to address these widespread problems?
Who it Helps:
-
Large groups gatherings
-
Roommates
-
Spouses
-
Grocery shopping for others
Problem it Solves:
-
Ensure all needed groceries are bought
-
Simple method for splitting the bill
How it Works:
-
Create a shared cart
-
Invite friends
-
Add items
-
Splits it among participants
Why it Works:
-
Simplifies group shopping
-
Improves coordination and convenience
-
Ensures fair cost-sharing
IF YOU'RE WONDERING HOW IT WORKS
Imagining how the new shared cart feature concept can assist individuals like Josh in planning and organizing gatherings.
After a tiring week, Josh plans a fun night with friends.
Using the ABC app, Josh sets up a group snack cart for delivery. Ah, relief!
He adds buddies to the cart, making party planning a so much easier.
Everyone picks their faves for the feast, eager to see the mix.
Josh divides the bill, ensuring a fair share for all.
Snacks arrive, friends gather, and Josh cheers for the ABC shared cart app's help!
It's time to bring my ideas
to life!
LET'S SKETCH THE FLOW!
My first iteration: Navigating the happy path and unveiling user insights.
After sketching various flows and wireframes and selecting what I believed to be the most effective, I translated my ideas into a paper prototype—a foundational step in developing my project.
To refine the user experience, I organized two in- person 30-minute testing sessions with different participants.
For these sessions, I crafted a list of straightforward prompts designed to guide participants smoothly through the prototype's happy path.
As participants engaged with the tasks, I encouraged them to articulate each step and share their thought processes.
This approach aimed to uncover any potential issues or points of confusion, ensuring the ongoing development of a seamless and user-friendly flow.
All identified points of confusion will be thoroughly examined in more detail in the next section.
INTERPRETING & REDESIGNING
Four major insights emerged, demanding my focused attention for further exploration and refinement.
Following the user testing as well as a in-class peer review session, I organized the insights shared by participants into a tracking sheet, ensuring all key elements were captured. From this extensive list, four key insights emerged as focal points. These insights underwent a detailed development process, where I interpreted the gathered information and redesigned them through multiple sketches. It was a thoughtful journey of exploring various options before arriving at the optimal solution.
Problem: Testers preferred to have an option that allows them to pay the bill entirely themselves, rather than splitting it.
Solution: Provided tags that allows users to switch between the different payment options:
-
Pay entire bill
-
Split equally
-
Shoppers pay per personal item added
Paying the Bill
Problem: Testers expressed confusion regarding the placement of the delivery scheduling within the cart setup rather than at the checkout stage.
Solution: Based on the feedback I received, it became clear that users are accustomed to selecting their delivery date and time at checkout. This is likely due to the fact that most apps follow this structure.
Scheduling the Delivery
Problem: Some testers found it confusing knowing what cart they are adding their items to. In addition, they were confused of how they would be able to switch between carts.
Solution: I implemented a drop-down at the top left corner of the screen. This aids the user in identifying the cart they are currently using, and quickly move between multiple active carts.
Shopping with multiple carts
Problem: During a peer review session, a classmate mentioned that they would like to communicate with the cart members within the app.
Solution: After several iterations, I found it more suitable to integrate dynamic drawer for commenting and quick feedback (upvote and downvote buttons) for each item in the cart.
Cart chat
THIS ISN'T YOUR USUAL SHOPPING EXPERIENCE
How did I create an interactive cart?
I spent some time brainstorming how to make shopping super easy and fun for everyone! I knew I wanted shoppers to quickly add items and share their thoughts.
After thinking it through, I had a lightbulb moment: why not create a playful interaction feature?
That's when I came up with this cool interactive drawer idea. With just a few clicks, shoppers can:
Give a heart to stuff you love!
Give a little frown to things you're not feeling.
Drop a quick comment.
See who picked what.
WONDERING WHAT THE END RESULT LOOKS LIKE?
Here's my final digital prototype!
SPEC DOCUMENT: INFORMATION ARCHITECTURE & USER FLOW DIAGRAM
Finalizing the ins and outs of how the feature is set up and the different user flows.
With this new concept in mind, I rolled up my sleeves and dived into a more strategic process to understand how the app functions. I aimed to envision an easy and intuitive flow, ensuring users can effortlessly accomplish their desired tasks.
Below, I've included diagrams to illustrate and explain these interactions.
SPEC DOCUMENT: ANNOTATED WIREFRAMES
Creating annotated wireframes describing possible interactions.
WHAT'S THE STYLE GUIDE?
Fun and whimsical!
Typography
Icons
Components
CTA's
Colors
LESSONS LEARNED
Feedback and teamwork taught me to move forward.
-
Team Collaboration Magic:
Getting everyone together to work and brainstorm has been a real game-changer! By organizing and joining hands in team activities, I sparked amazing ideas and came up with some fantastic plans.
-
Embracing Feedback:
Listening to all the feedback has been like finding hidden treasures! Some of the insights I received ignited my creativity in ways I never imagined. There were brilliant ideas that popped up, things I wouldn't have thought of on my own. It's amazing how others' perspectives can spark new and exciting paths!
WHAT'S NEXT?
Keep on developing this idea!
-
Enhancing multi-user Interaction capabilities:
Currently, my prototype is limited to the view of the cart creator. I would like work on the friends perspective by introducing features such as friend invitations, soliciting payment requests within the cart, and streamlining the bill-splitting process.
-
Testing to make it even better:
I would like to team up with san actual group of testers. Together, we'll see how my app works when lots of people are in a same shared cart. It would help me spot any bumps to smooth out.
