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:
AFTER:
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:
AFTER:
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:
AFTER:
"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:
AFTER:
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:
AFTER (New "Gr8 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:
AFTER:
Social Grid
Shoppable links -- get your cart ready! :)
Product Page
I took some best practices from Amazon and other D2C focused brands and made the following changes:
- Larger product image
- Removed colored circle behind products to keep things cleaner
- 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)
- The thumbnail gallery of images are on the left of the main image on desktop vs. on the bottom
- Product variations (pack size) are all visible at a glance on desktop vs. a dropdown
- Customer now sees an "In Stock" or "Out of Stock" notification
- 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:
AFTER:
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! :)
