1. Project Overview
Project Name
Grofam
Role
Product Designer (UI/UX)
Duration
6–8 weeks
Tools
Figma, FigJam, Adobe Illustrator
2. Problem Statement
Managing groceries for a household is often more stressful than it should be. Through initial exploration, it became clear that users were struggling with disorganized grocery lists, forgetting items during shopping, and the mental load of constantly planning meals. Many users described their experience as chaotic. Even when they created lists, they still forgot items. Planning meals felt repetitive and overwhelming, and grocery trips often took longer than necessary. The problem wasn’t just about listing items it was about a lack of structure across the entire process.
3. Target Users
4. User Journey (Before Grofam)
Before using Grofam, the user journey is fragmented and stressful. It begins with thinking about meals, often without a clear plan. The user then tries to mentally track ingredients before writing a list that is usually messy or incomplete. During shopping, items are difficult to find, and important things are often forgotten. Emotionally, this journey moves from mild overwhelm to stress and eventually frustration. The experience feels reactive rather than intentional, with no clear system supporting the user.
5. Solution
Grofam addresses these challenges by introducing a structured and supportive flow. Users can plan meals more easily, generate organized grocery lists, and transition into a focused in-store experience.
This solution transforms grocery shopping from a chaotic task into a guided process. Instead of juggling multiple mental steps, users are supported at every stage.
5.1. Onboarding Experience
A seamless onboarding process was important to reduce cognitive load and hence increase user retention
6. Information Architecture
To support this experience, the app was structured into four main sections: Home, Recipes, Plan, and Profile. Each section plays a clear role in the overall journey.
7. Wireframing
The wireframing phase focused on exploring layout and usability before visual design. I created low-fidelity wireframes to test how users would interact with key features such as adding items, navigating between screens, and checking off groceries.
8. Key Feature: Shopping Mode
One of the defining features of Grofam is Shopping Mode. Rather than being just another screen, Shopping Mode is a behavior shift. It transforms how users interact with their grocery list while in the store. When activated, the interface becomes more focused and task-oriented. Items are clearly displayed, users can check them off as they shop, and their progress is tracked visually. This reduces cognitive load and helps users move through the store faster and with more confidence.
10. Design Systems
