During the brief and much enjoyed window between Victoria’s infamous lockdown 4.0 and lockdown 5.0, our team participated in a hack day at Kogan.com HQ. It was a great opportunity for our team to meet & collaborate and rekindle our tradition of Hack days.

This time the hackday topic was to implement a chatbot MVP that integrates with our existing kogan.com sites or mobile apps that offers new features to our customers. Everything from ideation, brainstorming, planning, coding, testing and showcase were completed within a day!

9:30 am - Introduction, Forming teams

We split into three teams of 4-5 people. Each team had an ambitious and interesting idea. They were:

Team OddJob: An Integrated chatbot with Kogan.com search bar to offer customers an easier and faster access to FAQ information
Team Chatty: A chatbot focused on responding to customer’s post-purchase queries on mobile app, e.g order status tracking
Team Spectre: A chatbot to simplify customer experience of order purchases at Kogan.com

Let’s take a closer look at a day in the life of Team OddJob, and see how the team turned an idea to an MVP within a day!

10:00 am - Brainstorming

Based on the search keyword Google BigQuery data , the team noticed that customers happen to use the website search bar to look for information besides products, such as: Can I pay with Afterpay at Kogan? or What is the order return policy?

As the search bar currently only offers product search functionality, an idea came up! Why don’t we integrate the chatbot with the search bar, and respond when certain keywords are being searched e.g how, where, could I, etc.

10:30 am - Laying out the plan of attack

Google Cloud’s DigalogFlow was the team's chatbot technology choice.

To maximise team’s capacity and to play to each team members’ strength, the team split the MVP into functional components that can be developed in parallel:

A chatbot agent with utterance, context, training phrases in place to understand customer’s inputs and determines the intent
- Get it done using chatbot built-in features.
Collecting a list of Frequently Asked Questions (FAQ) to fulfill the intent once it is being determined by the chatbot agent.
- Team decided to use an out-of-box feature called “Knowledge base” that supports direct import fulfillment data to a chatbot agent, which can be done via either a CSV or a crawlable set of HTML files.
New Chatbot UI component on Kogan.com
- An out-of-box feature Dialogflow Messenger is used.
Integrate search bar with Chatbot, and inject search keyword with Chatbot
- Update the Front End to initiate Chatbot instead of returning products when certain keywords are searched.

11:00 am - Collaboration & Time to get our hands dirty

Team members started working on their individual components.

We had most of the team working in the office on that day, and we had a video conference call running at all times. So It was also easy to collaborate with colleagues who were remote.

12:30 PM - 1:30 PM - Lunch break

Much needed food & drink and of course chit-chat!

1:30 PM - More coding & Solve faced problem

All of the components were being built very smoothly, except the out-of-box front end UI Dialogflow messenger did not have built-in features to allow us to pass “search term” into Chatbot UI. The integration between search bar and Chatbot become a problem.

We ended up writing a custom method to manually pass the “search terms” to the Chatbot UI component, and manually “send” it as user input:.

  onSearchSubmit = (e) => {
    const searchTerm = e.target.value
    if (hasTriggerWord(searchTerm)) {
      const dfMessenger = document.querySelector('df-messenger')
      if (dfMessenger) {
        dfMessenger.showChat_()
        dfMessenger.shadowRoot
          .querySelector('df-messenger-chat')
          .shadowRoot.querySelector('df-messenger-user-input')
          .shadowRoot.querySelector('input').value = searchTerm
        dfMessenger.shadowRoot
          .querySelector('df-messenger-chat')
          .shadowRoot.querySelector('df-messenger-user-input')
          .sendMessage_()
        e.preventDefault()
        return false
      }
    }
    return true 
  }

4:00 PM - Wrapping Up & Testing

We wrapped up and deployed the changes to one of our UAT sites using our CI/CD pipeline.

Boom!! Here is Team OddJob’s chatbot MVP - Richard Lipohar in action, which is named after our lovely Customer Experience Manager here at Kogan.com...hehe :P.

4:30 PM - Showcase

Showcased the final product and received valuable feedback from the other teams. Across three teams, we also shared our experience using different chatbot technologies, e.g. Google Digloflow, Amazon Lex from different perspectives.

5:00 PM - Enjoy the end of the day

This is a wrap up of the day! Everyone is already looking forward to the next hack-day. Hopefully by then wearing masks at the office isn’t a requirement anymore. :-)

HackDay June 2021

Tim Gong