Gamifying
the training process

Overview

What?

We proposed the idea of developing a ‘Live Chat Challenge’ game to boost awareness of our client’s live chat software brand. The concept was to produce an interactive, competitive game that would test a user’s live chat agent skills.

Nothing quite like this had ever been done before. So, we got creative and devised a unique ‘triathlon’ format. The result was three separate mini-games that test a participant’s typing speed/accuracy, spelling, and grammar skills respectively.

Services

Branding,
Web Design,
Web Development

Platform

Web

Goals of the Project

  • 01

    Boost Awareness

    The live chat market is a saturated one. That’s why we devised a concept for a web application that had never been done before. 

  • 02

    Interactive Content

    Who wants to suffer through a boring training or a written skills test? Here, we present a more interactive way to gain knowledge and test users’ skills.

  • 03

    Viral Potential

    This one-of-a-kind game emerged in a saturated industry and managed to register a significant number of users in just a few weeks after its launch. Moreover, the traffic level never slowed, making the Live Chat Challenge one of the most effective lead generation mechanisms the client has ever had.  

How we've done it

  • 01

    The Idea Behind The Game

    How can our client best engage their current and future customers? Give them something interactive and fun to do! Thus, the innovative idea for a skills-based game came to light.  

  • 02

    Competitive Research

    Creating a game is one thing, but making it both fun and challenging is another. Based on proper research, we came up with a product that required engaging and educational at the same time. 

  • 03

    Triathlon Format

    The final project consists of three separate mini-games that are based on original designs and animations. The challenges of the “live chat triathlon” are running, swimming and cycling with corresponding avatars that respond dynamically (and comically) to the user’s in-game performance. 

  • 04

    Scoring Algorithm

    During the mockup phase, we realized that without a robust scoring algorithm (that both rewards the users’ progress and takes their mistakes into account), that we wouldn’t be able to proceed. So, we developed a formula to determine the user’s average typing speed, grammar and spelling skills.

  • 05

    Dynamic Visuals

    Though a minimalistic website design can be beautiful, it might not translate into sales in certain industries. With Live Chat Challenge, we kept the average age of the target audience in mind and created a project that has movement to it. A feature that will engage and entertain.

  • 06

    Social Aspect

    We spent a lot of time fine-tuning the results page to promote sharing across every possible social media channel. Our team also included an option for the user to the email final scores to a friend.

What we've achieved

  • 01

    Fun, Competitive Game

    Simply put, the Live Chat Challenge is fun and encourages competition. See what we mean and try it yourself!

  • 02

    Training Platform

    Onboarding and expanding the skills of your employees might be a painful process for both sides. With this game, it doesn’t have to be. 

  • 03

    Measurable Impact

    Players can compare their results, share them, present them to their team leader. And our client, HelpSquad, now has a neverending stream of leads to at their disposal.

With the Technology
handpicked for the project

Front - end

The game’s front-end is being generated on the server side using Handlebars that template the engine and static content (which are also fed by the server). Hapi and Vision plugins are used to provide the templates that contain the dynamically generated data. The game itself has been created with plain JavaScript, while all animations are being performed with a GSAP library.

The Admin Panel was created using AngularJS. At the time of the project start, Angular2 (just Angular now) wasn’t mature enough to make a production application. AngularJS provided us with a well-known and tested environment to work with SPA. We used the newest version of the framework and utilized its components. This is the best way to create a modular application at present.

Back - end

We’ve used Hapi which has given us the ability to create multiple connections on one Hapi server and share business logic between them. Separation of the business logic and the transform layer allowed us to focus on creating the actual application instead of struggling with items unrelated to business logic, such as error handling or input validation. We used a powerful plugin system with an exposed API, which decreased the number of dependencies between middlewares. We also used built-in modules for data validation or error handling (Joi, Hoek etc.). We placed configuration over code principle, which helps the developer increase the business value.

A reliable SQL database engine was used over MongoDB due to the requirements of relations between the data models. Knex.js, an ORM for Node.js with support for SQL databases, has a very easy syntax and a powerful chainable API. It’s way easier to use this than Sequelize or other competitors.

what
we
used

This client's
about experience:

It’s one thing to start a relationship, another to maintain it properly. We always go the extra mile. It’s not just about ticking off checkboxes.

Michael Kansky
Michael Kansky
CEO of HelpSquad and LiveHelpNow
As an entrepreneur, you never stop wishing to have a clone that thinks like you. Well, In'saneLab team is that clone and believe it or not, thinks better than you!

Bored with a mediocrity?

It only takes a minute or two.
After you provide the information, a dedicated Business Developer will contact you.

NEED NDA FIRST? CONTACT US!

An error occurred

Because of
Our Work:

This is our pride and joy – the portfolio. See for yourself how our experience, work ethic, and sense of design came together in the projects that we’ve crafted recently.