Bomerit Chatbot Responsive Web App

Bomerit Chatbot is a software application used to conduct an online chat conversation via text or text to speech.

My role
UX/UI designer

Tools used
Figma, Adobe Illustrator, Adobe Photoshop

Scope
Jan. 2021 – Apr. 2021

What I did
Competitive Analysis, User Research, Information Architecture, Desktop design, User Journeys & Flow, Card Sort, Sitemap, Usability Study, Product Design

The Problems: How to develop a chatbot to improve customer service? How to analyze and select the collected data from conversations with people?

The challenge
I set out to develop a software application used to conduct an online chat conversation via text or text-to-speech.

The background
This literature review presents the History, Technology, and Applications of Natural Dialog Systems or simply chatbots. It aims to organize critical information that is a necessary background for further research activity in the field of chatbots. More specifically, while giving the historical evolution, from the generative idea to the present day, we point out possible weaknesses of each stage.

The Iterative Process of Designing Bomerit Chatbot

When working on Bomerit Chatbot, I have adopted the Double Diamond Strategy which breaks the design process into four stages: Discover, Define, Deliver & Develop. I found this process particularly powerful in validating design decisions, allowing enough space for creative exploration while giving a focus point to come back to.

DISCOVER

What is out there: Chatbots & Bomerit Chatbot

I conducted a competitive analysis of Chatbot tools with a focus on UX analysis: to evaluate their navigation, layout and overall usability. This helped me to understand what Bomerit Chatbot had to provide to stand out from the competition.

 
I also did a detailed SWOT analysis of the competition and found out their strengths and weaknesses, which greatly helped to build Bomerit Chatbot’s competitive advantages.

User Research: Can you walk me through your process?

It was time to see what Chatbot software enthusiasts thought about the competitors. Equipped with the preliminary research discoveries, I conducted 3 user interviews with people who have different levels of experience with Chatbot tools. My research goals were:

1. To understand the general attitudes and processes.
2. To uncover what (common) difficulties people might face.
3. To discover if they use any apps or websites to help them achieve their goals.

DEFINE

The Research Analysis: Moving Forward

After the Research phase, I reexamined my assumptions based on the insights from the User Interviews. It was clear that:
• They require the Chatbot to be sufficiently simple and understandable for users.
• Good support and feedback.
• More options and functionalities allowing data processing.
• Above all, they look for security in the storage of their personal information.

Revision of Problem Statement

I revised my hypothesis problem statement to align better with the users’ needs and goals.

Chatbot software’ users need to find the right software for their needs. They expect to receive quality service, flexible software, security for their personal data, and this to help achieve their goal.

User Journeys: What would User’s experience with Bomerit Chatbot be?

Informed by each persona’s experience, attitudes & goals, I have created User Journey Maps to outline the processes needed to achieve their individual goals within Bomerit Chatbot. This allowed me to focus on possible critical pain points and plan how to address them in the following design decisions.

User Flows: How would Users go about create a task on Bomerit Chatbot?

I set out to map out their User flows. This step helped me keep the design user-centered, by showing me what pages or screens of the app will be needed from the perspective of my user personas.

Sitemap after Open Card Sort.

Before starting to work on initial sketches of each feature, I visualized the Information Architecture of the app into a sitemap, based on the user flows. The first version of the sitemap was tested through an Open Card Sort.

DEVELOP

Wireframing: From sketches to first clickable prototype.

Ones the Sitemap information architecture was decided, I began sketching paper wireframes progressing them.

Desktop Low-Fidelity Wireframes

Desktop High-Fidelity Wireframes

Usability Study.

Focusing on navigation and main features, I designed clickable prototypes for Desktop versions of the responsive web app. It was tested in a usability study, conducted remotely with 3 users. The issues, discovered in the usability test were addressed and fixed.

Designing the Look & Feel of Bomerit: Style Guide

Bomerit Chatbot has a stylish and practical design that aims to help people use it easily and affordably.
I used the Style Guide as a starting point and developed a more detailed Design Language document. It’s purpose is to ensure consistency and communicate the language of Bomerit Chatbot to designers and developers.

DELIVER

Final Showcase.

When I started working on this project my goal was to create a cohesive brand and design an easy to use and visually appealing Chatbot software. I believe that Bomerit Chatbot has been successful in completing both of these goals as it has its own distinctive style and branding, but also offer a simple user journey for clients to use it.