Hooray For Steady Growth!
We stripped it down to the basics and tightened up this vibrant food and beverage company’s checkout funnel resulting in fewer lost transactions, more products added to the cart, and more people reaching the checkout.What we did:
Getting to the Core
The company had an already established brand but wanted a fresh new look to go with their healthy, fun product range. We know that revitalizing an eCommerce site would need more than just a tweak here and a splash of color there.
The ingredients for a true revamp include making data-driven and informed UX and UI design and development improvements. It’s not all about getting technical to make the numbers shine, but also, to maintain brand integrity with all changes made.
Our customers have unique brand voices, and they’re always safe with us. We love them just the way they are! We just want to help them show the world their awesomeness in the best possible way (while improving their bottom line in the process!) And that is exactly what we did with this client, this is how.
We used data from Shopify Analytics, Google Analytics, and Lucky Orange to do a range of audits, including:
- Analytics research - a conversion rate audit, traffic audit behavior flow, and content optimization
- UX audit - examining the interaction between potential or actual customers and the Raw Generation brand.
- UI audit: visual aspects and responsive design audit
Exploring mobile vs. desktop
Did you know that Google ranks websites based on the mobile versions first? This is why we always start with mobile. We discovered a few things when we looked at the split between our client’s mobile and desktop sites over the course of a year:
- Mobile generated more traffic than desktop.
- More transactions were made from mobile devices than desktops.
- The mobile bounce rate increased significantly.
- The desktop bounce increased as well, but not nearly as much as mobile.
These findings made it clear that our client’s customers preferred shopping on mobile devices, and that we have to make design improvements with a mobile-first mindset.
Lucky Orange Recordings
When we checked out Lucky Orange recordings we found that the long scrolling page our client had on their site interfered with conversion rates. Users who took the time to scroll down to the bottom, scrolled right back up to begin using the site. Results from Heat Map tracking found:
- A large percentage of users tried to hover over the packshot on the home page.
- More than half of users who toggled the 3/5/7 day options could not see the price and bounced.
- Users who read an article were more likely to make a purchase.
The findings clearly indicated that more information was required on the home page upfront and that much of the scrolling should be eliminated to make it easier for users to navigate the site and to prevent bounce.
Improving scrolling on the site
Instead of making users scroll through all the content when they want to skip a section (and possibly getting annoyed and leaving the site!), we made some design changes:
- We decided to emulate the ‘swiping’ trend as found on ‘Stories’ on social media platforms like Instagram and Facebook.
- We introduced bi-directional scrolling.
- We built the desktop redesign based on the mobile version, which is the most common way to build sites.
- We clearly marked menu touch elements and the path to purchase making it easier for users to jump from section to section.
- Added visual cues included directional arrows, page numbers, ‘dots’ along the bottom of the page to show which section the user is in, and a link to the start visible at all times.
Improving the check-out process
When shoppers are faced with too many options during the check-out process they tend to get frustrated or confused and may even end up leaving the site. To combat this we made the following changes:
- We added a new step-based Add To Cart functionality with a single option ‘Checkout’ button, which leads to a page that gives the customer a small set of options to choose from, like flavor and quantity.
When we redesigned this company’s eCommerce site our focus was to make data-driven design decisions. We focused on steady and growing CRO wins. Here are some of the results we experienced almost immediately across the site:
- We had an immediate increase in Add to Cart with related incremental increases in Checkouts, Sessions Converted, and revenue.
- Even during the period of adjustment, we didn’t experience a significant drop-off from returning visitors. They quickly adopted the new mobile bi-directional scrolling.
A month later we had some impressive numbers to share with our client!
- Add to Cart increased.
- Checkouts increased.
- The eCommerce conversion rate increased.
- Transactions and revenue increased.
- Bounce rates drastically decreased.
More traffic to an eCommerce site usually results in a drop in conversion. However, even though there was a 5X increase in sessions our redesign not only kept results steady but helped them grow.
Overall, we had excellent results and loved working with the team at this incredible company. Here’s to many more happy and healthy years of eCommerce bliss for them!