Skip to content

Kleta

Kleta logo

Kleta e-commerce migration to a modern stack and mobile app revamp.

Kleta is a bike-rental subscription platform. See how we helped them scale their strategy and platform to deliver a better experience for riders.

A mother cycling with her child in a rear bike seat on a city street, from Kleta's website hero

Project Overview

ABOUT THE PROJECT

Kleta is a Barcelona-based cycle brand. It provides service for renting cycles on a monthly and yearly subscription basis. The modern lock system of the cycle ensures peace of mind for users. Cycles are well-requipped with child seats, baskets, phone holders, and helmets. Kleta believes that everyone has a right to use a bicycle without actually owning one.

KLETA THROUGH NUMBERS

  • 350+

    Total Customers

  • 100+

    Monthly Subscriptions

  • 10+

    Stores across Barcelona

WHAT DID KLETA WANT?

Kleta was initially built on an old WYSIWYG (what you see is what you get) editor. To serve their users, they depended heavily on multiple plugins, 3rd party services, semi-automatic controls, and multiple data sources to keep the web and mobile apps in line.

As a startup, they hooked up a great system, and it was working fine, but as soon as their user base increased, so did their challenges. Scalability was impossible with their old tech stack, and our job was to deliver a robust, scalable, and easily customizable solution. In addition, the web app was struggling with lighthouse performance scores.

REQUIREMENTS FOR THE WEB APPLICATION

  1. Build a scalable e-commerce platform
  2. Zero dependencies on third-party services for bookings
  3. Common database (as a single source of truth)
  4. Stripe for subscriptions, products, & coupons
  5. City mapper integration
  6. In-app currency
  7. Rewards system

PROBLEM STATEMENT

The previous system had obstacles for the users when they tried to access the web app or wanted to purchase the product. The application was dependent on third-party services, which made the interface quite complicated for the user. In addition, there was a delay in placing orders as the fulfilment team had to enter some data manually.

Collage of Kleta screens: the subscription homepage, a payment-details form, and an account dashboard

Our Solution

Stack

  • FIGJAM: for collaborating with the team and brainstorming sessions.
  • Figma, for creating web and app User Interface while collaborating with the team.
  • NextJS, for creating the frontend web application and ensuring that this SPA is also SEO friendly.
  • NodeJS, for server-side development
  • Ninox was used for Kleta's database
  • AWS S3, for cloud file storage
  • Heroku, building, running and maintaining the application
  • Google Analytics 4 & Google Tag Manager for the data layer
  • Papertrail is used for logs on the Heroku server
  • i18Nexus, for translation management

Services

  • Built a solution with nodeJS, nextJS, Tailwind CSS, and AWS.
  • Added a custom auth-layer and ensured a smooth data flow between the ninox CRM, backend, and client app.
  • Created a completely new system using the Stripe API for subscriptions, products and coupons. The new system is streamlined and scalable, with everything in one place. It offers more control on all the important aspects of e-commerce.
  • New layer introduced using Google Analytics 4, covering a wide range of data to make better decisions.

Key Milestones

WHAT ARE LIGHT-HOUSE PERFORMANCE SCORES?

Lighthouse performance score is the sum of any website's performance based on its metrics. The lighthouse performance scores consist of 6 different web performance metrics

1- FCP (First Contentful Paint):

It is measured in milliseconds and is used to evaluate the loading time of a website at which the user has something helpful to look at.

Weighting:

2- SI (Speed Index):

It analyses the average time a page takes to load its content. The score should be as low as possible depending on the page's viewport size.

Weighting:

3- LCP(Largest Contentful Paint):

This measures the time it takes for the website to render the largest page element. Good LCP is considered when it is 2.5 sec or less. If it is either, then it needs improvement.

Weighting:

4- TTI (Time To Interactive):

It measures the time to load all the content of the website till it is ready for interaction.

Weighting:

5- TBT (Total Blocking Time):

It measures the response time of the website post user input. TBT measures the time when a CPU task takes longer than 50ms. For example, if one of the tasks takes 120ms, the overall TBT will add up to 70ms.

Weighting:

6- CLS (Cumulative Layout Shift):

It measures the stability of the content on the page and how much content moves around the page when it is rendered. The lower the CLS is, the better; when CLS is 0, it means that the page is entirely stable.

Weighting:

Obstacles

  1. The database was in a CRM, and it was important for Kleta to use it as the only data source. The importance was due to its ease of use for the customer service and workshop teams.
  2. In the previous system, the subscriptions were handled on an obsolete shopping cart, and payments were handled by stripe. It had two challenges, firstly, the subscriptions were not known to stripe, and secondly, the payments were handled as a custom order with limitations for easy refunds, subscriptions tracking, missed payments, etc. In short, the stripe was there, but its potential was underutilized.

Key Points

  1. We built a solution with nodeJS, nextJS, Tailwind CSS, and AWS.
  2. We added a custom auth layer and ensured a smooth data flow between the Ninox CRM, backend, and client app.
  3. We created a new system using the Stripe API for subscriptions, products, and coupons. The new system is streamlined and scalable, with everything in one place. It offers more control over all the critical aspects of e-commerce.
  4. A new data layer was introduced using Google Analytics 4, covering a wide range of data to make better product decisions.

Key Outcomes

  1. First, we saw a significant performance improvement as the solution was very agile and based on the modern stack ensuring the best practices.
  2. Better user tracking to shift towards data-driven development.
  3. Much better e-commerce.
  4. All data in one place reduces extra hops to multiple databases.
  5. Infrastructure management via Heroku. That enables better visibility of app performance and ensures timely actions.

Lighthouse Performance Before & After:

Get in Touch

Ready to Build Something Cool? Drop us a Message

Ready to help you realize your dream

Contact us

More case studies

Browse all case studies