Case study growcreator.eu - MVP of advanced product creator for ecommerce
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.
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
2Redux & Redux Thunk
4Elastic Search Algolia
5NodeJS Express JS + Redis
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.
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.