gr8nola logo

Gr8nola's Latest Website Refresh

 Gr8nola New Website
Gr8nola New Website

Gr8nola.com just got a makeover!

Even though it's lean times right now due to COVID, investing time and resources to enhance my website quickly became a priority as I've been shifting my focus to online sales with the pandemic accelerating e-commerce. While I felt my old site was just fine, there was a lot of room to improve the overall user experience: from being more thoughtful in my information hierarchy, to making gr8nola's differences more clear, to reducing the overall text-heaviness of the site, and more.

Prior to making these changes, I heat-mapped my old site via Hotjar and will be tracking traffic on the new version to measure improvements on conversion and average order value, which will be the key measures of success for this initiative. For those who like to nerd out on design, UI/UX, or just e-com and/or startup junkies in general -- here’s a summary of the before and after from this revamp. 

Let's dive in:

Header Navigation

I’ve reduced the navigation links to include Shop (which stays fixed in place as the user scrolls down the page), Benefits (a new page) and Story only. You’ll notice that Stores and Blogs were removed to keep the customer focused on more "converting" pages.

Hero Section

While I love my old hero shot, my mini packaging is soon to be outdated, so as a middle ground I’ve implemented a slider which transitions from various flavors with imagery that markets the gr8 ingredients inside, while still bringing gr8nola's bold and vibrant brand values to life.

BEFORE:

Gr8nola Old Website Hero

 

AFTER:

Gr8nola New Website Hero Image

Addition of Press Logos

We’ve gotten some gr8 press which was formerly hidden in my old About page. This is huge for credibility and establishing trust with new customers, so I’ve put them front and center.

Products

Rather than showing all my individual bags, I'm displaying my top flavors as well as bundles to drive up average order value while still making variety clear. 

BEFORE:

Gr8nola Old Website Products

AFTER:

Gr8nola New Website Products

Influencer Testimonials

Previously, I had random testimonials that were super long and lacking the customers' actual photos. Since gr8nola's received some great influencer love, I’ve beefed up this section to highlight direct quotes from recognizable names including Halle Berry, Chriselle Lim, Molly Sims, Nigel Barker and more.

BEFORE:

Gr8nola Old Website Testimonials

AFTER:

Gr8nola New Website Influencer Testimonials 

"Why Gr8nola?" Section

I used to have four icons below that conveyed features about the brand, but they weren't super convincing or clear about why you should try gr8nola. They also looked a bit “young". I honed in on the key differentiators of my product to educate customers on what sets my brand apart in a more explicative yet concise manner.

BEFORE:

Gr8nola Old Website Icons and Differences

AFTER:

Gr8nola New Website Why Gr8nola

What’s Inside Section → New “Gr8 Benefits” Page

The old “What’s Inside” section on my homepage toggles to the various ingredients when you click on a flavor. I liked it, but it’s super text heavy and almost hard to read. This information got repackaged into a new “Gr8 Benefits” page (which is in the main header navigation), which visualizes the same information in a more fun, engaging way. As you scroll down on this page, there's more information on what makes gr8nola better than the competition and FAQs to better educate consumers on why common ingredients found in many leading granolas are often unhealthy. Check out the full page here.

BEFORE:

Gr8nola Old Website What's Inside Section

Gr8nola Old Website What's Inside Ingredients Section

AFTER (New "Gr8 Benefits" Page):

Gr8nola New Website Benefits Page

"Founder/Story" Section

Before, my founder section was very text heavy, and you couldn’t see my face. This new section now shows me smiling, and the copy is shorter and focuses more on my customer, instead of just me. It's also followed by a video I did for Google's Supplier Diversity Program (which used to be completely buried on the bottom of my old Story page), which adds a more human and personal touch to the page.

BEFORE:Gr8nola Old Website Erica's Story

AFTER:

Gr8nola New Website Erica's Story
Gr8nola New Website Erica Google Video

Social Grid

Shoppable links -- get your cart ready! :)

Gr8nola New Website Instagram Feed

Product Page

I took some best practices from Amazon and other D2C focused brands and made the following changes:

  1. Larger product image
  2. Removed colored circle behind products to keep things cleaner
  3. Main call-to-actions (Shop, Add To Cart, etc) consistently a purple button vs. before they used to vary in color based on flavor (this is a site-wide change)
  4. The thumbnail gallery of images are on the left of the main image on desktop vs. on the bottom
  5. Product variations (pack size) are all visible at a glance on desktop vs. a dropdown
  6. Customer now sees an "In Stock" or "Out of Stock" notification
  7. As you scroll down, recommended products are now above Customer Reviews to drive upsell; before they were at the very bottom of the page

BEFORE:

Gr8nola The Original - Old Website

AFTER:

 Gr8nola New Website The Original

 

While this list isn’t inclusive of every change made, these cover the major ones. Feel free to explore the site and let me know your feedback and if you agree or disagree with any of the changes, and/or have any suggestions. And... if you catch any bugs or glitches, shoot me an email with the details, and I'll send you a 10% off discount if I can verify it. Thanks! :)