Smiling Rocks is a direct-to-consumer social good company that sells beautiful lab-grown diamonds and donates 10% of each purchase to charity. Buyers can even choose which industries their charitable contributions support. Smiling Rocks reports that lab-grown diamonds are 100% identical to mined diamonds in terms of physical, chemical, and optical composition; but they cost about 40% less. All told, Smiling Rocks’ value proposition is that customers can get a bigger diamond that costs less, while at the same time supporting important social causes.
While Smiling Rocks was looking for help wrangling in a large number of small bugs scattered across the site, the opportunities for highest impact were on the product listings pages, among the most technically complex pages on the entire site.
Smiling Rocks sells hundreds of SKUs, creating a very complicated product hierarchy and the need for a complicated technical architecture. That makes the filters on the listings pages essential, since they allow customers to browse large collections based on key characteristics, such as carats, prices, styles, and more. The company organizes their fine jewelry into curated collections that make it easy to browse complementary pieces; however these collections vary widely in number of products, making it even more challenging to design a product listing page that excels at every scenario.
The listings page was sluggish, taking upwards of several seconds to load and reload after every interaction a user made. Worse, if a user clicked into a product and then went back to the listings page, the listing reloaded to the top with all of the view changes lost.
Additionally, due to the large size of their product catalog, Smiling Rocks populated their product images by directly exporting their high-resolution photography to the server with no intermediate processing. While it looks beautiful, loading these enormous images, even on a mobile connection, is unnecessary, leading to long load times and excess data usage.
Smiling Rocks asked Empower Ideas to help improve the site by concentrating on these essential opportunities.
Reviewing the results of a search engine audit, we found that large images and slow loading were two of the most impactful points against high SEO marks on Smiling Rocks. We decided to prioritize our on-the-fly image processing solution, which would serve dynamically resized images optimized for whatever screen size and connection speed a site visitor might be using. This would ensure, for example, that a small phone wouldn’t try to load a TV-sized HD image over a slow rural connection and would instead keep the site much snappier.
One challenge we ran into early on in this process was that Smiling Rocks was actually storing images on two different servers, depending on where on the site the image was being used. As a Shopify store, some basic product images were uploaded directly to Shopify’s servers, but most were on a third-party server, limiting our ability to use Shopify’s built-in image processing capabilities. Moving the images wasn’t an option, due to the sheer volume of images and the desire not to change Smiling Rocks’ existing photo upload workflow.
To work around this constraint and resolve this problem, we integrated a service called Cloudinary. Cloudinary handled the resource-intensive image processing, but we still had to configure and integrate it with Smiling Rocks’ applications and tweak the settings continuously to find the best balance of image size and quality for the Smiling Rocks site. Once completed, Cloudinary helped to ensure that all images loaded quickly and at an appropriate size.
We then turned our attention back to the product listings pages, which presented some frustrating user experiences at the beginning of our engagement.
We prototyped out several approaches to solving the problems, beginning with paginated listings pages. We had noticed that the listings pages showed (and loaded) all products that met the search parameters, which was not an optimal experience for very large collections, hence our consideration of pagination. We also prototyped a “load more” version, which would load an additional 30 products on the same page with each click. Then, we tested.
Smiling Rocks ultimately determined that they preferred the “load more” approach and we began to implement code improvements. We held all listing page customizations, including scroll position on the page, in memory, so that they could all be reloaded even if a user clicks away, such as to look at a product and then click back. We deferred loading as much of the page as possible to load in the background, which made the site feel snappier since it was responsive to the user more quickly even while still loading all of its complex properties. And once every element of the page was fully loaded in the background, the user was able to change characteristics and filters that took effect instantly, making the site feel more like a native app.
Although these updates were individually small, they added up greater than the sum of their individual parts. Our changes to the Smiling Rocks code helped to significantly advance the user experience, improve factors that lead to high search engine optimization, and maintain an existing backend workflow that performed well for the clients’ needs. All told, Empower Ideas helped Smiling Rocks’ diamonds shine even brighter.
