Brandie

By on Timeline - November 2017 to Present
Role - Software Designer and Developer
Frameworks - Node.JS, Messenger Chatbot

The Idea

Ever since I heard about the ProductHunt Global Hackathon in October, I wanted to use it as excuse to build something that would help the community. In the first week of November, I finally decided on making an app which would help university students and freshers kickstart their personal brands online.

Why?

Personal branding is how you present yourself so people remember you. And the interesting part is, we’re already doing this without thinking about it. We all have social media profiles, but most people don’t realise the value of a professional personal brand.

What are the benefits of having a strong professional personal brand?

  1. Network with potential employers
  2. Control your image instead of random profiles showing up on Google Search
  3. Grow your businesses

User Research

After deciding on the idea, I moved on to the user research phase. To generate interest — I used Ship to create an upcoming page for Brandie and shared the link around my social media circles.

It is important to understand what your potential users want, thus I created a short survey which I sent to all of the Ship subscribers and my personal network in an attempt to figure out which features I should focus on.

The results poured in and as expected, most users didn’t have their own websites, blogs, well-updated LinkedIn profiles and more.

Survey

Design

Since every signature uniquely identifies an individual, I wanted to resonate the idea that each and everyone’s personal brand is also unique.

I explore how documents where signatures are required are presented. I found that the solid bar + ‘X’ combo to signified this perfectly.

Moodboard

Minimalism is key, especially for logos. An equilibrium needs to be established between having just enough elements inside the logo and it being recognizable even at the smallest sizes. I fired up Illustrator and a few hours later, the Brandie logo was ready! I showed it around to a few people for feedback, and going by the general consensus — people could relate Brandie to a ‘personal branding app’.

Survey

Development

This was definitely the most challenging part for me, I had previously used Node.JS while working on the ShoppingoAPI, but never written anything from scratch. But following the ‘Do More’ mantra, I decided to dive right in.

The first decision was deciding whether this would be a native app, a progressive web app, or even a chatbot. I was leaning towards Messenger as it was the middle point, native apps would’ve required much more effort (given the deadline of the hackathon) and the web app wouldn’t have converted as many users. I finalized Messenger because I hoped it would provide an experience most of my users were already familiar with on a daily basis, and it’d look good on all platforms without much effort into the design side of things. I could focus on making the bot better from the backend, instead of having to worry about how it’d look.

After researching how most Messenger bots were made, I realized there was an extensive collection of npm packages which make the syntax simpler, but since it was my first time — I took the personal decision of following the official Messenger Platform documentation & using vanilla Node.JS.

TechStack

This stack felt like the simplest for a beginner, since all I had to do was push my code and Heroku’s amazing integration with Github auto-deployed it to my server.

Along the development process, I ran into some setbacks — looking back, most of them seem really silly now and I do want to touch on how I went about looking for solutions.

Setback #1: Heroku Server Crashing

When I deployed my code for the first time — I instantly ran into this error. After probably googling the error at least ten times and getting frustrated, because the solutions I found were already a part of my code, I facepalmed and realized the only server it wasn’t working was because the filename needs to be ‘server.js’ 😒

Setback #2: Sending multiple messages on a single postback

This seems like a really simple thing to do, what I wanted was to be able to send more than one message back to the user after they selected an option. I looked at the official documentation, and the closest thing I found was Batching Requests but I couldn’t really understand how to use them. After spending some time on Stack Overflow, the only solution I could find was calling my ‘sendMessage’ function multiple times to send multiple messages — but that came with an obvious drawback, I didn’t have control over which message would be delivered first. (One possible solution is to set timeouts between requests but even that isn’t a guaranteed one)

This led me to asking my first ever question on Stack Overflow. Beginners, take note — only ask questions on such platforms after you’ve extensively tried searching for possible answers and are genuinely stuck.

The answers reminded me of Promises and Callbacks in node, something which I had completely overlook. This was the perfect solution to my problem- since the second message would only be sent after the promise of the first was completed.

Setback #3: Handling extreme case inputs

The drawback of making chatbots is that they usually only work well with a standard set of inputs. So how do you take care of the extreme cases? A few examples would include custom text inputs, users being stuck somewhere in the flow, wanting to go back and maybe do something again?

To solve the problem of reverting to a previous state, I used a Persistent Menu. This made sure the user could always ‘Start Over’.

While in beta, I noticed some users weren’t following the pre-defined flow, and sometimes typing something like ‘Hey Brandie!’, ‘Thanks for your help!’ to the bot. Initially, I had just put a conditional statement which was called every time the user did out of the normal flow, and it just said — ‘I didn’t recognize that input, please follow the pre-set flow.’

But I was quick to realize that I could do better. This is when I started researching on how to implement Natural Language Processing (NLP) into Brandie so that it could understand the context of a few basic messages.

Initially, I had just put a conditional statement which was called every time the user did out of the normal flow, and it just said — ‘I didn’t recognize that input, please follow the pre-set flow.’

After looking at a few options, including a few NLP npm modules & online services, I decided to go with Wit.ai! Using their pre-made model & robust integration inside Facebook’s Developer console, I trained the bot to listen for greetings & salutations and respond accordingly. This made the conversation flow just a bit more polished. Of course, this doesn’t mean it can answer every random question you throw at it, but I feel like it’s a good start.

NLP

Launch

After the beta, I was pretty satisfied with the product I had created in around two and a half weeks, thus I sent it for approval and went on a short vacation (Facebook said the approval process took about 5 days), to my surprise — on my second day of vacation, the bot had been approved for public use! 🚀

Thankfully, I had a few assets before leaving for vacation — including a nice website thanks to this tool, a domain, and some graphics assets.

OG

Wallpaper

I wrote this article to outline the process of how I went from an idea to a finished product, highlighting the workflow that I used as a chatbot beginner to build Brandie from scratch and I hope it gives you some insight as to how you can too build something cool, just by following a process and learning things on the go. Due to exams, I couldn’t submit it to the PH Global Hackathon in time, but I’m still glad I created this and I’ll continue to work towards making it better in the near future.

P.S: Brandie is open-source, if you enjoyed the development process and have some ideas — consider contributing here.

Go talk to Brandie if you haven’t already!

You can get in touch with me for any doubts/suggestions.