Part I

Our team created the project from scratch in close collaboration with the client. The application allows users to build optimal sets for home plant cultivation, so-called growboxes. The tool we developed facilitates this process by selecting the best equipment step by step based on the given criteria and items selected in previous sections.

It has no equivalent on an international scale, making it unique. Its development plans are primarily focused on foreign markets. Among the most significant innovations are the algorithms for selecting lighting or ventilation options, which we implemented in the cultivation set configuration path.

Project schedule

The project was implemented in production during the first half of June 2021. The MVP version took just over six months to develop.

November 2020 - December 2020: Product Design

December 2020 - January 2021: Mockup design

January 2021 - March 2021: Developing the first version of the product

March 2021 - May 2021: Application testing and changes based on it

May 2021 - June 2021: Configuration of analytical tools and production deployment

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

Our client found our website through organic search results. The GrowTent store has been on the market since 2012 and is one of the largest Polish suppliers of professional equipment for indoor plant cultivation. 

The main issue that the client wanted to resolve was the excessive number of user sessions that lasted too long before the shopping cart content was completed. In general, users took several days to select a cultivation set, which resulted in a number of abandoned baskets. The users frequented the store repeatedly during that period, presumably browsing forums and checking the information on selecting the right growbox elements. However, they weren't always able to find reliable and proven materials, as they often suggested selecting wrong elements.

Clients wanted to organize the selection of growboxes and were looking for a web application that coordinated with a running store on IdoSell's platform in the form of a grow kit configurator. Furthermore, the products that were suggested to users and displayed by the configurator would be determined by algorithms implemented as part of the project to ensure optimal selection of light, ventilation, and growing space.

Initially, we were inspired by computer set or bicycle configurators. The product had no equivalent in its field and was meant to be completely unique to the market. Following our understanding of the client’s idea, we created a functional diagram and "user stories" that served as the basis for the project approval.

2) Mock-up design

The navigation of the site was a significant challenge in UX design because the concept of the configurator was to add new products on a "step by step” basis, and the list of products displayed in subsequent steps was based on choices made by the user previously.

One of the first low-fi mockups

The process of growing plants indoors seems simple at first glance. Quite often, beginners fail to choose the right equipment, which means that their crops do not meet their expectations. Before completing the "growbox", it is often necessary to search for information on the best amount of light, type of ventilation, and substrate to use.

Mockups were created with AdobeXD. There were over 60 views in the prototype. Once we ran our first tests, we added a few animations and elements to make the application more convenient to use.

3) Programming the first version of the product

In the programming stage, new problems emerged that we hadn't anticipated. The problems were mainly related to the communication with the store API, so we decided to use Algolia, a SaaS tool that ensured the correct download of products.

We used React CRA for rendering the main pages in a static manner on the front-end. In addition, we used advanced Redux and Redux Thunk in the project, which enabled us to support asynchronous queries. Also, we've implemented Redux Persist memory so that the form's state is remembered. 

Traffic is directed to the external store on the IdoSell platform, where Javascript creates a shopping cart with items available for purchase. The algorithm in Redux verifies product parameters in an advanced way and selects them optimally. This algorithm also prevents the purchase of mismatched products.

Elastic Search Algolia, a tool that indexes products and enables instant searching of the database by multiple parameters, is synchronized with the backend. Synchronization is performed using NodeJS Express JS + Redis to queue synchronization requests to the IdoSell back-end. Originally, we intended to use the IdoSell API, but it prevented us from creating AND OR conditions.

In addition, the application contained a CMS with Node.js and Strapi CMS for adding content along with an editor module.

4) Application testing and changes based on it

The first version of the product enabled users to customize a crop kit and place an order in the store, but navigation on the site proved difficult. There were many buttons in the menu that weren't active until the user completed the steps. Those who had tested the apps had reported that messages are necessary to explain why certain choices are not available.

We decided to add pop-ups to inactive components from the MaterialUI library, which is used for the application's front-end. We added automatic messages to the "Skip section" button indicating that the user need not make any decisions in this section and can proceed. In addition, we highlighted the messages and options suggested by the configurator.

The tests and implementations based on them lasted about 1.5 months. The application was then ready for production deployment. We had assumed that some of the improvements would need to be made using data from analytical tools.

5) Configuration of analytical tools and production deployment

We implemented tracking scripts using previously configured Google Tag Manager. We have also integrated applications to create heat maps and record user sessions in addition to the analytics tools. The collected data was used for product development and improving user experience.

We track most events in the application, such as clicks on buttons, adding products to the cart, and checkouts. The events are measured both by Google Analytics and Facebook Pixel. Event analysis allows us to better segment traffic and create more precise target groups.

6) Traffic generation and application development

At the concept stage, we assumed that the application's traffic would come from remarketing users who previously visited the online store but did not make a purchase. Such people were probably unable to come up with a suitable crop set on their own. A configurator was to guide them through the process "step by step", educating them while recommending appropriate solutions and products.

7) Office growbox

We also built a growbox for growing chili peppers in the office as part of the project.

Part II

Below you will find descriptions of the development and changes made to the MVP (Minimum Viable Product) version based on data=driven customer guidelines. In this post, we'll discuss how heatmaps, recordings of user sessions, and data from Google Analytics helped us improve the new version of the product.

Production implementation and traffic generation for MVP version

It was assumed from the start of the project that the MVP wouldn't be the last release of the product. It had no comparable products on the market, and a large part of the implementation was innovative and required validation in a production environment, generating traffic of real users. Most of our assumptions were verified in practice, but the analysis also revealed problems users had, which we hadn't anticipated when designing the application.

The application generated traffic from multiple sources. Our strategy involved creating groups of recipients from people who were seeing the client's brand for the first time as well as running remarketing campaigns among previous visitors of their shop online. GrowTent is one of the top companies on Poland's market in its industry and a popular choice for shoppers from all over Europe, so we had a large amount of data to use to develop the project with the client.

Data from analytical tools

Before launching the configurator, we configured basic tracking scripts via Hotjar, Google Analytics, or Facebook Pixel. It was all implemented with Google Tag Manager.

The applications collected data for several months. During this time, we optimized campaigns and developed a package of changes to be implemented in subsequent sprints together with the client.

The implementation of GrowCreator V1

A client was actively involved in the development from the beginning of the project. Based on the analytical data and more than 10 years of industry experience and knowledge, the client's team was able to determine users' needs and translate them into the application's logic. We were tasked with providing feedback on the suggestions for changes and recommending UX solutions, as well as creating a prototype and the final version of the configurator.

The main suggestion from the client involved dividing the configurator into two paths:

1. Basic - a set of 8 steps, some of which had ready-made product packages from a specific section. The crop set configuration takes five to ten minutes and is meant for users who do not require full customization of the crop set.
2. Advanced - a set of 21 steps. It takes  20-35 minutes, and is meant for advanced users who want full control over the selection of components as well as full access to the whole offer. Additionally, this path allows users to add parameters of parts they already own. Using this approach, the configurator is able to match the components with the appropriate products in subsequent steps - the algorithm displays the specific components based on the inputted data.

We have made significant improvements to the UX too. We rebuilt the header so that users could see what the next steps were, as well as changed the way filters are presented and how the most important information is displayed.

Summary

It was necessary for the product's second version to undergo both front-end and back-end changes. However, these modifications did not significantly affect the whole logic and concept of the application, so we managed to implement it in 3 two-week sprints. Its smooth implementation and rapid development can be largely attributed to the precise guidelines from the client, as well as to a solid foundation laid out in the MVP version of the project.

Currently, in the new version, we have implemented analytics, and we are analyzing the first data from tools to make further enhancements to the configurator.