A robust, end-to-end subscription model solution
Bombay Shaving Company (BSC) looked to craft a system that would allow shaving become an immersive, joyful experience. At first look, not much has changed about how men shave and purchased grooming products since the time of the electric razor. However, BSC looked to take a cut above the rest and have an e-store as their primary distribution channel. An end-to-end robust solution that focuses on authentic quality and style and a flexible, feature-rich platform that gives customers complete creativity and flexibility. Kuliza set out to build the subscription-based e-commerce platform for the start up.

 Objectives

  • To build a robust end-to-end e-commerce subscription model having a seamless experience
  • Feature-rich flexible architecture built to scale more than 1 million+ user
  • Clean uncluttered and premium user experience to maximize visibility of product
  • Integrate with third party tools and customized features to suit business needs

Screen Shot 2016-08-31 at 3.04.15 pm (1)

SOLUTION:

DESIGN
UX & Design

Catering to a niche target audience, the website was conceptualized and designed to communicate the brand’s story through their unique quality of products. To meet the task, our first step called for an intense benchmarking and research for competitors in the same domain. In most pages that we scrutinized, we identified clear and concise layouts, prominence to images and use of vibrant colours. Best practices also focused on separated content flows and expert recommendations or videos on the homepage. The fonts were thin and sophisticated. Best practices focused on a minimal number of steps before check-out and each page was a classic example of sales funnel where the visitor is already in the process of checkout before they even know it. Interactive elements sticky navigation panel kept the page flow at the forefront and provided a fun, seamless experience.

Observing best practices, the goal was to establish the mood as quickly as possible. Quick and easy flow throughout the website was a prime concern. The main differentiator was to define the commerce for a subscription model instead of a regular aggregator commerce. In addition, the product required presenting the journey with the richness of a premium feel.

To facilitate this, it was decided to have a frozen horizontal navigation panel for ease of access to core functionalities, regardless where the user might be in the midst of page content. Prominent call to action buttons on the top right of the navigation panel keeps the user focused on buying the products. Seamless screen scrolls facilitated free consumption of page content at leisure. The subscription and payment flow has been made intuitive with a minimal number of steps and is hassle-free. Prominent images and a bright turquoise theme bring more of a luxury emotion with a classic feel. The layout was clean and concise to provide an intuitive design. A sleek black theme was chosen for the ‘coming soon’ page to communicate an element of mystery and provide a premium classic feel.  The fonts are bold and well spaced out to solve the readability vs legibility issue. Maximizing visibility was key. To achieve this, luxurious white spacing with prominence given to products and a clean and an uncluttered layout was utilized.

Every subscription provides the user with both the ‘buy’ and ‘subscribe’ option for his convenience. The navigation flow has been designed such that there are only four steps before making a purchase. From opting to subscribe, the customer chooses his frequency and the start date before choosing his contents. There are mainly three types of packages he can choose from:

Bundle: A curated group of items decided as per use
Starter: A small kit based on bare necessities
Individual: Instead of choosing a group, he can also choose to purchase a single product

 

002 (1)

To add value addition to the experience, a ‘gift’ feature was added to the concept. Customers at online stores often purchase gifts for special occasions and gift subscriptions can be purchased exactly like purchasing other products on the page. This provides flexibility to the customer to purchase subscriptions for family and friends and the products can be delivered to multiple pin codes, while maintaining the recipient’s freedom of choice with respect to the period of subscription.

In order to build trust, the homepage is accompanied with various testimonials, product videos, and doctor stories. This assists with customer questions with an almost personal one-to-one experience, almost acting like a visual FAQ. Not only do the testimonials and product video provide quick information to products and reassurance, but they also put potential customers who have never used the products at ease.

001 (1)

FRONTEND:
A landing page is the first impression of any website and Bombay shaving company needed a memorable brand pageAt the front end, parallax effects and UI transitions effectively communicate the brand story and create uniqueness. Product descriptions are provided with stroll magic with collapsible banners to provide static scrolling.

HTML and CSS were used to create the basic skeleton of the website.  As the website was to be mobile responsive, our choice of the framework had to be Bootstrap which provides a fluid grid layout that dynamically adjusts to proper screen resolution. Additionally, using the Materialize library provides a single underlying responsive system across all platforms to allow a more unified user experience.

BACKEND:
As part of the technical implementation, the open source framework Magento has been deployed at the core. What separates this platform from others is its ability to easily integrate with thousands of 3rd party applications. In addition, Magento comes with several inbuilt features like multi-store and omnichannel capabilities, no proprietary technology lock-in, SEO multi-currency among others. With the assistance of Magento, we were able to integrate several important features that include gifting, promo codes that could be redeemed by the customer on purchases, store credits that are provided with every purchase, Invoicing, reports, Order and customer management among other others.

While we cannot deny the fact that Magento comes with a robust package of out-of-the-box features, the platform still lacks in performance when it comes to customizations and scalability. The open source software is also not mobile/smart device ready and is vulnerable to security threats.

Realizing that Magento comes with a few concerns, a separation of concerns was brought about in the web application architecture to compensate for Magento’s shortcomings through our Smart Commerce framework. This can be achieved reducing the core framework into one simple service accessible via an API with all the essentials logic. Then, the services can be built using Python on top of it with a service oriented architecture. Optimized for smart devices and engineered to provide an omnichannel experience, the separation of the business logic and the presentation layer assisted us and our client in creating several customizations. At the backend, an admin control is created to provide him with a bird’s eye view of orders shipping address and all call-to-actions taken by the customer. Smart Commerce provides the admin features such as:

  • Setting up and Updating Subscriptions: The admin can define subscription parameters and the contents of the subscription. Apart from control over store credits, he can update or set order dates and pause subscription on request from the customer
  • Pin Code Uploads: This functionality provides control to admin to alter and add pin code at his convenience
  • Referral Code Uploads: An algorithm was custom created using the mobile number and e-mail id for access. Store credits are updated on using referral codes

004 (1)

This customization was achieved by providing more granular control on the app flow especially when it comes to UX changes. Take for example one-click payments on the homepage which typically requires making changes to the core product on the existing system. This becomes easy on the Smart Commerce framework by abstracting all functionalities using a service-oriented architecture (SOA), which enables you to make changes to the flow.

By supplementing Magento with other open source technologies like SOLR (for search) and Redis (for caching) an out of the box support system provided flexibility for shopping carts, storefronts, inventory management, checkout, reporting among others.

By optimizing the end-to-end stack, we also boosted speed and performance. Caching is at every layer ensured faster responses to customer requests. Redis was used to speed up responses to the user request, the web, and database layer respectively. This is faster than proprietary caching mechanisms and enables applications for web scale. Simultaneously, optimizing Magento’s EAV model and standard queries helps to make the overall solution more responsive than a standard Magento deployment.

The table below provides a brief comparison between proprietary software, open source frameworks and the Smart Commerce solution based on parameters such as compatibility, scalability, customizability among other factors.

BSC V4 (1)

Integrations:
As a result of a customized python wrapper, the flexible presentation layer separated from the backend enables quick adaption to different form factors and features. As the core remains unchanged and this provides for high scalability and flexibility with integrations such as:

Holisol – A fulfillment partner.  The Bombay Shaving company receives the order and passes it on to Holisol to get it executed.
PAYTM – The Payment gateway. Subscription models only allow wallet payments as credit and debit cards are not allowed
Exotel - Once the subscription is confirmed and the user is registered, an SMS is sent by Exotel confirming their registration and payment. The same gateway is used to intimate the customer of all statuses and deliveries
MailChip – Similar to Exotel, all mail communication with respect to order status and registration is sent via MailChip

TECHNOLOGY STACK:

Backend 

  • Magento ++
  • Python
  • MYsql – database
  • Nginx – App Server

Front end:

  •  Bootstrap
  • Materialize
  • HTML
  • CSS

TECHNICAL ARCHITECTURE

tech arch for BSC

 

CAPABILITIES:

  • Can handle more than 30,000 users
  • Expand to different grooming lines
  • High loyalty of customers with returning customers
  • Insights to customer buying patterns