project details

Two redesign concepts for Plant Jammer's AI-powered ingredient substitution experience

Team:

Solo Project

My Role :

UX/UI Design

Duration :

2 weeks

Tools :

Figma, UsabilityHub

My entry for UX Design Contest #16

Problem

Lower-than-expected user-engagement with the current ingredient substitution experience

‍Plant Jammer uses Artificial Intelligence to provide dynamic recipes. Users can substitute ingredients and get real-time cooking instruction updates.

However, early data shows lower-than-expected user-engagement with the current ingredient substitution experience.

Solution

Enable users to search and filter recipes based on ingredients, incorporating a dropdown menu for ingredient substitutions

Discover

I conducted a round of testing before redesigning the product to uncover any potential usability issues with the current design

Usability Test Tasks:

Find a vegetarian recipe that contains radicchio.
Access the recipe of Baby Green Salad with Wasa Multigrain.
Identify alternative ingredients to replace dates.
Determine the amount of baby spinach needed for two servings.

I identified the following issues during the usability test and prioritized them based on their urgency:

📱 Mobile Compatibility Issue

The current design on mobile devices displays only one recipe per row, which is not optimized for space efficiency.

🔍 Missing Search and Filter Features

Users are unable to search for recipes or filter them by ingredients. This limits their ability to explore recipes based on available ingredients.

The current experience doesn’t allow users to filter recipes according to dietary preferences or allergies.

🎨 Monotonous Visual Design

The ingredient icons lack vibrant colours, making them appear less realistic.

🔄 Confusing Replacement Button

Users might not be familiar with the "replace" button, leading to confusion about how to substitute ingredients directly from the menu.

Design Mockups

I developed two redesign concepts for Plant Jammer aimed at addressing these usability issues

1. Landing Page

Usability issue: Mobile compatibility.

Solution: Implemented a layout adjustment to display two recipes per row, reducing the need for excessive scrolling while browsing recipes on mobile devices.

2. Search and Filter Funtions

Usability issue: Absence of search and filter functionalities.

Solution: Introduced a feature allowing users to search recipes by ingredient(s) and filter them based on allergies and dietary preferences.

3. Ingredient Substitution Redesign 1

Usability issue: Monotonous visual design and confusing replacement button.
‍
Solution: Realistic and recognizable icons were introduced to represent ingredients. Additionally, the original replacement button was replaced with horizontal scrolling, streamlining user experience by minimizing unnecessary clicks.

4. Ingredient Substitution Redesign 2

Usability issues: Monotonous visual design and confusing replacement button.

Solution: Implement drop-down menus, a common interface pattern used in e-commerce, familiar to the average user, to enhance clarity and ease of use.

Validation

I conducted two tests to validate these redesign concepts for ingredient substitution experiences

1. First Click Test

I conducted usability tests on UsabilityHub to assess the discoverability of the ingredient substitution function in two redesigned interfaces by analyzing participant clicking behavior to determine where they would click to replace a specific ingredient.

Result:

After comparing the results from the first click tests conducted on both redesigns, it's evident that users find the ingredient substitution function in redesign 2 more user-friendly to navigate.

2. Preference Test

I conducted a preference test involving the current design and two redesigned versions to evaluate their relative preferences. Among 32 participants from 13 countries, the results were as follows:

44% (14) favoured redesign 2.
31% (10) preferred redesign 1.
25% (8) chose the current design.

44% 💖 redesign 2

"Easy to read."

"Able to see the amount the best."

"I can see the ingredients, the layout seems more organized."

"Looks the best and it’s minimalist."

Simple and organized not overwhelming."

31% 💗 redesign 1

"The ingredient options are visible and the use of illustrations helps easier identification."

"I can see the ingredients more clearly than the other options."

"Seems more attractive and dynamic than the others, makes the app look fresher in my humble opinion."

25% ❤️ current design

"It's uniform."

"I can clearly see the ingredients an the amount needed."

"Because it looks similar to what I am used to."

cubbi

Plant Jammer - dynamic recipes