Tropicfeel

The main goal of the business was to increase the conversion rate, but as the Tropicfeel development partner, we were responsible only for the tech part of the project. After research we defined the three main goals that would contribute to increasing the Tropicfeel conversion rate:

• Creation of a design system
• Usability improvement
• Increase of the website speed across all devices

Another important task was implementing new functionality into the Tropicfeel Shopify theme, like the cookie acceptance popup or the multilanguage support.

We started the work by learning every detail about the Tropicfeel ecosystem — it’s impossible to build great functionality without a deep understanding of the specifics of the client’s business and how it operates.

Then our UX/UI designer conducted an audit of the existing Tropicfeel website and highlighted all errors that significantly decreased the store's usability, confused customers, and lowered conversion rates. The client approved the suggested UX/UI improvements, and we implemented them later during the development.

The old Tropicfeel theme didn’t have a design system. When a design system is implemented into the website, its management is quick and effective — if an element is changed in one place, it is automatically changed everywhere. When there is no design system at all, developers have to manually change each required element everywhere on the website, which takes a lot of time and is very expensive.

To implement the design system, we used Bootstrap — it already had some pre-installed elements, which helped us increase quality and do the task faster.

Alongside conducting a UX/UI audit, we started implementing new functionality into the Tropicfeel store. But the more we were working with the existing theme, the more problems we encountered along the way. The development that had been previously done for Tropicfeel was of very low quality, and it didn’t correspond to any software quality standards — even some basic things like proper code structure had not been implemented.

This led to two main project challenges. First, implementing any functionality to the already existing messed-up code required enormous time and mainly consisted of bug-fixing. Second, it was impossible to predict and adequately estimate the development work on the project because of these constantly emerging bugs.

Keeping in mind the roadmap with all the functionality needed to be implemented, the project cost would skyrocket and the final result would be unstable and of very poor quality.

The solution
Here at SpurIT, we have high development standards, so we simply couldn’t put up with the situation. We prepared a detailed technical report on the current state of the theme, outlined the bloated cost of its current and future technical maintenance, and suggested the client build a new custom theme from scratch.

For Tropicfeel, the development of a custom theme would be the best and most cost-effective solution due to several reasons:

• There were a lot of untypical elements in the Tropicfeel store, and implementing them into a ready-made theme would cost the same as creating a new one from scratch, but while doing so, we would face the limitations of a ready-made theme
• One of the project goals was to increase the website’s speed load, and custom themes have much higher speed load rates
• In the future, the cost of implementing any new functionality would be much lower due to the high-quality code and well-designed theme architecture of a custom theme; they would also be implemented much faster

The client opted for the custom theme, but at the same time, we also needed to implement some of the most required functionality into the existing Tropicfeel store. This was needed to ensure the proper work of the business while the new theme was being created.

The client had just a vision of the new functionality required for the business but didn’t have any technical documentation necessary for its development. We created it fully on our side, from the general concept to specific development tasks, and properly documented every stage. After the client’s feedback and approval, we started building the new theme.

During the development, we relied on the old theme as well — we knew what store pages and what functionality already existed and built the same but using all the latest software standards. We didn’t use the heavy and bulky jQuery frameworks, unlike the old theme, and opted for JS instead. This helped to make the theme much lighter and faster.

Tropicfeel often launches new products, and some of these products are crowdfunded. To showcase to the potential customers all details of a product, each product page has comprehensive text descriptions and high-quality images and videos. As a result, ensuring a high-speed load of a website with so much content was also one of the project’s challenges.

In the end, we succeeded here as well. For example, the homepage of the old theme was loaded in 2.98 seconds, and the homepage of the new custom theme takes only 665 milliseconds to load.

Also, its overall weight was reduced from 9.2 MB to 2.5 MB, although the new homepage is much more functional, has more content, and the functionality behind it works much faster.

Tropicfeel constantly changes and evolves as an innovative startup, and every time a new product is released, a new product page is created.

According to the classic website development model, each update like this is done by a developer, which is expensive and time-consuming. We knew how inconvenient it would be for the business to constantly outsource these tasks and suggested Tropicfeel develop the store management functionality to allow the content management team to create and set up product pages in-house easily. The developers, in this case, would be needed only for some specific tasks that could not be implemented with the typical page elements.

The client approved our suggestion, and now the Tropicfeel theme is fully compatible with the online store 2.0 Shopify functionality, including dynamic sections. This allows the client to reuse all already existing theme elements and significantly lower the operational costs in the future.