︎
     

Effortless Productivity


Bot Studio is a web base tool for software developers to create chatbots easily.






M Y   R O L E S

User Interface
User Experience
Project Management

T E A M

Sarah (UX), Benjamine (UX)

T O O L S

Figma, Google Suite

R E S U L T

client adopted the design as a base framework for the web-based chatbot builder and cut down time taken for decelopers to create more chatbots rapidly

T I M E

3 weeks





C L I E N T 


Pand.ai specialises in developing a personalised chatbot to meet specific business objectives and unique requirements for financial institutions across the Southeast Asia region.




O V E R V I E W 


Our team is challenged to design a web-based bot-building platform that provides Pand.ai in-house software developers with the appropriate tools to set up and develop a chatbot from scratch or to edit and improve an existing chatbot.








P R O B L E M


Developers need a faster way to access and apply available features to enhance existing chatbot or to build a new bot from scratch efficiently.





S O L U T I O N S


We designed a web-based productivity tool for developers to create chatbots effortlessly.


01.  C E N T R A L   R E P O S I T O R Y

A collection of available features categorised for user’s easier access and application to suit different chatbots specifications.


02.  S T R E A M L I N E D   I N T E R F A C E

Referencing current in-house bot administration platform's user interface to create a familiar yet user-friendly tool for developers to build chatbots

03.  C H A T B O T   P R E V I E W   &   T E S T I N G

A pop-up window within a single screen allows users to conveniently preview chatbot features before installation and test built chatbots before deploying.

04.  C U S T O M I S A B L E    P L A T F O R M

Customisation enables the user to make changes to existing chatbots without hassle and handcraft chatbots with specific requirements with ease.






P R O C E S S



Discover

Benchmarking
Stakeholder Interviews
User Interviews

Define

Personas
Problem
Solution

Design

Design Studio
User Flows
Wireframes
Prototype
Usability Testing

Ideate

Iterated Prototype




D I S C O V E R

Benchmarking



Chat Fuel

Flow XO

Kata.Ai

Wotnot


To understand the functionality of Bot Studio better, we referenced Immediate competitors to learn what is available now on the chatbot building platform and how we can do things better.

Benchmarking analysis is conducted to identify features we would like to adapt  for Bot Studio.


01. Easy selection from templates
02. Expandable global side navigation bar
03. Preview and test bot in pop-up window view
04. Option to select a platform to deploy for new bot







D I S C O V E R

Stakeholder Interview


We interviewed Pandai’s Chief Executive Officer and Head of Product to gather key insights and expectations for Bot Studio. To meet up with the expectations, Bot studio needs to

01. expedite training process and allow newcomers to be familiarised with work quickly

02. utilise as a tool for quick knowledge transfer between co-workers







D I S C O V E R

User Interview


We interviewed 7 software developers from Pand.ai and 5 external software developers to learn how a developer work and think. We asked questions to understand the developer’s needs and concerns better when creating chatbots.



After the interview, we analyzed the results base on user behaviours and concluded some user insights.

“I want to be agile.”
“I like to be efficient.”
“I need to know the project timeline.”
“I need more information.”






D E F I N E

Persona


We put together our research findings and constructed our two user archetypes —   Experienced Ethan and Newbie Nick.






D E S I G N

Userflow


Experienced Ethan, the beige flow at the top, wants to build and customise a new bot from scratch. While Newbie Nick, the blue flow at the bottom, needs to replace redundant features on an existing chatbot with new features.






D E S I G N

Lo-Fi Wireframe


Through  in-depth user interviews and research, we come up with a set of solutions targeting the two personas and adopted design methodology such as design studio with our stakeholder to ideate ideas quickly with low fidelity wireframes on paper. We brainstormed all possible customisable elements of a chatbot and continue to integrate Pand.ai chatbot feature list to the interface.






I D E A T E

Prototype


Later, we convert our drawings into a high-fidelity clickable digital prototype with Figma. You can test the prototype here. We focus on two main routes, 01. create, and 02. edit chatbot features.







D E S I G N

Usability Test


We involved 6 end-users of bot studio as test participants and designed the two test scenarios based on the two personas, respectively.
 We observed user behaviours and noted down significant findings that feedback the ease of our design and areas we could improve on. Each observation and finding are assigned a priority label based on its relative importance — Severe, Mid and Mild.

Scenario #1

build a new chatbot from scratch

Scenario #2

replace redundant features with other new feature in an existing bot.

Goal

complete both two scenarios within 30 minutes

Results

5 users managed to complete both task scenario successfully
1 user failed to finish the task and required more prompts to proceed.




I D E A T E

Iterate Prototype


Finally, we made all the necessary changes in our prototype and finalised the web-based bot-building platform.

For product consistency, Ww adapted layout from Pand.ai’s existing client portal for bot administrations and created new UX patterns based on the existing components. This resulted in a familiar yet refreshing interface for our end-user — Pand.ai in-house software developers.







I D E A T E

Next Steps


While we iterated the prototype according to the feedback and observations, there is still room for improvement. The following list is steps gathered to be taken next for the project.

01. Include more industry categories
02. Allow feature edits before installation
03. Enable detailed flow view in feature list
04. Integrate more chatbot settings

©2022 Edwina Huiru Zhao