The making of Heloola

The Ensoul Diary is a non-periodical publication by Ensoul Web Development Studio, specializing in Shopify and WordPress.


Project: Heloola
Timeframe: Dec 2022 – Dec 2023
Site: https://heloola.com
Instagram

One of the ways to measure the quality of a company, in our opinion, is its sense of responsibility towards the client. Accepting an important and technologically challenging project is an assessment that cannot be taken lightly. We kept sisters Alice and Giada Cancellario on hold for almost two months while we evaluated whether we were capable of taking on their project, Heloola. “At the same time, we were praying” jokes Alice “then it happened, and now we’re happy”.

These same sisters are brilliant entrepreneurs who had started their project as an Instagram community, a sort of “book club 2.0”, and had the brilliant idea of making it a separate entity with some really interesting perks.
Since they can’t own Instagram, they moved their business vision onto their own Shopify e-commerce.

By paying a monthly fee, users receive a book and have access to a private community where they can share opinions and thoughts on each book, access physical and online events, and much more.

If they don’t like the book of the month, they can skip it and extend their subscription by one month.

This last feature, simple as it may seem, involved a very sophisticated technological change compared to the normal concept of membership managed by many apps.

Ensoul has been working using Shopify for a couple of years now, but this was not just any store:

  • It is subscription-based, but the skip month feature adds a much greater layer of complexity since it impacts also each user’s book collection.
  • The subscription is managed with a third-party infrastructure through the external app Appstle Subscriptions App.
  • The admins must be able to manage each book’s contents via an embedded form in the Shopify Administration Panel.
  • You need to create an external app to manage the users’ books collections which allows them to take part in the private community and access only the books you have received. The Heloola sisters already had a first version of this infrastructure but often errors would arise stopping or slowing down the required queues to ensure data synchronization.
  • It was necessary to not only enhance the internal profile, but also to increase the “community” aspect. The idea was to create a micro-forum for each book.

After a month and a half of experimentation, we took a deep breath and decided to take the risk of tackling such a complex project.

Far beyond any empty flattery, meeting Alice and Giada was absolutely inspiring. Their clear three-year vision for their website and business growth was a breath of fresh air. A breadth of vision we rarely met in these years. We felt this as so motivating to cultivate and expand our own as well.

We started from the beginning: the site must manage the highest possible range of accessibility. The design system, therefore, starts from elaborating the corporate identity of Heloola for this purpose.

While the code is being further developed, we are also experimenting and understanding the most correct user flows1 for onboarding people to the site.

Coding this would be crazy: so we decided to prototype the entire site in Figma2. It is a very complex work, which this photo only shows in part.

There is a lot of work to be done: the onboarding3 process involves a whole series of confirmations to be given to the user step by step.

Spoiler: once the project is launched, the conversion rate4 will increase from 0.4% to 2%.

The wording, the steps, all the mechanisms and each individual point are carefully considered and explained over and over again, so as not to leave anything to chance.

The important thing is the user experience once you enter the site: this is no longer a page where you can just access the exclusive contents or manage your subscription but it’s an actual user area with granular access – depending on whether or not you have skipped – to the individual book, and a real comment area similar to a private Facebook only for subscribers, for each book. In addition to this, bookmarks, access to events and a many other features.

Heloola is an e-commerce, however, above all. A Shopify ecommerce, whose features need to be extended.

We had to choose which tool to use to achieve all this; we could choose between the package provided by Shopify itself for Laravel development or use gadget.dev.

Gadget.dev, was launched with the aim of providing a platform for building apps with a use case also oriented towards the creation of Apps in Shopify. The advantage is that with the Shopify+Laravel package we would still have had to manage and host ourselves an infrastructure that took into account Shopify data and synchronized it and all these flows – ensuring smooth sailing with cronjobs and Laravel queues.
Gadget, on the other hand, provides them natively internally.

We are really enthusiastic users of Gadget. The ability to create custom data structures has allowed us to build entire areas with a low-code5 approach, with solid foundations. The most complex part was then the management of the user model6 flows, outlining not only the various event triggers behind them but also the user flows from a code point of view.

We don’t want to spoil all the content of the interview, which we invite you to listen to. It is in Italian but there are subtitles for your preferred language. 🙂


Listen on Spotify

Tech jargon

  1. User flows: the steps that users take to complete a task on a website or app ↩︎
  2. Figma: a web-based design tool that allows users to create and prototype user interfaces. ↩︎
  3. Onboarding: The process of helping users get started with a product or service. ↩︎
  4. Conversion: The percentage of users who take a desired action, such as signing up for a service or making a purchase. ↩︎
  5. Low-code: A development approach that allows users to create applications with minimal coding. ↩︎
  6. User model: A representation of the different types of users that interact with a system. ↩︎