Web Application
eCommerce
Amber-living is a German internet furniture and textile catalogue which aggregates data from different shops and marketplaces. Their goal was to redevelop a web application using modern technologies, so it would allow users to find appropriate products on-site easily, using filters and off-site via search engines.
Our task was to rebuild the web application so that the products were presented in a thoughtful and user-friendly way. In addition, our client’s main goals were to ensure a high position in search results and allow its customers to find the website easily.
We couldn’t miss implementing robust data filtering mechanisms. As the website’s product catalogue expanded, presenting products became a challenge. There were a large number of images but users didn’t see them at first; they saw a blank space and must wait for the products’ images to load. We had to prevent that.
Another aim we had to reach was applying appropriate data filtering. We needed to find a new solution that would provide us with the flexibility to query data as needed.
As a result of the cooperation, we successfully delivered a fully working application within the designated time frame.
The app not only met the client’s initial design and functional requirements, but also addressed key challenges such as data filtering and image loading. Now, when users are waiting for content, they are shown a low-resolution image preview before the ho-res one is loaded instead of empty space. That provided a smoother and more engaging experience.
Moreover, our SEO-focused approach not only bolstered the site’s visibility in search results but also led to an improved user experience. We seamlessly integrated a blog for our client, further enhancing their online presence. Additionally, the implementation of Enhanced E-Commerce functionality offered invaluable insights into user interactions, allowing for making data-driven decisions for optimising the website’s performance.
The client came to us with a simple version of the designs that we conceptualised and polished. To meet the primary project goals, we proposed utilising Gatsby and collaborated closely with the client to define the project’s scope.
The primary challenge in this project revolved around data filtering. The client was using Firestore to manage and edit data directly within Google Sheets. While convenient, Firestore posed limitations, as it does not support multi-column filtering due to its NoSQL database structure. Query indexing was required, making it difficult to execute multiple comparisons simultaneously. To overcome this, we decided to transition away from Firestore and establish our own backend using a PostgreSQL database. This provided us with the flexibility to query data as needed.
The entire project was constructed using Gatsby, with data sourced from BigQuery and Firestore. Each page represented a product category, initially populated during the website’s creation. Given the dynamic nature of the data, we implemented a cron service that was rebuilding the website every day at night.
To address the issue of slow image loading, we implemented asynchronous resource loading, also known as “lazy loading.” Images were now downloaded only when users were directly viewing them. This approach allowed users to see a low-resolution image first and subsequently wait for the high-resolution image to load.
In pursuit of the client’s goal to achieve a high search engine ranking, we used Gatsby, as it was the sole Static Site Generator available at the time, providing essential SEO optimisation capabilities. Additionally, to enhance the website’s SEO performance, the client requested a blog, which we successfully integrated. All website content was managed through the Contentful CMS.
Our team also introduced Enhanced E-commerce functionality through Google Tag Manager. This enabled the direct firing of browser events into GTM whenever a user interacted with a product that now had its own unique identifier (UID).
