Unifying Chat Components for a Consistent Onboarding Experience
This post explores the recent efforts to unify the visual style of chat components within the Breniapp/brenia project, focusing on creating a consistent onboarding experience for users.
The Goal
The primary objective was to standardize the look and feel of various chat components, including Brand Assistant, Brand Section, Skeleton Section, and QA chats. The aim was to ensure a cohesive and visually appealing conversational UI throughout the entire platform.
The Approach
The solution involved leveraging a set of CSS classes prefixed with onboarding-*. These classes control aspects such as:
- Bubbles: Styling of chat bubbles to maintain a consistent design.
- Avatar: Appearance of user avatars within the chat interface.
- Input: Styling of the input field for composing messages.
- Typing indicator: Visual cues to indicate when a user is actively typing.
- Animations: Standardized animations for a polished user experience.
By applying these unified CSS classes, the different chat components now share a common visual language.
Example
Consider the following example of how these classes might be used to style a chat bubble:
<div class="onboarding-chat-bubble onboarding-chat-bubble--user">
Hello, how can I help you?
</div>
<div class="onboarding-chat-bubble onboarding-chat-bubble--bot">
I have a question about your product.
</div>
In this example, onboarding-chat-bubble provides the base styling for a chat bubble, while modifiers like onboarding-chat-bubble--user and onboarding-chat-bubble--bot apply specific styles for user and bot messages, respectively. Similar classes are used for styling avatars, input fields, and the typing indicator.
The Result
The result is a more polished and consistent user experience across the Breniapp platform. By unifying the visual style of chat components, the onboarding process feels more seamless and professional.
Key Takeaway
When designing user interfaces, strive for consistency across different components. Using a shared set of CSS classes or a design system can help you achieve a unified look and feel, improving the overall user experience. Identify common UI elements and create reusable styles to avoid duplication and ensure a consistent brand identity.
