I led a design team throughout the agile design process for designing applications in the AI technology domain. My understanding of AI technology and project management helped me moderate communication among team members and played an important role in the Agile process.
Application
"Dialog Designer" - Chatbot Development Environment (Web-based)
"Dialog Designer" - Chatbot Development Environment (Web-based)
Role
UX Designer
UX Designer
Contribution
Programming literacy, Key-concept (drag&drop card flow map)
Programming literacy, Key-concept (drag&drop card flow map)
Project Highlights
Dealing with AI technology
In this project we developed Chatbot Dialog Designer, a chatbot development environment based on AI technologies: Natural Language Processing (NLP) and Dialogue Management (DM).
Agile UX design
We worked on this project throughout the agile process. I led designers’ communications about requirements for the system and validity of design concept throughout the process. In addition, I and the designers continuously tested our design to users with prototypes in paper mockups and the Invision app.
Visualized Coding Environment
Developing a chatbot is a complex task, so we designed an intuitive and easy tool for users. We suggested visualized drag-and-drop card components to compose conversation flows.
My Contributions
Moderating communication between team members in Agile Process
In this project, a project manager, 6 developers, and 3 designers (including me) worked together in the Agile process. In the Agile process, communication among team members plays an important role. For this project, I helped designers communicate with members in other roles. My knowledge of AI, programming, and project management helped team members understand each other’s thoughts.
Offering core concept based on AI and programming knowledge
As I have understanding of the basics of AI and programming skills, I was able to offer the core concept of visual programming. It also helped me to deliver the concept and to interpret feedback from other team members and users.
Design Requirement
Visual Coding, Easy to Use
Our potential end users may have little experience on developing chatbots, so we decided to make Dialog Designer as a visual coding interface.
Design Process
Designing in Agile Process
We worked on this project using the Agile process. We had continuous discussions with the manager and developers about design requirements and our concept’s validity. We also frequently tested our prototypes on paper or in the Invision app for our potential users.
During this stage, my knowledge played an important role in generating a basic idea of visual coding and communicating it to other team members. My experience of prototyping designs into various materials helped us in building prototypes.
Development
The images below show the visual programming components we developed throughout the project. We started with the basic components and moved to advanced functions.
Key concept: dialog flow map consists of conversation cards
Stage 1. Designing Talk card
Talk cards enable the chatbot to prompt messages and receive users' responses. Talk cards are the basic components that consists conversation flows. Below image shows the variations in talk cards that we designed through discussions with developers and users.
Stage 2. Designing Programming Cards
Next, we added programming cards to allow developers to make algorithms that decide the flow of dialogue between the chatbot and customers. The following image shows the three components that are essential in programming the chatbot.
Then we moved on to create a slot filling function, an advanced function that allows the chatbot to become more intelligent. It means that the chatbot can catch relevant information from the users' prompts, and keep the data to process service flow. The next two slides explain the concept of the slot filling function.
Stage 3. Designing Communication between Systems
The last component we worked on was a function card. It represents the communication between the chatbot and service system. With this component the chatbot can send or receive relevant information for delivering actual service to customers. For example, the chatbot could send pizza order information collected from the customer's dialogue, to the service system, which would then process the information and let the chatbot know whether the order has been received properly.
With the function card, user can search pre-designed functions which define interaction between chatbot and legacy system. Parameters are input data, which chatbot sends to legacy system. Outcomes are responses from the system. User can store the values in variables to reuse them for dialog flow design
Result
The alpha version of Dialog Designer we created looks similar to the one below. By clicking on the following image, you can learn a lot via Invision App prototype about how the interface works from the the first steps of generating new dialog to the end of dialog design. The design is optimized for web viewing at 1920x1080 resolution.
The figures of the Dialog Designer interface design in this article are not copies of the actual project outcome, and the contents and opinions displayed do not represent those of any former employer.