Good Juju

Visual design for a juice company concept

Research

The persona I established for the market audience are working professionals who are health and nutrition-conscious. They are busy and work most days of the week, but still try to keep an active lifestyle. Because of this, they like products that are convenient but still fresh and sustainable.

With user surveys, I found that the audience likes brands known for their sustainability efforts and have campaigns to back their research. The audience is skeptic of fads, and trusts brands that offer educational, raw, and statistic-backed visuals.

Competitive Analysis

I looked into a lot of established juice companies, as well as indirect competitors that had a similar subscription and a-la-carte model. A lot of these companies' visual strategies were minimal and modern with heavily stylized and posed photography, which a lot of users felt was trendy but sometimes intimidating. A lot of them also do not feature how their products are made or where they are sourced from, something that users hoped to see.

Interesting design patterns I noticed:

• Since juice is a product where the final product is one-color or covered in packaging, competitors like to display the ingredients in product photography to give more context as to what is in a bottle.
• A lot of competitors use a minimal black and white color palette, allowing the product to provide accent colors.

Strategy

With my research, I came up with keywords to guide my whole solutioning process: fresh, natural, handcrafted, farm-to-table, and warm, words that I wanted to speak through in the design for it to be successful.

I built two mood boards that were vastly different but still manifested these words.

My first option was a bright translation, inspired by citrus, berry, and pastel colors for a fun and friendly feel. The second option was green and earthy, inspired by as if one were in a farm picking produce. With feedback I received, I ultimately chose the second option as it spoke to the audience's love for homey and familiar color palettes.

Typography and Style Guide

I chose Coustard as the heading font because of its soft edges, giving it a handwritten feel despite being a slab serif. Lato complemented it well as a body font, especially with its various weights as I limited the use of Coustard to only its normal weight. This helped with adding contrast to smaller headings where the serif was not friendly to use.

The gold button is consistent across the design as the main call-to-action. I minimized the use of this color elsewhere to focus it on crucial call-outs such as links to learn more and to start the onboarding process.

Prototyping

Early wireframe sketches for mobile and desktop.

Translating mobile to desktop

For space-saving on mobile, I opted for a horizontal scroll on sections that would traditionally be stacked to minimize scrolling. This worked well for displaying product SKUs without sacrificing image space.

High Fidelity

I used a found image pattern as a subtle background image on sections of the page. This broke up the monotony of the light background and gives the page a bit of quirkiness. I also used chunks of fruit from this pattern scattered across the whole page.

I avoided a stark white background to make page sections softer to the eyes. Different shades of beige delineated sections from each other but kept everything cohesive.

For photography, I deliberately chose photos that had a lot of greenery and action—photos of local farmers and their product support the company's goal of showing that they are a sustainable brand.

Feedback

Some feedback received from peers who reviewed the project:

• "Simply so wonderful. Very inviting and great use of color, typography and icons. The pattern in the back is super successful."
• "The patterns are great—you did an excellent job at recoloring them as a background pattern, pulling out full-color elements as illustrations, and recropping (such as in the “What’s Right For You Right Now?” section) so that it feels different every time. All great strategies for dealing with the limitations of found imagery."
• "She was very thoughtful about creating and maintaining a warm look and feel throughout the page. The understated patterns in her layout and iconography integrated into her landing page very nicely."

This project was chosen to be featured on General Assembly's website.

NEXT PROJECT →

Eventbrite Music