Redesign Picnic
Client
Role
Discovery research
UI design
Concept testing
Team
Sophia Chou
JingYi Chao
Lars Behnke
Time
Feb-Jun, 2023
(5 months)
Redesign Picnic
Client
ROLE
Discovery research
UI design
Concept testing
TEAM
Sophia Chou
Jing Yi Chao
Lars Behnke
TIME
Feb-Jun
(5mon)
Deliverable
A redesigned Picnic App with an intuitive layout, personalised content, and a new planning feature aims to make the lives of busy families easier.
Impact
Improved usability of the Discover and Search pages, leading to error-free performance by all 6 participants in evaluation tests.
Designed feature, the Meal Planner, resulted in all 6 participants reporting a high willingness to use it.
or scroll down to read the full project journey
Project background
The Challenge
This was an assignment for our client Picnic during my studies at TU Delft. Picnic is a Dutch company that offers an online grocery service. The challenge of this project was to enhance the usability and overall user experience of the Picnic app, while fostering long-term trust and loyalty among its users.
Target User
Family with young kids
One of Picnic’s primary user groups is parents with young children, who have a consistent need for grocery shopping. With Picnic’s minimum order requirement of 35 euros, small families may place one or two orders per week to fulfill their weekly grocery need.
The convenience of Picnic, which allows them to choose from a wide range of products and have the groceries delivered through the app, effectively addresses their busy lifestyle.
Discovery
What are users pain points and needs when using the Picnic app?
We began the project with discovery research with current Picnic users and our target users (family with young kids) to identify design opportunities for improvement. This phase involved three key research activities:
- Usability inspection: We conducted an internal evaluation of the app by performing common shopping tasks while assessing it using Nielsen’s heuristics. The identified usability issues served as assumptions, which were later validated through usability testing.
- Usability tests: We recruited Picnic users, observed them as they completed specific shopping tasks, and conducted follow-up interviews along with a BERT questionnaire to gain insights into their experience with the app.
- Guerrilla interviews: We engaged parents with young children, asking open-ended questions to better understand their grocery shopping habits and values.
Procedure
We designed tasks that spanned from logging into the app for the first time to navigating, adding products to the basket, and completing the checkout process.
Two team members individually performed these tasks while evaluating with Nielsen’s heuristics (1990) , as a third teammate observed and took notes.
Results
The identified problems were documented and used as assumptions for usability testing, allowing us to validate and prioritize the issues with real users.
Participants
- Participant recruiting criteria: a person who has kids and mainly does grocery shopping for the family.
- 7 participants (2 Picnic users and 5 novice users)
Procedure
1. Pre-test interview
- Demographic questions
- Impression of Picnic
- Grocery shopping habit
2. Tasks
Imagine using Picnic to shop for groceries for the rest of the week.
Include these items in the order:
- 1 product from another country
- 1 discounted item
- 1 recipe
3. Post-test interview
- Frustrations while using the app
- Favourite points of the app
- Overall feedback
4. BERT questionnaire
Use a BERT (Bipolar Emotional Response Test) questionnaire to evaluate their experience on a 5-point Likert scale, measuring six pairs of adjectives.
- Easy v.s. Complicated
- Friendly v.s Authoritarian
- Useful v.s Unnecessary
- Budget v.s. Premium
- Intuitive v.s Confusing
- Personal v.s. Formal
1. Pre-test interview
- Demographic questions
- Impression of Picnic
- Grocery shopping habit
2. Tasks
Imagine using Picnic to shop for groceries for the rest of the week
Include these items in the order:
- 1 product from another country
- 1 discounted item
- 1 recipe
3. Post-test interview
- Frustrations while using the app
- Favourite points of the app
- Overall feedback
4. BERT questionnaire
Use a BERT (Bipolar Emotional Response Test) questionnaire to evaluate their experience on a 5-point Likert scale, measuring six pairs of adjectives.
- Easy v.s. Complicated
- Friendly v.s Authoritarian
- Useful v.s Unnecessary
- Budget v.s. Premium
- Intuitive v.s Confusing
- Personal v.s. Formal
Participants
- Participant recruiting criteria: a person who has kids and mainly does grocery shopping for the family.
- 8 participants (included non online grocery shoppers, occasional online shoppers, and long term frequent online grocery shoppers)
Procedure
We visited the public library of Delft and targeted parents with children to conduct a 5-10 min short interview about their grocery shopping habits. The interview questions were as below:
- General Information
- How many people do you do groceries for
- Shopping Habits
- How often do you usually do one grocery shopping?
- How long does it take? How does that make you feel?
- Do you usually make a fix shopping list beforehand? Why or why not?
- Online/In-store Shopping Preference
- Do you use any online grocery shopping service?
- If yes, do you still go to physical stores?
- Values
- What criteria or preferences does your shopping base on?
- Do you have any shopping behavior that you think is worth changing?
Key insights from the user research
Customer value Prefer healthier products while staying within budget
All participants from the interviews, including frequent online grocery shoppers still shop in physical supermarkets. They switch between different online and physical stores to search for the best deals and fresh organic products. One main advantage of online grocery services is that it reduces impulsive shopping, allowing customers to have more control over healthy purchases and budgeting.
Grocery shopping habit Frequent and fixed shopping schedule
Small families often have consistent and frequent grocery needs. Due to their busy schedules, they typically shop for groceries at a set time each week. Regular Picnic users usually plan their purchases in advance for the entire week and buy similar items each time.
Current user experience Could improve on intuitiveness and personalization
Quantitative results showed that, compared to other pairs of adjectives, the scores for ‘intuitive’ and ‘personal’ have potential for improvement. 3/7 participants expressed that they found the system to be average to confusing, while 4/7 participants felt the app was more average to formal rather than personal.
Identified usability issue Cramped and irrelevant layout limits Discover Page engagement
5/7 participants started directly from the search page. In contrast, little time was spend on the discover page despite it being the first page users see when they open the app. Participants explained the discover page was too crowded with information that does not interest them.
Identified usability issue Struggles locating and adding correct items
Both novice and long-term Picnic users mistakenly added unwanted or out-of-stock items to their baskets due to unclear feedback when adding items. 5/7 participants used categories to search for products, and 4 of these 5 participants switched between categories multiple times because they were in the wrong one.
Define
Based on the insights we have gathered, a design goal and testable targets are formed to guide us to come up with a new concept.
Design Goal
We want to create an intuitive and personal experience for parents of young children to efficiently order their weekly groceries through the Picnic app. We aim to achieve this by improving the app’s navigation, personalisation features and feedback.
Testable Targets
We formulated testable targets to assess how effectively we achieved our design goals, using a combination of both qualitative and quantitative evaluation methods during user tests.
Participant think aloud
Take notes as participants use the prototype and continuously vocalize their thoughts. The feedback are used to support quantitative data.
Interview
Ask participants open-ended questions about their experiences, preferences, and possible challenges. The responses are used to support quantitative data.
Observation
Two observers document participants' actions while using the prototype.
Questionnaire
A predefined set of statements corresponds to the testable targets, rated on a scale of 1 to 4.
Target 01 Users can keep track of what they have added without having to navigate to the Basket page.
Count the amount of times the participant navigates to the Basket page.
Q: The feedback of adding a product was clear to me (rate 1-4).
Target 02 Users can locate a product without navigating to the wrong category more than once.
Count in how many tries the participant finds the right category.
Q: I know where I am in the app at all time (rate 1-4).
Target 03 Users can find what they want on the Discover Page without excessive scrolling or overlooking.
Observe whether the participant immediately notices the entry point to international products, located on the Discover page.
Q:I think the contents in the Discover Page are in line with my personal preferences.
Q: The Discover Page is intuitive to use.
Develop
After defining the design goal and testable targets, we began by brainstorming ideas divergently. We then tested low-fidelity prototypes ourselves, selecting and integrating the ideas that best aligned with the design goal.
Deliver
Final Design Proposal
The final design proposal includes redesigned features located in the discover page, the search page, and a new planning feature in the cooking page.
Redesigned Discover Page
New feature Meal Planner
Redesigned Search Page
Redesign Discover Page
Clear layout highlighted entry points & consistent tiles
Personalised Content dietary & household declaration
The Meal Planner
The Meal Planner is a new feature we designed, that is located in the Cooking Page. With the Meal Planner, users are able to plan and order their groceries in a more structured and guided manner.
Fast and Inspiring
Plan your future meals with recommendation
After selecting days, number of people to cook for and filters, receive recipe recommendations by the meal planner. With one tap, you can add all recipe ingredients to your basket.
Be Organized and Mindful
Plan your future meals by your own
By tapping “Ga naar kiezen (Go to choose),” you can manually select recipes for each day. The ingredients for each recipe can also be adjusted based on your own need.
Redesign Proposal Evaluation
After finalizing the final redesign proposal, we tested the Figma prototype with participants where we gave them tasks.To evaluate whether the testable targets were achieved and gather users’ feedback, evaluation mentioned above were applied, including participant thinking aloud, observation, interviews and a questionnaire.
Participants
Test set up
User tests were conducted both online and in real life, accommodating participants’ availability. Both setups followed the same procedure, with 1 facilitator and 2 observers.
Tasks for participants
- Update your profile by indicating your dietary preferences and the number of people in your household.
- Find the Go on a journey! section for cheap international products.
- Browse product categories to find an XL-sized bag of apples and add it twice.
- Add organic (bio) apples to your basket. Add an alternative option if it is not available.
- Use the meal planner to plan three meals
Impact of the redesign
Testable Target 01
Users can keep track of what they have added without having to navigate to the Basket Page.
Questionnaire result The statement ‘The feedback of adding a product was clear to me.’ was scored 3.83, which is the highest score in the questionnaire.
Observation & Interview The task of adding items from the search page went smoothly for each participant. 1 participant particularly noticed the border color changed after adding the item, and gave positive comment.
“The edges around changes color, it’s now more visible.” – participant 6
Testable Target 02
Users can locate a product without navigating to the wrong category more than once.
Observation From observation, all 6 participants chose the right category without hesitation and any mistake.
Questionnaire result However, the corresponding questionnaire statement ‘I know where I am in the app at all time’, received relatively low score. 1 participant mentioned it was because the prototype was not fully developed. Buttons and pages that are not clickable caused frustration.
Testable Target 03
Users can find what they want on the Discover page without excessive scrolling or overlooking.
Interview The dietary declaration in the profile page was helpful especially for participants with specific dietary needs. Participants noticed the content is tailored to their needs and think it’s more convenient for them.
“I like that I can put in my dietary preferences. It’s convenient, because I am vegetarian myself, so it can pick out what I don’t want to see anyways.”-participant 2
What did the users say about the Meal Planner?
Since the Meal Planner is a newly proposed feature, we first want to determine if it brings value to users. During the interviews, we asked for their impressions and gathered feedback through think-aloud sessions on the Meal Planner.
Saves time and simplifies grocery shopping with personalized suggestions.
All participants expressed a positive impression for the Meal Planner. Both the “surprise me” and the “choose manually” options were said to be time saving for planning their weekly meals.
‘I usually think of what I want to cook on which day. The visualization of the calendar helps a lot”-participant 4
‘“I like the planning idea, it gives me suggestions, it’s making my life easier” – participant 2
The interface and procedure are easy to use
Although the usability of the Meal Planner is not the primary focus now, we observed that participants were able to use the meal planner smoothly without needing additional explanations. While some participants took a little time to familiarize themselves with certain steps (e.g. selecting days on the calendar), they quickly adapted and explained that it was due to their first time use.