🚧 This site is under construction 🚧
/*case study*/
Plant Jammer
Providing dynamic recipes through artificial intelligence
Duration
3-week design sprint
Team
David, Dareen
My Role
UX Designer
(UX strategies, UI design)
/*overview*/
What is Plant Jammer?
Plant Jammer is a website that allows you to create a collection of recipes. It uses Artificial Intelligence (AI) to provide dynamic recipes for small brands, retailers, and large food & beverage brands.
/*goal*/
Rethinking the experience of substituting ingredients
One of Plant Jammer's features is ingredient substitution, which allows users to substitute the main ingredient with another ingredient. However, early data shows lower-than-expected user engagement for this feature. Therefore, we are trying to rethink the experience of substituting recipe ingredients in a unique and creative manner.
/*problem*/
Identifying usability issues
To identify the main issue, we conducted usability testing using UserZoom to uncover the user's pain points and understand their thought process to optimize our design according to the users' needs.
Here are some of the pain points:
original design
Pain Points
According to most of our users, the main issue that Plant Jammer faces is the lack of clarity, either in color or text hierarchy. Therefore, we want to improve our current design by adding color, text hierarchy, and division between sections by increasing white space.
Final Design
For our final design, we decided to improve the overall design of the website by introducing separations between each section of the website to create a clear visual direction that allows the users to utilize the website more effectively.
/*process*/
First iteration
To improve the usability of the ingredient substitution, we want to highlight the functionality of the ingredient substitution by introducing structure and separation for the ingredient substitution functionality.
These two versions of the ingredient substitution are the initial ingredient substitution design that we came up with as we wanted to introduce clarity of which ingredients are being substituted. On the left, the ingredients changed shaped into pills. On the right, the design introduces an indent and a slight size change to show the substituted ingredients. We chose to create these two designs as we wanted to preserve the general structure of the layout rather than "reinventing the wheel" by creating something completely new that seems strange and out of place.
Preference Testing
To figure out which version seems more relevant to the audience, we decided to conduct preference testing (or A/B testing) between the pill-shaped design and the indented design to see which version does the users prefer. After going through the preference testing, users seem to prefer the pill-shaped version as they mentioned that "it's easier to pick and compare ingredients", it "looks cleaner", and it "differentiates the ingredients".
Final Verdict
Following the user's preferred pill-shaped design, we begin to incorporate our new substitution method into the final design. In this iteration, we added greater clarity to the design through the use of color. Since the original design uses a monochromatic blue color scheme, there is not enough clarity to use the substitution functionality. Therefore, by adding color, we are able to improve the overall clarity of the design.
before
after
/*reflection*/
What did I learn?
👫 User-Centered Design
Creating a design should not just be aesthetically pleasing but also purposeful. In this case study, I was able to test my designs with the users to create designs that are relevant to them. By constantly testing the designs with the users, I was able to understand the problem that the user faces and solve that problem for them.
💡 Ideation is debatably the most important part of UX design
Like most creative fields, ideation is the hardest part of creating the design. Finding the right ideas that are also feasible for the given time limit is not easy, but is crucial for the whole project.