Project Overview
Personal Grocer is the answer to many professionals' headaches. Gone are the days of fretting over what to make for a meal. With Personal Grocer, you can not just look for a recipe that works for your dietary, financial, and time constraints.
In one app, you can search for recipes that fit your lifestyle. From there, save them for a later date or even get the ingredient list and instructions for how to make that perfect dish you found. But to top it all off, no more running to the store to search for ingredients! Personal Grocer will set you up for ingredients you can pick up on the go.
Just finished work? Place the order for ingredients and pick them up on the way home! Find, save, buy, and cook your meals all in one app. Next time, skip the checkout line with Personal Grocer!
The Design Challenge
To figure out what kind of application to make, we started where all great ideas start: research. I decided to focus more on one-on-one interviews. I find that in interviews, you can focus on pain points. When in a comfortable space, users are comfortable getting deeper into the why when it comes to things that frustrate them, especially with technology and applications.
So I went into research looking to find out one thing in particular: shopping habits. When researching our potential users' habits, you can use that data to improve an existing app's focus or create something that fills the void in a market. And that was exactly what I did! In the interview, I had a series of questions for the user. This was to not only form the basis of the app, but also give a clear direction for the content that was important as well.
1. What challenges do you face when planning your grocery shopping trips?
2. What types of recipes do you gravitate towards and why?
3. Tell me about a time when you felt drained while planning a grocery shopping trip.
4. How do you decide what to get during a grocery shopping trip?
The focus of this application was so solve a simple but powerful pain point for users. The pain point was a strong focus on making a shopping trip more efficient. How exactly do you make trudging up and down aisles of unfamiliar ingredients more efficient? First and foremost make going to the grocery store unnecessary! And that's where the idea of combining different aspects of shopping and recipe applications stemmed from.
So from the preliminary research, I set out to solve 3 problems. I set out to remove the everyday time sink and frustration associated with grocery shopping. I also wanted to make a generally monotonous and tiresome activity for busy professionals painless. And lastly, I wanted to add more accessibility to an action that gives many people anxiety. Using my findings, I created four different user personas that encapsulated my main target users.
User Research and Findings
The four user personas are a basis for the main users I wanted to highlight in the design. These are the general users whose pain points I wanted to solve. Enter the users!
Enter Laila, the busy professional with a tech-savvy lifestyle.
Age: 32
Occupation: Marketing Manager
Location: Urban Area
Defining Characteristic: Highly comfortable with technology, uses a smartphone extensively, and is open to trying new apps and features.
Frustrations
Laila finds traditional grocery shopping to be time-consuming and overwhelming at times. At times, she also struggles to find inspiration for healthy meals that fit her dietary preferences. Laila also has to fit the urge not to make impulse purchases at the grocery store due to the lack of a pre-made plan for the trip.
Goals
Laila wants to simplify her grocery shopping routine by minimizing trips to the store. This leads to her looking for a way to efficiently plan and manage her meals throughout the week. She aims to find a balance for a healthy and yet delicious meal options at affordable prices. And at the end of the day, Laila desires the convenience of an in-app grocery shopping experience with delivery options, just in case the grocery store feels too uncomfortable.
Defining Behaviors
Laila uses meal delviery services sometimes, but finds them to be too expensive to use regularly. She relies on convenience foods during peak, busy periods. But that leads her to make unhealthy choices as well. She also attempts to research recipes online, but finds it difficult to find reliable and easy-to-follow options. Personally, Laila prefers visual content and detailed instructions to go along with ingredient lists for recipes. She actively seeks apps and online tools to make her hectic lifestyle more streamlined.
Enter Maria, the health-conscious entrepreneur.
Age: 28
Occupation: Founder of a fitness apparel startup
Location: Suburban Area
Defining Characteristic: Very comfortable with technology, uses multiple apps, and prioritizes health-tracking features.
Frustrations
Maria has a lot going on with her startup. It ends up taking the bulk of her time. She lacks the time to cook elaborate meals during the week. And when she can't cook, she struggles to find healthy convenience foods that are readily available. Maria hates feeling overwhelmed by the sheer number of recipe options online.
Goals
What Maria wants is to find healthy and quick meal options that fit her busy schedule. She looking even deeper than how long it takes to make a meal, though. Maria is looking for recipes that cater to her specific dietary needs (e.g., vegan, gluten-free). And to top it all off, she is aiming to track her calorie intake and manage her overall health through an integrated app.
Defining Behaviors
Maria will sometimes use meal delivery services that are focused on healthy options. She will prioritize healthy eating habits, but struggles with meal planning when life gets hectic. Maria often uses fitness and calorie-tracking apps on her smartphone to complement her healthy lifestyle. When it comes to cooking, she prefers recipe videos with clear dietary information and macros included.
Enter Omar, the eco-friendly family man.
Age: 38
Occupation: Environmental Engineer
Location: Urban Area
Defining Characteristic: Comfortable with technology, uses a smartphone but prioritizes user-friendly interfaces.
Frustrations
Omar feels overwhelmed by the lack of transparency when it comes to grocery store labeling. He struggles to find affordable and readily available sustainable groceries. And to top off his pain, Omar hates the amount of plastic packaging used in pre-made meals and convenience foods.
Goals
What Omar wants is to find sustainable and ethically sourced groceries for his family. To do his part for the planet, he also aims to reduce his family's food waste by planning meals and using leftovers creatively. Omar also would love to support local farmers and reduce his carbon footprint.
Defining Behaviors
Omar rarely uses meal delviery services due to sustainability and packaging concerns. So Omar makes a conscious effort to reduce food waste and utilize eco-friendly practices. He takes his family out to farmers markets and local shops that focus on sustainability. In regards to his recipes, Omar prefers meal recommendations that include information on the ingredients' origins and the their environmental impact.
Enter Colin, the budget-aware culinary expert.
Age: 45
Occupation: Culinary instructor at a community college
Location: Rural Area
Defining Characteristic: Moderately comfortable with technology, uses a smartphone, but prefers in-person interaction.
Frustrations
Colin feels limited by the selection of affordable groceries in his rural area. While searching for his next recipe, he struggles to find budget-friendly recipes that aren't boring. With his current budget, he dislikes the high cost of organic and locally sourced produce.
Goals
Colin wants to find creative and delicious meals using seasonal and local ingredients. He also wants to ensure he can stay within a strict grocery budget due to his income. By planning his meals more efficiently, he aims to reduce his food waste.
Defining Behaviors
Due to the nature of his career, Colin rarely uses meal delivery services due to the cost. He makes a conscious effort to avoid processed food and cook at home as well. Colin relies on local farmers and discount grocery stores to get the bulk of his ingredients. He also prefers text-based recipes with clear instructions and cost breakdowns.
From these user personas, I began to formulate my design and figure out what ideas I could put together in order to appease the bulk, if not all, of my users. From the preliminary research, I jumped straight into Ideation.
Design Solutions
Ideation
Before building anything, you have to have people to build for. Who are the target users? After answering that question, you have to move on to the how. How am I going to solve the users' frustrations? How am I going to make their lives easier? Those questions all start to be solved with Ideation. So, to get solutions started, I decided to use Mindmaps and the SCAMPER Method to organize my thoughts.
Mindmap
Mind maps utilize a wide range of ideas in less time. The ideas are categorized as they're created, saving time. I used that thought process to create a solution to each frustration of my target users.
After the initial mind map, I decided to go through and figure out which ideas were hits and misses. This was one of the most entertaining parts of ideation. Coming back after a day of simmering on ideas to see some of the unfeasible ideas was a great time. Misses don't mean you failed, but that idea wasn't for that project. Maybe in the future!
Initial Mind Map for Personal Grocer
Feasibility Version of Personal Grocer Mind Map
Green: Must-Haves | Yellow: Possible if time allows | Red: In future updates
SCAMPER Method
After using mind maps, I used the SCAMPER Method to bring all the ideas I created in the mind maps to life. Not all ideas were hits, but the ideas could build on each other to create something unique. So the SCAMPER method, for anyone unfamiliar, is an acronym for different techniques to trim the fat of your ideas. I did just that to decide what features to bring to the Personal Grocer app. I also highlighted where I planned to use my ideas in Personal Grocer.
S: Substitute | C: Combine | A: Adapt | M: Modify | P: Put to other uses | E: Eliminate | R: Rearrange
Ideation Outcome
The main focus of the ideation was to do one thing: make shopping for a recipe painless and efficient. So after mind maps and SCAMPERing, all of the ideas from it. I found my solution! I decided to take the anxiety of shopping out of the equation. I wanted to make shopping for a recipe fun, easy, and rewarding for the user.
The focus shifted from a simple search based on categories to the gamification of following recipes and occasionally doing things your way.
Storyboards
Storyboards paint the picture of an app without the need for the full app itself. My storyboard for Personal Grocer highlights a simple, but relatable story of hunger and satisfaction.
Our user returns from their day at the office, but they forgot a meeting. And it's in 20 minutes. If they wait until the end of the meeting, they may not be able to get to the grocery store in time. But it should take more than 20 minutes to find a recipe, too.
What can our hungry, frantic user do? They get on their phone and remember that Personal Grocer exists!
Panel 1: The user opens Personal Grocer
Panel 2: Personal Grocer has the user select what type of dishes they like to make.
Panel 3: Personal Grocer creates a personalized list of recipes based on the user's selection. So the user selects a recipe.
Panel 4: The user looks at the recipe with the cook time and ingredients.
Panel 5: After scrolling, the user selects the ingredients they don't have and adds them to their shopping list.
Panel 6: Personal Grocer sends the user to their shopping list.
Panel 1: The user confirms all the ingredients on their shopping list and gets their total. They then tap “Select Delivery Time.”
Panel 2: The user taps "4 pm - 5 pm" for the delivery time. It lights up then the option to confirm payment pops up.
Panel 3: After tapping the “Confirm Payment Options,” Personal Grocer shows the order, delivery time, and how the user wants to pay.
Panel 4: Personal Grocer shows the user an achievement they unlocked for placing a delivery order in less than 20 minutes.
Information Architecture
After finding the gist of what the general app path would be, it was time to get into the more technical aspects of the content. I decided to get into the information architecture or the backbone of the content in the app. I decided to do the Information Architecture in three steps: Content Inventory, Sorted Content, and Navigation Design.
Content Inventory
The content inventory is the unsorted and chaotic breakdown of all the information that will be in the Personal Grocer. That includes all of the pages, features, ingredients, dishes, and more.
This list is normally pages long because of the size and nature of an application that houses not just recipes, but data on specific brands and ingredients.
But for this particular case, I focused on what would be shown specifically in the prototype of Personal Grocer.
Sorted Content
The sorted content takes the inventory and breaks it down into the categories as they would be in the app. The different categories show the page breakdown, ingredient list, meal time, and how the recipe pages are organized.
This was another situation in which I wanted to highlight exactly what the prototype would encompass rather than the entirety of the application.
Navigation Design
Having the information and how it will be categorized is important. But let's not forget that 'how' you get around the app is just as important. To make it easier to search around the app, I used a horizontal bar for the different categories of dishes. The menu is based on the dish's time of day and popularity. There is also a more in-depth filtering system that lets the user choose the type of dish.
The user can select the dish to get taken to the recipe page. From there, they can add ingredients directly to their shopping list. After selecting their ingredients, they can select a delivery time.
Wireframes
All great designs start with a simple design. Something that is what is necessary to solve a user's problem. And my wireframes did just that.
Low Fidelity
The low fidelity designs are actually something you have already seen before! I took the chance to make the storyboard and low fidelity wireframes the same. It gave me a chance to put additional thought into the storyboard. In the scenario created, what would have been the easiest way to get from thinking about food to getting it ordered? That step-by-step thought process got me to the designs you see below.
Mid Fidelity
The mid-fidelity designs are where I took the designs to the crucial step of making them digital. The iteration is faster once you get the bones of the design settled on paper. I focused on using shadows and adding a layer of depth to make actions and buttons easier to distinguish. I used transparencies and minor glowing to highlight the gamification elements and active button states.
The important information is separated from the background using a contrast between the foreground and background. The mid-fidelity also fully breaks down the process of using Personal Grocer. It starts with the process of finding a recipe. Then, after perusing the recipe, the user adds ingredients to a shopping list. And finally, the user sets up payment, shipping, and delivery time.
Styleguide
Moving into more concrete and technical aspects of Personal Grocer. Below is the style guide. The style guide goes over the specifics of borders, shadows, hex colors, and text breakdowns.
This type of style guide is what is necessary when it comes to a larger app. It will save headaches down the line when the app inevitably grows larger and more developers are brought onto the team.
Final Results
High Fidelity Mockup
The high fidelity mockup is where everything comes together! We've gone from a simple idea of what we wanted to solve to a fully fleshed-out design for an app. Personal Grocer has transformed ideation into concrete. Utilizing the style guide above, I shifted the simple grayscale of the design to a vibrant, inviting cool green as the main pop of color. Green normally invokes feelings such as freshness and tranquility. But it can also invoke feelings of confirmation and trust.
Interactive Prototype
And here it is! The culmination of 3 months of consistent learning and growth in design philosophy is here as a prototype. From my previous work to Personal Grocer, I can see the growth made in design and user research.
I want to show appreciation to the people who helped with their eyes and opinions on the design and interactions. Users should always be at the center of any design. And this project made it even more apparent.
I may love to do game interfaces, but I find commercial applications to be fulfilling in their own way.
User Testing Plan
I wanted to take the project one step forward but creating a testing plan. This plan would allow me to gather more user data about the current design. What is working for the design versus working against it? Building an application or interface is iterative in nature. So the design is never done. The world is always changing, and thus, the work is never done until it is achieved. There is a separation of pre-testing questions and tasks given to the user while testing.
The pre-testing questions are important to determine if our initial obstacles were still the focus or if they have shifted. The quantitative data is useful to make sure the application is still going in the right direction.
Pre-Testing Questions
Q1. How often do you cook dinner at home?
Q2. Do you prefer to use recipes, freestyle, or somewhere between? Why?
Q3. Do you consider the ingredients in your home before finding a recipe or vice versa?
Q4. How do you normally get your groceries: pickup, in-person, or delivery?
Q5. When looking at recipes, what do you search for? Cuisine, time of day, dietary restrictions, etc.?
Q6. Do you prefer the written-out recipes or shorthand steps?
Q7. How interested are you in getting personal recommendations based on your recipes or foods you’ve cooked?
Q8. How important are nutritional facts when you are choosing food or recipes?
Testing Tasks
Task 1: Find a recipe and add the missing ingredients to your shopping list.
Task 2: Find a recipe through filtering to Quick and Easy Breakfast dishes.
Task 3: Complete a purchase and get your first achievement in Personal Grocer.
Task 4: Modify a recipe based on servings.
Task 5: Save a recipe.