J TALE x Voiceflow: Web Tool for Chatbot Creators

‍Github Repo: https://github.com/anishalatchman/J-TALE

Created as part of U of T’s Technology Leadership Initiative, we developed a web application to tackle a real-world problem within Voiceflow's business model: converting raw customer service transcripts to functional chatbots.

‍Role: UX designer & full-stack developer

Team: 5 members
‍
‍Duration: 4 months
‍
‍Technologies: Figma, React, HTML, Tailwind CSS, Node.js, MongoDB, Postman‍

Provided a customer service call transcript in text format:

We want to simplify the process of creating a chatbot in the Voiceflow builder.

Preview chatbot on the Voiceflow builder.

To do this, an intermediary application would need to filter through the raw-text transcripts and build a tree-like structured flow of possible conversations with the chatbot.

We are designing for chatbot developers who are already familiar with the Voiceflow chatbot builder. We can structure our design around this mental model.

‍Pain Points

‍Too much time spent manually converting transcripts to Voiceflow canvas.

No UI to filter through thousands of human conversations.
‍

I created a user flow diagram to outline key user interactions with the application. We were careful not to overwhelm the user with more than 2-3 possible actions at each stage.

User flow diagram.

I created the initial mockups below to experiement with layouts for 1) the current chatbot message, 2) possible responses, and 3) a conversation history scroller.

Initial mockups of chat builder page.

Hi-Fi Mockups & Prototyping in Figma

We prototyped the application with Figma and I was responsible for designing the homepage, recover session, and save session screens.

View the Figma board here.

29 interactive Figma boards.

After sending out the prototype to friends for user testing, we found an area of friction between the button interactions on the builder screen.

Instructions lack colour contrast and are below the interaction.

Relocated instructions are seen first and are emphasized.

On the front-end side of things, I used ReactJS, HTML, and Tailwind CSS to code the Navbar, Recover Session, Save Session, and Delete Session pages as well as a few components on the main builder page.

4 months later, we had a demo product to present to the CEO of Voiceflow.

The Voiceflow team was impressed with the clean UI and user-friendly appraoch to our design. I learned a lot about user testing and design tradeoffs in this industry project, and am super thankful for the opportunity to contribute to this app!

I learned to welcome the early stages of designing a sub-optimal mockup or prototype. If it was supposed to be perfect on the first time, it wouldn't be a process!