Meal Shopper app
Busy moms are trying to juggle so much. When it comes to dinner, the kids are too picky, “I don’t like this one”; the husband isn’t picky enough, “I don’t know what do you want to eat?” Shoppers don't need just another grocery list app, they need a better way to plan their weekly meals.
MealShopper is an app that helps busy moms save, sort and schedule their weekly meals, then turn those meals into a grocery list.
My role was to research grocery shoppers, ideate based on their needs, narrow down the minimum viable product, create site maps, and user flows, design the look and feel, build a prototype, and test the usability.
Secondary Research
I went into the secondary research thinking I could cover the whole process of preparing a grocery list, to using the list while shopping in-store, to how the list and coupons were used during checkout.
I quickly realized that this was too broad of a scope and each of those areas could be their own research project. I decided to focus my research on the grocery list preparation.
Competitive Analysis
Through testing competitor’s apps, I found that store specific apps (like the Kroger app) are too difficult for users to navigate., On the other hand, grocery list apps had simple UI, but could not integrate coupons or weekly sales.
Now I thought the project would focus on bridging the gap between these by creating a clean app that could also compare weekly ads and coupons from multiple stores… Primary research said otherwise.
Primary Research
I conducted and recorded video interviews with five individuals that fell into my target demographic of primary household grocery list maker.
The interviews helped me to understand the target demographic and what they actually cared about. They did not give much priority to coupons and weekly ads.
Through the user interviews the mindset shifted from “How do people make a shopping list?” to “How do people plan weekly meals, in preparation for making a grocery list?”
Research Synthesis
After the interviews were complete I conducted an affinity mapping session to see where the highlights and thoughts of the users would take the design.
I created an user persona that was amalgamated from all of the interviewees that would give me a baseline to guide my design decisions.
The research and interviews narrowed my target demographic to working moms. Their main concern was finding better ways to decide what meals to try and then turning that into a grocery list.
Pain Points:
Trying to turn recipes into a grocery list.
Want a way to keep track of meal ideas & which ones they have tried.
Weekly meal planning takes too many steps and too much time.
Problem Statement
How might we help meal planners keep track of meal ideas, plan their weekly meals, and turn meals into a grocery list?
User Stories / MVP
Based on the user interviews, I wrote out the possible things the users wanted to accomplish. I then prioritized these tasks by what was the most feasible and meaningful to the user, versus what could be done through later releases. These became the foundation of the whole app going forward; the Minimum Viable Product.
Store a list of meals
Sort & track which meals you’ve had recently
Schedule meals for the week
Add those meal ingredients to a grocery list
Ideation & Early Sketches
User Flows
Red Routes & Initial Testing
I create sketches of the red routes (most frequently used flows) for adding meals, scheduling meals for the week, and using the grocery list. For clarity and legibility, I turned those sketches into a low-fidelity wireframe to test with users. This initial testing of the app concept was performed with people who had not heard about this project and so gave a fresh perspective to the user interface.
They understood the concept, but there were a couple hang-ups in functionality and mental models. The biggest flaw was that the jump from the meals list to the grocery list was not clear.
Mood Board & Style Guide
The typography, imagery, and large rounded corner elements I chose to evoke being open and friendly. The colors were drawn from the idea of the produce area of the grocery store; you want things to look bright and fresh. I wanted the color palette to be feminine without being cliché. I chose to draw from images of raspberries that would pull subtle pinks and green leaves, with a lighter mint leaf color as an accent. The blueberry color worked well for type (and perhaps for a dark mode in the future).
The styles were mainly taken from Google’s Material Design guidelines. I decided on Material Design as the basis for the styles because they could translate easily to a future desktop site design, and a Material Design app wouldn’t feel as out of place on iOS as an iOS app would on Android. Lastly, I felt that Google’s design patterns had an advantage at feeling open and friendly.
Wireframes & Prototypes
View Final Prototype: https://aaronlewis729876.invisionapp.com/console/share/WAEJYB4MUHD
Usability Testing
From my two rounds of usability testing, users were able to complete the main flows and functionality. I was able to incorporate the sorting meals feature as well as the upload from other apps/sites feature.
From here I would iterate on my prototype again based on user feedback and test again. Then I would feel comfortable handing this off to a development team, and working with them to build.
Mom’s (and others) will save time and mental load pulling meals together, easily planning for upcoming meals, and using the app to pull those meals into a grocery list to shop from.
Learnings
This process has taught me to be humble and follow the research. I thought the project would go one way, and the users really pulled me into a totally different direction. But I’m not building a solution for me, I’m building a solution for moms who need help with weekly meal planning. And things that are clear to me may not be clear to the user.
I also learned how to use and build many integral skills and backend pieces of a digital product that I took for granted like user stories, user flows, and sitemaps.