Case study – MVP of an advanced product creator for an e-commerce platform

This post contains a case study of the MVP project of the – application. The project was made from scratch by our team in close cooperation with the client. The application helps to configure and to assemble the optimal sets for home plant cultivation – growboxes. We have made this process much easier with a tool that chooses the best equipment step by step based on the given criteria and products selected in the previous sections.

The product has no equivalent, which makes it unique on a global scale. The plans for its development focus mainly on foreign markets. The main innovation is the algorithms for the optimal selection of such elements as lighting or ventilation, which we have implemented on the configuration path of the cultivation set.

Project schedule

We put the project into production in the first half of June 2021. The work on the MVP version took slightly over half a year.

November 2020 - December 2020
Product Design
December 2020 - January 2021
Mockup Design
January 2021 - March 2021
Initial product development
March 2021 - May 2021
Application tests and changes based on testing
May 2021 - June 2021
Configuration of analytical tools and production implementation
June 2021 -
Traffic generation and application development

Technology stack

React CRA
Redux & Redux Thunk
Redux Persist
Elastic Search Algolia
NodeJS Express JS + Redis
Strapi CMS

1) Product design

The client came to us by finding our website in organic search results. The GrowTent store has been operating on the market since 2012 and is one of the largest Polish distributors of professional equipment for growing plants indoors. The client’s main issue was a high number of users’ sessions stretched over time before completing the final content of the cart. Usually, users needed several days to select the cultivation set, which affected the number of abandoned carts. During this time, users repeatedly returned to the store, probably in the meantime browsing forums and checking information on the selection of appropriate growbox elements. They did not always found reliable and proven materials, often suggesting wrong items to select.

growtent eu case study MVP

The client wanted to organize the process of selecting optimal growbox elements and was looking for a web application contractor who could create a cultivation set configurator that would communicate with an operating store on the IdoSell platform. Additionally, users were prompted with products displayed by the configurator depending on the algorithms implemented in the project, ensuring the optimal selection of light, ventilation, or growing space.

We used configurators of computer sets or bicycles as initial inspirations. The product had no equivalent in its industry and was to be something completely new on the market. After reviewing the client’s idea, we created a diagram of functionality and user stories. Based on them, the project was to be approved.

2) Mockups Design

A big challenge in UX design was navigating the website as the idea of the configurator assumed adding more products step by step. Additionally, the algorithm defined the list of products displayed in the further sections based on the user’s previous choices.

Growing plants indoors only seems to be an easy process. In fact, beginner ‘growers’ have a lot of problems choosing the optimal equipment, so the results of their cultivation are much worse than expected. Completing a ‘growbox’ is often preceded by searching for information on the optimal amount of light, types of ventilation, selection of the appropriate substrate, etc.

We created the mockups using AdobeXD. The prototype contained over 60 views. We added some animations and elements related to the user experience when we run the first tests of the application.

mockups growtent

3) Programming the first version of the product

During the programming phase, a few problems emerged that we had not foreseen before starting the project. They were mainly concerned with communication with the store’s API. Finally, we decided to use Algoli – a tool available in the SaaS model that ensured the correct download of products.

Growtent Kreator case study

On the front-end, we used React CRA to render the main pages statically. Additionally, advanced Redux and Redux Thunk were used in the project, thanks to which we handle asynchronous queries. We have also implemented Redux Persist memory, so the state of the form is remembered. Traffic is directed to an external store on the IdoSell platform, where a Javascript script creates a cart with products ready for purchase. The algorithm in Redux verifies the parameters of products in an advanced way and optimally selects them. It won’t allow you to buy products that don’t match.

We synchronized the back-end with the external Algolia Elastic Search tool, which indexes the products and allows you to straight away browse the database using many parameters. We did synchronization using NodeJS Express JS + Redis to queue synchronization requests to the IdoSell back-end. We intended to use the IdoSell API, but it made it impossible to construct AND OR conditions. We have also equipped the application with Node.js and Strapi CMS for adding content with an editor module.

We have also equipped the application with Node.js and Strapi CMS for adding content with an editor module.

4) Application tests and changes based on them

The first version of the product allowed users to configure the cultivation set and place an order in the store, but the website’s navigation turned out to be a big issue. Most of the buttons in the menu are inactive until the user goes through the further steps. People who tested the application reported that messages explaining why the users cannot make particular choices are needed.

We decided to add pop-up windows to the inactive components from the MaterialUI library on which we based the front-end of the application. We have added automatic messages to the ‘Skip section’ buttons, informing that the user does not have to choose anything here and may proceed further. In addition, we have also distinguished messages and the choices suggested by the configurator.

Tests and implementations based on them lasted about 1.5 months. Once we completed this stage, the application was ready for production implementation. Of course, we assumed that some errors and improvements would have to be made based on the data from analytical tools.

5) Configuration of analytical tools and production implementation

We implemented tracking scripts in the project using a pre-configured Google Tag Manager application. In addition to analytical tools, we also added applications that allow creating heat maps and recording user sessions. The collected data is used for product development and changes to improve the user experience.

growtent kreator analytics

In the application, we track most of the events, such as button clicks, adding products to the cart, proceeding to the checkout. Events are measured both from the level of Google Analytics and Pixel Facebook. Event analysis allows you to segment your traffic in a better way and create more accurate audiences.

6) Traffic generation and application development

Already on the concept stage, we assumed the application traffic would base on remarketing users who previously visited the online store and did not make a purchase. It was very likely that such people had a problem completing the appropriate cultivation set on their own. The configurator guides them through this process step by step, at the same time educating them in the selection of the right solutions and suggesting suitable products.

7) Office growbox

As part of the project, we also assembled the growbox in our office, which we used to grow chili peppers.


8) Contact

Let us know if you are looking for an experienced team of programmers who will implement a high-quality project according to the established schedule.

ikona wiadomości mailowej
ikona telefon
+48 509 280 539

      Name (required)

      E-mail address (required)

      Phone number

      Text of the message

      Add file: