top of page

Pulpy Seed Case Study

Pulpy Seed

Same screenshot as on the homepage. Screenshot of 2 mobile phones tilted sideways. The phones have the Pulpy Seed homepage on them. The phone on the left is the older design with a brown soil textured background for the header, and the phone on the right has the redesign with a green leaf textured background for the header.

Project Overview

Usability tests with 3 people indicated that the brown soil header does not align with the brand. Changing it to a green leaf texture matches more with brand values.

This juice app allows users to customize their juice.

Role: UX Researcher and Designer
Duration: 4 weeks*

This is the original screen:

Phone with Pulpy Seed homepage old design. The main point of the image is the header, which is a brown soil texture. Other details: The heading is "Healthy, sugar-free fruit juice." 2 bottles of juice are shown, one Mango Strawberry and the other Apple Grape. A green button is labelled "View Products." The body text is "We believe in the importance of eating healthy fruits. We also understand that a busy day means you don't have..." the text is cut off by the bottom of the page.

Usability Testing

Key Takeaway:

The soil image in the header does not belong with the brand. It is distracting on the actual products.

Solution:

The current background image is supposed to be soil, since this aligns with the brand’s concept of natural health. However, using imagery of green leaves would work better.

Before:

Pulpy Seed old header. Brown soil texture. The yellow Pulpy Seed logo is on the left, other buttons are on the right. The buttons are a yellow shopping cart, a yellow circle with a "(0)" in it, and a yellow menu icon.

After:

Pulpy Seed redesigned header. Green leaf texture. The yellow Pulpy Seed logo is on the left, other buttons are on the right. The buttons are a yellow shopping cart, and a yellow menu icon.

One user also mentioned that it would be better to hide the cart’s badge if there are no products in it.

Colour accessibility (WCAG 2.2 AA):

#6B4615 (Brown)

#586336 (Green)

The colour brown.
The colour green.

Colour Blind accessible, but not colour contrast accessible

#6B4615 (Brown)

#D5CB35 (Dark Yellow)

The colour brown.
The colour dark yellow.

Fully accessible

#6B4615 (Brown)

#FEF27E (Light Yellow)

The colour brown.
The colour light yellow.

Fully accessible

#586336 (Green)

#D5CB35 (Dark Yellow)

The colour green.
The colour dark yellow.

Accessible, but not with small text (17 pt or smaller)

#586336 (Green)

#FEF27E (Light Yellow)

The colour green.
The colour light yellow.

Fully accessible

#D5CB35 (Dark Yellow)

The colour dark yellow.

#FEF27E (Light Yellow)

The colour light yellow.

Colour Blind accessible, but not colour contrast accessible

Final Version

Before

Same image as the 2nd image on this page. Phone with Pulpy Seed homepage old design. The main point of the image is the header, which is a brown soil texture. Other details: The heading is "Healthy, sugar-free fruit juice." 2 bottles of juice are shown, one Mango Strawberry and the other Apple Grape. A green button is labelled "View Products." The body text is "We believe in the importance of eating healthy fruits. We also understand that a busy day means you don't have..." the text is cut off by the bottom of the page.

After

Phone with Pulpy Seed homepage redesigned. The main point of the image is the header, which is a green leaf texture. Other details: The heading is "Pulpy Seed: Customizable, healthy, sugar-free fruit juice." 2 bottles of juice are shown, one Mango Strawberry and the other Apple Grape. A green button is labelled "Order Now." The body text is "We believe in the importance of eating healthy fruits. We also understand that a busy..." the text is cut off by the bottom of the page.

Results

User goals: We predict that users will have an easier time on the app.

Business goals: We predict that there will be an increase in conversion rates.

References and other information:

*I spent more than 4 weeks, but if I condense it to a full-time schedule it would have approximately been 4 weeks.

Special thanks to the 3 anonymous users who did the usability testing for this.

This is a fictional app.

For the logo, images of the bottles, and bottle labels, I used Adobe Illustrator, Adobe Photoshop, and Cinema 4D.

The leaf texture I used for the logo was found here: https://pixabay.com/photos/gunnera-leaf-green-leaf-details-5195132/ by "ebor."
The seed I used for the logo comes from here: https://pixabay.com/photos/walnut-leaves-apple-sliced-apple-4503906/ by "TatsianaVusava."
Background dirt from: https://pixabay.com/photos/dirt-soil-potting-mix-ground-mud-947985/ by "snarlingbunny."
Bottle from: https://pixabay.com/illustrations/bottle-water-liquid-milk-lemonade-4840002/ by "AlLes."
Mangos from: https://pixabay.com/photos/mango-hd-mango-mango-fruit-2360551/ by "liwanchun."
Strawberries from: https://pixabay.com/photos/strawberry-berry-fruit-food-fresh-1238295/ by "Shutterbug75."
Apples from: https://pixabay.com/photos/apple-red-fruit-food-fresh-ripe-1834639/ by "Pexels."
Grapes from: https://pixabay.com/photos/grapes-red-wine-fruit-vine-cute-2520999/ by "Momentmal."

Cart icon by "Google." Originally was black, I changed the colour to yellow. Licensed under Apache 2.0.

Typeface is Nunito Bold.

I used ChatGPT 3.5 to help me create the research question.

Wifi and Battery icons provided by Apache License Version 2.0. I altered their colour and size.
“Wifi” Icon: https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Awifi%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4024
“Battery Full” Icon: https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Abattery_full%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4024

WCAG 2.2: https://www.w3.org/TR/WCAG22/

bottom of page