Oriserve — B2B SaaS Platform (Web Platform)

The aim was to create a custom message tool for Omnichannel B2B AI Conversational Chatbot Builder (Enterprise SaaS), which includes multiple message variations such as Text, Text with Button, Image with Button, Radio, Checkbox, carousel, among others, as well as a Sale Bot Builder.

My Role

Initially, I was the only designer assigned to the project with the responsibility of creating the sales bot and message builder. However, I understood the significance of collaboration and worked closely with the front-end and back-end development teams, along with product managers, to ensure that our design solutions were practical and met everyone’s expectations.

Design Process

To achieve the best possible product solution, we used an iterative process. Since we were adding a new feature to an existing platform, I began by conducting a system audit to gain an understanding of the current style guidelines, layout, and design patterns. After that, I proceeded to conduct user research, create sketches, develop visual designs, and build prototypes. This process allowed us to refine the design at each stage, incorporate feedback, and make improvements to the final product.

Step 1: Visual Audit

Step 2: User Research

Step 3: Sketching & Wireframing

Step 3: Visual Design

Step 4: Prototype

Step 1: Visual Audit

I conducted a visual audit to gain an understanding of the current design decisions and use cases. This helped me determine which design patterns and conventions we needed to follow to ensure that our new design was consistent with the existing platform. Additionally, I collaborated with the frontend team to get their perspective on the design decisions and learn how we could reuse existing components, if possible. This collaborative approach allowed us to create a design that was both visually appealing and functionally efficient, while ensuring a seamless integration with the existing platform.

Outcomes:

1. Used the Ant design react library

2. Used the Material Design Icons

3. Found lots of inconsistencies like so many different sets of font sizes, colors, and alignments in the existing system.

Step 2: User Research

Before diving into a design I made sure to speak with the users, such as the Product Managers (PMs), to gain a better understanding of their use cases and how they were currently utilizing the sales bot and message builder. This approach helped me to identify any pain points or challenges that users were experiencing, which in turn helped me to design a solution that better met their needs.

Even though I had gained valuable insights from my previous conversations with users, it was still essential to validate our assumptions and empathize with them. By taking this approach, we were able to confirm our understanding of their needs, pain points, and requirements, and design a solution that was more user-centric and better aligned with their goals.

Since the platform was used by both in-house and client product managers, I spoke with representatives from both teams to gain a better understanding of their motivations, desires, pain points, and constraints. This collaborative approach allowed us to identify common goals and challenges, while ensuring that our final design solution was suitable for all users.

Research brainwriting

Research Insights

Spoke with the in-house and client's Product Manager.

1. Building a sales bot from scratch for every new client onboarding can be a frustrating and time-consuming process.
2. When a client requests a new message type to be added, we often find ourselves engaging in a back-and-forth with the backend team to manually add the message to the database. This process can be quite hectic and time-consuming, especially when dealing with even a single message.
3. Each communication channel, such as WhatsApp, Facebook, and Instagram, has its own unique constraints, such as character or image limits, and paragraph size. As a result, it can be critical to carefully consider these constraints when adding new message types to the system.
4. When we manually add a new message from the backend, it can be difficult to visualize how it will appear on the actual chatbot. This is because there is no preview option available, which can make it challenging to ensure that the message is appropriately formatted and visually appealing for the end user.
5. In some cases, we may need to add multiple variations of a particular message type to perform A/B testing for messages. However, this can be a time-consuming task, as it involves manually adding each variation to the system.
6. Introducing a different language to a particular message can only be done through the backend, which can be a time-consuming process.

User Flows

I created user flows for both the “Message Builder” and “Sales Bot” features, allowing users to easily add new messages with the ability to perform A/B testing and add multiple variations, such as channel, language, country, and program. Additionally, the “Sales Bot” feature allows for the addition of new products, as well as categorization by features and sub-features.

Our objective was to create a minimalist design that is user-friendly and has minimal technical complexities, making it easy for non-technical program managers to use the “Add New Message” and “Sales Bot” features.

Message Builder — User Flow

Sales Bot Builder — User Flow

Information Architecture

Designed information architecture that greatly benefited the design process by providing a solid foundation to build upon and creating a better user experience.

Sketching & Wireframes

After synthesizing the research findings, I initiated the ideation process to generate design ideas that aligned with the design brief.

I used an iterative design process to generate and test design ideas with users, incorporating their feedback to refine the design until we arrived at the best possible solution. Only after the design was refined and validated, then we move forward with the UI design.