Building tools to aid local businesses in the Pandemic 🙌

The Fables homepage — an evolution that happened in a night. (Card Image on left taken from Google Images)

Fables is a project built in the course of a Hackathon in mid-June. The premise of the Hackathon was to build services, tools, and Hacks to aid the population, be it businesses, educationists, or the general populace in the time of the pandemic. And while exploring Tracks and brainstorming with my teammates — Adrish Dey and Alfarhan Zahedi, we came across the idea to build Fables.
Here is a demo video outlining our solution of what Fables was capable of — Demo Video 👓✈️

The Problem

While it was a time when COVID trackers and COVID tracker on steroids (metaphorically) were popping up every hour, we decided that building something on top of just a COVID case tracker would not be super useful. Meanwhile, we had realized that local businesses were suffering, most were struggling to stay afloat and make ends meet, especially since India was in lockdown, people did not go out unless they absolutely needed to, hyperlocal delivery services took time to spawn.

The Solution

We decided to build something to help these businesses. The initial idea was to build a platform that could have them set up a digital storefront to sell Gift Cards that could then be redeemed, or set up fundraisers.
Now, these two put together were not exactly a novel idea. It was mostly inspired by saveourfaves by Mike Kriger, and subsequently, the Gift Card feature was also rolled out in Google Search as a part of their offering for small businesses.

We tried to pair the gift card platform with a recommendation algorithm, so that every user/potential customer who joins the platform gets a custom list of local businesses that they can choose to support/get Gift Cards from. Here is why this was important to us —
Before we started Hacking, we talked to around 12 small, medium and local business owners (Out of the 12, 5 were local grocery stores, 2 were for stationary, 1 was a medium-sized food shopping center, 3 were restaurants and 1 boutique parlor) that we knew from our network about their expectations and needs from a platform like this, and this is what we learned from the interaction -

• 10/12 Businesses would appreciate the support, but they preferred redeemable Gift Cards over donations.
• 4/12 would also consider setting up a donation-based fundraiser because their business had suffered in the 3.5 months of lockdown.
• 9/12 believe that they would receive the most support from their regulars and people who stay in the same locality and have a certain favorable impression of them.
• 2/12 believe that they can draw buyers for their Gift Cards irrespective of their location within the city.

We also interacted with 7 potential customers/donors (pardon the extremely brief research — time was running out 😶) about what they looked forward to. Out of these 7 - 5 were Students and 2 were employed professionals who had received a pay cut. Among the 5 students, there were 3 freelancers.

• 6/7 would donate to help save a local business, irrespective of whether they get a Gift Card or not.
• 2/7 thought that the amount they would contribute would differ in case of getting a Gift Card vs. giving a donation.
• 5/7 would prefer supporting businesses in their locality, followed by some stores/establishments they have grown close to. For instance, the tea Shop outside their workplace/college, or a restaurant/bookstore they frequented in the pre-pandemic world because they hold significant meaning in their lives.

Armed with these nuggets of insight, we decided upon the fundamental basis on which the recommendation system for Fables would work.
We assumed that a recommendation system or even at the very least, a location filter would be important since the businesses and users both brought it across in points 3 and 3 respectively.

The Hack

Building the platform was pretty straightforward. We used Django for the Backend and Vue for the frontend. Alfarhan had extensively worked with Django and hence that drove the decision. We had both been keen on working with Vue and hence picked that up for the frontend. Since we were on a time budget, we did not spend much time wireframing and dove straight into the design.

For the onboarding flow, we decided that everything would be visible to the user when they land on the page, and the recommendation system would take a loosely-defined location and show businesses that had listed themselves on Fables. But all sorts of interaction, viz. Creating or Contributing to a business, or adding reviews would be available only when they Sign in.

The Sign-in flow was pretty simple from the get-go. We wanted to avoid a Password, so we just had a sign-in code layer. Users entered their email, and we sent a 6-digit code to that mail ID, which they entered and got in. If that was a new user, we created a new account for them. In case it was an existing user, we just took them to their account.

The SIgn-In flow (with snippets of Onboarding info in the Verify Code screen)

The Recommendation System

The Holy Grail of Fables, this is a gist of how the Recommendation System worked -

The diagram to represent the I/O of the Recommendation Algorithm

We took a bunch of parameters into account.

• The users’ location.
• The location of the business.
• Whether the business is in a Red or Containment Zone (they would need greater help since they would have no visitors)
• How much a Business has raised (If a business is being consistently overlooked, we tried to promote them more for donations so that they reach close to their target).
• Whether the users’ had ever checked themselves in at that location (we had to ultimately scrap this as pulling location data from Facebook or Google was proving to be a bottleneck). 🐌

Collating all of this information —

The recommendation engine was formed by performing a context-aware dimensionality reduction of the search terms. In this case, the search term refers to the Users’ location and/or preference.
This vector is then padded with the normalized current location. Then the idea is to form clusters of low-dimensional embedding and a cluster center is chosen. Whenever a new item is searched or a new user joins, the data is reduced to a 92D vector, padded with the current location of the user and assigned to a cluster.
Then the similar items in that cluster are returned by ranking them in ascending order of distance from the vector of query item.

That is how Adrish Dey, the ML Engineer of the team describes the recommendation engine.

We wrapped up by providing a simple mechanic to differentiate the Gift Card and Donation paradigms.
Every organization sets a target amount to raise, and assigns Gift Cards to be given in return of contribution in a specific range. For example, a business might want to raise ₹ 10,000 and has a Gift Card for anyone who contributes between ₹ 500 — ₹ 1,000. If there is no Gift Card for a specified range, it is counted as a donation.
Here is a demo video outlining what Fables was capable of — Demo Video.

Here are a few screenshots portraying the platform. feel free to access Fables here and play around ⛄️🌈

The Screen Flowchart for Fables

We briefly toyed with the idea of implementing Dark mode.

Key Takeaways

Even though we did not win the Hackathon, we showed the platform around to a few people we know and received some really encouraging feedback (The judging criteria and the process was done by the Org Team, so we do not have visibility on that front).

• It was nice to get our hypothesis validated by real-world users and gain their insights before building out the platform.
• The tripping points where the Platform still lacks, and how we can improve on them. Maybe a few years later, we would pick this up again and start hacking on top of the existing codebase.
• In use cases like these, it helps to decrease the element of choice and allow default mechanics to do most of the heavy lifting.
  6/8 users, we did a real test with loved the part where they don’t have to choose between a Gift Card or Fundraiser. Having just a contribution as the default user action led to less time spent in indecision.
• Business owners could easily set up a mix of both Donation and Gift card fundraiser by incentivizing higher contributions (most business owners tended to allot Gift Cards for higher contributions).
  The elimination of the mechanic to set up multiple fundraisers (separately as Gift Cards and Donations) led to owners focusing more time on spreading the word rather than setting things up.
• CORS is going to haunt you real bad.

Illustrations on Fables were taken from blush.design. It is an absolutely amazing resource for folks looking for free illustrations for their projects.
It was a fabulous experience to be a part of this Hackathon, and we received a Special Mention for Fables.

If you want to talk about Communities, Tech, Design, Web & Star Wars, get in touch with @shuvam360 on Twitter.