Redesign Picnic – sophia-chou.com

Redesign Picnic

Client

Role

UXUI Designer
UX Researcher

Team

Sophia Chou
JingYi Chao
Lars Behnke

Time

Feb-Jun 2023

Tools

Figma
Miro

Redesign Picnic

Client

TIME
Feb-Jun 2023

ROLE
UXUI Design
UX research

TEAM
Sophia Chou
JingYi Chao
Lars Behnke

Tools
Figma
Miro

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. 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, usability tests and guerrilla interviews.

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

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

Grocery shopping habit
Frequent and fixed shopping schedule

Current user experience
Could improve on intuitiveness and personalization

Usability issue
Cramped and irrelevant layout limits Discover Page engagement

Usability issue
Struggles locating and adding correct items

Define

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

Interview

Observation

Questionnaire

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

Redesigned Discover Page

New feature Meal Planner

Redesigned Search Page

The final design proposal includes redesigned features located in the discover page, the search page, and a new planning feature in the cooking page.

Redesign Discover Page

Clear layout highlighted entry points & consistent tiles

Personalised Content dietary & household declaration

Redesign Search Page

Intuitive Tapping Clear tapping feedback and expandable categories

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.

Evaluate potential impact of the redesign

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

To be able to assess whether our redesign ‘improved’ the current app, we tested with 5 experienced Picnic users (i.e. users who have placed three or more orders), with a novice Picnic user who falls within our target group (family with young kids).

Test set up

User tests were conducted both online and in real life, accommodating participants’ availability.

Tasks for participants

Tasks were given to participants to ensure they navigated through each redesigned page and to allow us to better compare the evaluation results of each participant.

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/4, 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
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?

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 and understand

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.