Teabox: How We Improved Product Presentation and Navigation

Challenges 

The website's slow loading times severely hampered user experience and business performance at Teabox. Navigation was made more difficult, and potential buyers were deterred from investigating the website due to the lengthy loading times. Higher bounce rates and lower client engagement were the effects of this problem. 

Client Requirement/Business Objectives 

• Improvements to speed issues: 

The customer discovered their website loading slowly and sought solutions to improve the user experience. The website's loading speed must be optimized to ensure that the page loads swiftly and effectively, minimizing delays or user annoyance. We deployed several features, including caching, asset and code minification, picture compression, and server-side optimizations.

• Localized Website Experience for India and USA:

A single website that users could access in India and the USA was required by the client, with the user experience being tailored based on the visitor's location. Localized content, prices, promotions, and other information particular to a certain area should be dynamically shown on the website. Customers in India, for instance, would see India as their location and receive content and prices in INR, while customers in the US, on the other hand, would see the USA as their location and receive content and prices in USD. The objective was to retain a consistent online presence for the business while offering localized consumer experiences in each location.

• Showing specific images of products: 

The client wanted to display distinct photographs of each tea product to improve the customer's purchasing experience. To display the appearance, color, and packaging of the products, this would need to take detailed pictures of tea leaves, brewed tea, and other accessories. The goal was to visually engage clients and give them more information about the things they were thinking about buying.

• Auto-scroll: 

The client requested that certain internet pages have an automatic scrolling feature. This feature would make it simple for website visitors to browse through a variety of teas or related articles without the need for manual assistance. Implementing a fluid, automatic scrolling mechanism that would let consumers browse a variety of teas was a prerequisite. 

• The add-to-cart button on the collection page: 

The customer wanted an "Add to Cart" button on the collection pages to simplify the buying process and increase user convenience.

• Choosing a variant on the page: 

The client needed the option to choose product variants on the collection page to give customers more freedom and convenience when shopping. Customers should be able to select tea flavors or different package options (1 pack, 3 pack, 5 pack), for instance, without visiting different product pages. It was necessary to implement a variant selection tool that would let clients edit their orders on the collection page. 

Solutions

• Localization for website: 

Implemented location-based detection to determine the visitor's location automatically. Depending on the visitor's location, the website's content, pricing, and promotions are adjusted. Displayed the USA as the location for consumers in the US and India as the location for clients in India. 

• Improved issues with speed: 

A thorough investigation of the website's operation was conducted to spot any blockages. Used methods to optimize page loading time, like caching, minification, and image compression. Improved the overall performance of the website by implementing server-side optimizations. Improved JavaScript and CSS used.

• Showing photographs next to products: 

Pictures of tea leaves, brewed tea, and other accessories were taken in high definition. Specific product photographs were shown to demonstrate the shape, color, and packaging of the teas. Through visual depiction, the customer's comprehension and interaction with the products were improved. 

• Automatic scrolling: 

Added an automatic scrolling feature to the appropriate website pages. Made it simple to browse through the different teas or the advertising areas. It provided a fluid browsing experience and increased consumer convenience.

• Button to add to cart on collection page: 

Directly on the collection pages, an "Add to Cart" button was included. Facilitated the addition of products to shopping baskets without requiring users to visit individual product pages. It speeds up the buying experience and increases user comfort. 

• Choosing a variant on the page:

On the collection page, a variant selection option was implemented. Without leaving the collection page, shoppers could select package options (1 pack, 3 pack, or 5 pack) or certain tea flavors. Customers' buying journey was made more flexible and convenient.  

• Product ingredients added by meta fields.
• The checkout script adds discounts.
• Technology Utilized: Shopify Liquid, JavaScript, Shopify checkout script.