Trucy Phan Ample

Ample

Ample is a full meal in a bottle made from premium whole foods that started as the #1 most funded Indiegogo food campaign of all time in the summer of 2016.

From Feb-July 2017, I worked as a freelance designer and developer on the following projects.

Shopify Site Design + Development

Problem: When shopping for Ample, something important to customers was the macronutrient composition. If you're going to replace a normal meal with a bottle full of powder, you understandably want to see what's in it.

However, you had to click on the product page to buy Ample before you could see how much protein, carbohydrates, etc. was in each bottle.

Recognizing that this was a hindrance to potential purchases, I surfaced it to its own top level page, called Nutrition.

This reorg allowed for people to research before buying, and for a cleaner, less cluttered product page for people who were already educated and ready to buy.

In addition, the information presented on the site was redundant and overly verbose, so I cleaned that up, too.

Nutrition Information (located on the product page) Before:

Nutrition Information (on its own page) After:

In addition to the Nutrition Page, I also redesigned and built my designs as a custom Shopfiy theme, since they were using that as their e-commerce platform. It was actually my first Shopify theme, so I learned as I went along.

However, when I started, Ample didn't have much web design going on other than reusing the colors in its logo.

In order to extend the web brand where the bottle label designer left off, I worked with a similar palette of colors so the web and physical product experience would be cohesive.

In the process, I introduced a more readable font, improved spacing and mobile-responsiveness, and introduced new product photography. Here are some before and after screenshots of my work.

Landing: Before

Landing: After

Mobile Landing: Before

Mobile Landing: After

Cart: Before

Cart: After

Footer: Before

Footer: After

Improving the Customer UX

Based on feedback from user discussions in our forum and feedback from in-house customer support, the team realized the onboarding process could be improved.

From the time that someone purchased a bottle of Ample from the website to when it arrived, there wasn't much of a guide for how the product could be consumed. The label said to mix it with water, for example, but many customers preferred mixing it with milk. Others preferred the thicker consistency from leaving it in the fridge for 15 minutes.

As a result, I designed a brochure that was meant to better inform and onboard customers to the product.

It was a tri-fold that went in all Ample shipments, and described tips and tricks for mixing the product, and ideas for where it could be used. In short, it was meant to guide first time Ample drinkers how to get the most out of a product that most had never used before.

Onboarding Brochure (front and back covers, inner flap)


Onboarding Brochure (inner pages)

Packaging

Here is one of three box sizes I designed for Ample shipments (which come in packages of 6, 12, and 30). The wide, flat box that holds 30 bottles is shown below. Since we weren't printing locally, we had to wait for versions to get shipped from the printer before making iterations. I'm holding one of the early test prints that was sent to the office on my lap in the photo below.

Box Test Print!

Here is another version of the 30-bottle box design:

I also designed a 6-bottle multipack holder. Ample was previously sent as loose bottles in each large box, so this helped keep them a bit more organized for both users and in warehouses when orders were fulfilled.

Ample Multipack Design

It's a modification on Ryan Bosse's original Ample label design, which uses a repeating pattern of squares and triangles with the logo overlaid on top.