Hacking Intercom to build a MVP (part 1)

Basil Chat
Design feedback!
Published in
6 min readOct 8, 2017

The Problem:

Any project you want to start, whether it is a new app, some client work, a product you are working on, there is a plethora of design advice, tools and resources out there. Almost to an extent that you get lost in all this information and roundup being stuck for hours on a small issue that is bugging you. At-least that happens to us. We are a couple of designers who were drowning in information overload and constant disappointment in not being able to get the right feedback that was needed to solve a problem. We read many articles, tried different tools to help us solve our problems, but it only resulted in more frustration.

The solution:

A good thing about being a designer is, we can come up with ideas and also possess the skills to execute them. Or at least some of it. And that’s what we did. After a productive week at the office (yes we are employed), we sat down on a Friday evening munching some pizza and beer to make something out of our frustrations.

The timeline:

Friday evening ~20:00

Outlining the problem and what we can do about it. Some back and forth discussion about the general practice of getting feedback during a design project.

he looks relaxed and happy even with all his frustrations with the design process…

We narrowed the problem to 3 points:

  1. Who do you contact when you need feedback while creating a design project. They don’t necessarily have to be your colleague, friends, family but some person who has the knowledge of the domain, someone who know’s what they are talking about and would be willing to spend some time helping fellow designers.
  2. How do you contact them? Email?? Really?? Well it is 2017 where chatbots & voice interfaces have been a rage all through out. (Ok it is not new, but will all the “Virtual assistant enabled speakers being launched this year, it has been kind of a big deal”). So we decided to use chat as the medium for communicating between the seeker and the helper.
  3. What next? You have an app design you have created but aren’t happy with, a screen which is bugging you for the last 2 days and you still don’t know what to do next (even after 14 cups of coffee). For these people being able to get on the platform and able to share a screenshot, wireframe, problem with a designer and start a chat. Hopefully the person on the other side is able to help you out.

Saturday afternoon ~14:30

We got together to start building what ever on earth this thing was going to be.(Some of you must wonder, why a gap of almost ~19 hours after the idea struck and before the hacking began? Why not pull an all nighter, and build something great? Well to disappoint some of you, we must say we aren’t no teenage coding geniuses)

this is not what was happening ;)

We sketched some rough wireframes of what we thought this thing could be. Since we are designers and are building something for other designers we had to use all of our favorite set of tools POST-IT’S and SHARPIES…(excuse the sarcasm)

the cliche of the tools…

Saturday afternoon ~18:30

After some sketches and further discussing the idea we had some clarity on what we could build to address the problem we had initially. There were some mockups, a list of to-do’s and some goals we wanted to achieve before the weekend ended.

yes, we actually put post-its on the door…

Saturday evening ~20:30

What we did till now:

  • Name: The eternal question every startup founder, product manager, creative person goes through for all their projects, “What should I call this thing?” We did a quick time boxed brainstorm of possible names…
ideas for the name…

After 20 minutes we had a few options, but did not really like any of them. So we just decided to go with Basil. Mostly because there was this Basil plant in the kitchen of my apartment where we were sitting and working at. We had no good reason to go with “BASIL.CHAT”. We just did… However we did try to post rationalize the name and it’s origin story, but failed ;)

the basil plant in my apartment
  • Basic setup: Once the name was decided, we went ahead and bought a domain from Name.com for ~€10 per year. Tip: That Who-is privacy thing Name.com charges $4.99 for, always have a live promo code which is “PRIVACYPLEASE”. Use it to get a discount. For file storage & email communication we went with Gsuite basic plan of~€5 per user/per month. We only needed one.
  • Main Tech setup: We already knew we wanted some kind of a chat interface on a website but we still had to make a decision on how to build it. Since this was an experiment & a fun weekend project, one of the goals was to finish it over the weekend. So we decided not to build anything from scratch but rather go for an approach which some smart people call: “Complex Coordination”. It basically means, one can identify existing individual components that are required to build something and put them together in a way that makes sense. It’s funny we use that term, because whatever we were building, there was nothing complex about it. This is complex to build:
real complexity

We narrowed down our CMS choices to Sqaurespace and Webflow. There were many reasons why those two but eventually we decided to go with Webflow keeping in mind the freedom the tool provides to create something.

  • Cherry on the cake: Since the main component of the service we were building (yes, I am calling it a service now after calling it “a thing” for the last 12 hours) is a chat interface, we were still not sure how to do that best. We kept thinking should we use some kind of a bot service, how to integrate it, who will reply etc. While doing some research on this, we came across a website which was using Intercom to track and communicate with their customers.
Eureka moment!

And there was our solution. We decided to use Intercom as the solution to our chat interface. There was some discussion around Intercom vs. Crisp (mostly due to Crip’s free tier) but in the end we decided to go with Intercom anyway. They have a 14 day free trial which we are currently using.

Saturday evening ~23:30

We had a rudimentary version of the website up and running by this time and we were testing our Intercom integration.

Note: Intercom is an extremely well designed tool that gives it’s users a lot of control over how it is used and what it can do. But here we were trying a weird use case which was nowhere mentioned on the Intercom website.

Here is how they sell it:

Intercom product

And what we’re trying to use it as:

In the end we were building was an intercom integration on a landing page where people could go and find answers to their design related queries.

Sunday morning ~11:30

We continued work by polishing up the design, writing key messaging, setup social media profiles, added tracking, creating all kinds of assets etc. etc.

spot the basil…

Sunday evening ~18:30

We had a version of the Basil.chat service which was ready to go live by now. Here is the outcome of the weekend indiehack.

Basil.chat-Design feedback via chat

Try it now here: https://www.basil.chat/

to be continued…

--

--