Shopthat

Conversational commerce platform for beauty industry

CATEGORY

Chabot

CLIENT
Shopthat
YEAR

2017

SERVICES

Frontend Development
Backend Development
Chatbot Development

BACKEND

Django

FRONTEND

React
Redux
D3.js

The Project

Beauty influencers engage millions of Instagram and YouTube users every day, promoting products viewers want to use.

Conversational commerce platforms connecting retailers with content creators may be an innovative solution for selling products showcased by influencers.

SHOPTHAT approached us with an idea to build a prototype of such a platform. With SHOPTHAT, influencers would be able to choose products provided by cosmetics retailers and tag them in their Instagram posts or YouTube videos. For end-users shopping would be quick and easy, as a chatbot would guide them through the buying process.


The Process

From the very beginning we were working under a strict deadline, as SHOPTHAT requirement was to quickly put out an MVP of the product. We were responsible for frontend and backend development of the platform, as well as building a Messenger bot.

We prefer to start our projects with an implementation of Google’s Design Sprint. It helps uncover risks, generate ideas and find the best solutions for the project. Since we were working on a quick prototype here, we’ve conducted the first kick-off session remotely. A call with SHOPTHAT enabled us to prioritize features, establish the communication process and suggest the tech for the prototype.

Once we’ve successfully delivered a prototype, we could follow up with an MVP. This time, we welcomed SHOPTHAT at our office to conduct design thinking workshops and further discuss how the project should be developed.

Meeting the client at our office gave us an even better understanding of the project’s requirements and business objectives.


The Tech

We chose to use Django for bot development, and React + Redux for building influencer and retailer dashboards.

Being aware of time constraints, we used technology that allowed us to quickly start the project and scale it easily over time. Reusing components for two dashboards, helped us save a lot of time, without the need of running two similar projects simultaneously. To kickstart the development of the project, we used our own React boilerplate.

On top of that we used Elasticsearch engine for browsing the products and D3.js library for quicker data rendering. The FLIP technique helped us to speed up animations.

Delivering the Messenger bot, the challenge was to integrate it with Instagram and YouTube APIs, as well as Shopify and Stripe for payments. As we needed to create custom user flows for people coming from different social networks, we used oAuth authorization and an open source library Python Social Auth to create an authentication workflow. As there are still limited resources regarding commerce conversational platforms, we created our own implementation of handlers to manage different queries the bot had to answer.

See also

Hyper - Mixed reality spatial design platform