Out of the Box E-commerce Test Website

Image: Out of the Box test site homepage

E-commerce | Build, Improve | 2022, 5 weeks | Website Link

Project Overview: 

Out of the Box is a refill store selling home goods and personal care products out of a van in the Seattle eastside areas. Here’s how I built an e-commerce test site for the store where the homepage is 87% less carbon-heavy and the shop page weight was reduced by 69% of the store’s current Wix site.


Table of Content:


Challenges:

Aline runs her online store on Wix, which she said it’s cheap, easy to use and update, and compatible with the point-of-sales system in her store. Although she didn’t yet need a new website on a new platform, she’s more than happy that I offered to build a test e-commerce website using sustainable web design for free. She wanted her online store to be more eco-friendly. 

  • Page bloated – The current Wix website depends on many third-party tools, which weigh down the site and worsen the web performance. For example, 
    • Homepage: weighed 5.24MB, had 173 requests, and took 16.8s to fully load, based on GTmetrix.
    • Shop page: weighed 1.56MB, but when loaded all 6 sections, it climbed up to 2.91MB with 245 requests.
  • Some features are difficult to enable in Wix 
    • Product review: Aline mentioned that it’s difficult to integrate the function that lets customers review products.
    • Selling product subscriptions: Aline wanted to be able to sell subscription-based products and wondered if it’s possible on WordPress. 

Goals:

Based on the challenges, here are the goals I set for this project:

  • Primary: Making a fully functional e-commerce website where users can:
    • Buy products
    • Book services
    • Pay online
    • Receive an email notification about their purchase
  • Secondary:
    • Reducing page weight to be less than 2MB.
    • Enable product review and subscription selling functions.
Image: The current Out of the Box Wix site
Above: The current Out of the Box Wix homepage

Main tools & plugins:

WordPress,Open-source Content Management System (CMS)

Neve,“Neve is a super fast, easily customizable, multi-purpose theme. It’s perfect for blogs, small business, startups, agencies, firms, e-commerce shops (WooCommerce storefront) as well as personal portfolio sites and most types of projects.”

Local,A tool that enables local web development on your computer

Elementor,Page builder tool

WooCommerce,E-commerce tool that enables online shopping functions

WooCommerce Payment,E-commerce tool that enables online online payments

MailPoet,Email management plugin that allows WooCommerce emails customizing and prevents emails landing in the spam box.

Smush,A plugin that compresses, resizes, and lazy loads images

W3 Total Cache,A plugin that caches files to speed up load time

CanvaA free tool for making graphics

Learn more about each tool.

Execution, issues encountered, & solutions

  • Set up the workspace locally
    • Issue: I planned to build the site locally on Local so that I could speed up the process than doing it remotely. But I realized that I wouldn’t be able to monitor the website’s emissions throughout the development process with an online calculator.
    • Solution: I changed my plan to build the site remotely using my existing multisite network. This option lets me measure the carbon emissions and also share the web progress with Aline without trouble.
  • Import products into WooCommerce with a CSV file provided by Aline
    • Issue: Unable to import the products properly due to formatting issues e.g. several items are in the same cell, missing product images due to improper URL address, etc.
    • Solution: Removed most of the products from the inventory and corrected enough product information to display on the storefront and measure the page weight. I also researched how to format the CSV file correctly before exporting and importing it to WordPress. This will be helpful for future projects.
  • Keep things lightweight, simple, and well optimized
    • I used the theme Neve because it’s a lightweight theme (28KB for a default WordPress site) and is optimized for WooCommerce.
    • On the homepage, I minimized the top picture dimension to ⅓ of the original file and displayed it side-by-side with the call-to-action button linking to the About page. I also replaced pictures in the section “Shop Now” and “Ways to Shop” to cut down on energy use.
    • For image and performance optimization, I used Smush and W3 Total Cache to compress images and cache files. These practices cut down energy use and reduce load time.
Image: Shop-now sections on Wix and WP
  • Used WooCommerce and WooCommerce Payment to run the online store
    • I learned to use WooCommerce, including setting up products as “Simple product” and “Variable product” from Ferdy’s online tutorial.
    • I managed the product inventory and formatting and set up the payment gateway using WooCommerce Payment.
  • Set up MailPoet as an email service provider to handle all email communications on the site
    • Issue: I tested sending an email receipt to a customer and an order alert to the web admin but none of it was received. I took too long looking into the MailPoet setting and tried to troubleshoot.
    • Solution: I reached out to the MailPoet support team and asked for help. They gave me a link to an article addressing how to set up MailPoet properly. I followed those steps and was able to solve the problem.   

Results:

I achieved both primary and secondary goals:

  • Made a fully functional e-commerce website 
    • Out of the Box WordPress website enables users to buy products, book services, pay with their debit or credit card, and get email notifications of their purchases.
    • Customers can leave a product review easier. Aline also doesn’t have to add another plugin to enable this function as it’s free to use through WooCommerce.
    • Aline can offer product subscriptions through WooCommerce.
Image: Receipt sent to customer's email
Above: Receipt sent to customer’s email
Image: Product review function enabled
Above: Product review function enabled
  • All of the pages are more lightweight (weigh less than 600KB) and less carbon-heavy. For examples: 
    • The homepage’s carbon emission is reduced by 87.1% of the Wix homepage (from 1.4g to 0.18g of CO2 per page view based on Ecograder.) The page weight shrinks 87% (from 4.48MB to 583KB according to GTmetrix.)
    • The shopping page weight was reduced by 69% of Wix’s. It loads separately page by page. One page has 16 products and weighs 487KB, while the Wix’s, having 18 items in the 1st section, already weighs 1.55MB. When loading all 6 sections on the same page, the weight climbs up to 3.05MB
Image: Web carbon scores in comparison
Above: Web carbon scores in comparison

Testimonial:

“When Tanakan asked me if she could help me “greener” my website, I was thrilled to see what we would learn and what the new site would look like. At first, I was kind of horrified by the numbers, but she was reassuring by offering professionals and realistics solutions to my problem.

Tanakan is very organized, efficient, invested and she knows her topic very well.
During the process she communicated very well, and was very adaptable to my schedule, creating a video instead of rescheduling a meeting too many times. I think she is very competent but also very invested in what she does, which is the key to creating great team work.

I especially liked the learning I got from this project. How we can make a difference by only applying simple rules, like reducing the size of the photos…
In terms of functionality, It is very simple and straight to the point. The navigation is smooth and easy to use.
In terms of design, once again it is simplified and more minimalist. I am a very creative and visual person. At this point, in my opinion, the website is efficient and functional but it lacks photos. I like the use of icons but in my industry, aesthetic and visual can be a big part of the buyer decision. For my e-commerce, I think we need more videos and visuals about the products, the process, so it is reassuring and easy for the client to take the first step.
In terms of sustainability, our goals have been reached and are aligned with my values.

I definitely recommend Tanakan’ services.”

Aline Bloch – Owner of Out of the Box Eco Store