Chat for every possible communities.
Company
Social+ (formerly Amity)
My Contribution
UX Research
UX Design
UI Design
Team
AJ Supant Pinyo (Me)
Product Designer
Project Manager
Social+ : Chat
Building on Social+'s success in empowering brands like True ID, Ulta Beauty, and Noom to create thriving in-app communities, the next crucial step was to provide a robust and versatile real-time communication solution. The Social+ Chat SDK delivers a comprehensive suite of pre-built features to fuel user engagement across various platforms.
However, the core design challenge was to architect a chat system that was not just flexible and scalable, but truly adaptable to the diverse and unique needs of every possible community – from large enterprise applications to niche interest groups – ensuring seamless integration and a consistent, yet customizable, user experience.
From UI Kit 3 to 4: Redefining the Social+ Experience
As Social+ continuously evolves, we launched UI Kit 4, a significant upgrade focused on fundamentally enhancing the user experience and expanding customization capabilities for our diverse clientele. This strategic evolution prioritizes a more refined User Interface (UI) and improved User Experience (UX) across key components.
A central element of this upgrade was the transformation of our chat functionality. While basic chat features existed in UI Kit 3, UI Kit 4 aims to position chat as a core, flagship service, significantly expanding its capabilities to meet advanced user needs and attract a broader range of clients.
Competitive analysis
Our design process for UI Kit 4 began with a comprehensive competitive analysis of the market landscape. We rigorously audited a range of existing in-app community and messaging solutions, examining their feature sets, user flows, and engagement strategies across various platforms.
This deep dive allowed us to not only understand current industry standards but, more importantly, to identify key market gaps and unique opportunities where Social+ could offer differentiated value. We uncovered specific areas where existing solutions either fell short or lacked the flexibility required for diverse community needs.
Revising Chat Bubble Design for Scalability and Modernity
Following a thorough audit of the existing chat components in UI Kit 3, I identified the limitations of its message bubble styling. The previous design lacked the flexibility required to seamlessly integrate new, complex features like replies (a key addition in UI Kit 4), and its aesthetic felt dated.
To address these challenges, I undertook a redesign of the chat bubble. The new style was specifically engineered for future scalability, ensuring it could intuitively support incoming features while maintaining clarity. Furthermore, the updated UI aims to deliver a more modern and visually engaging experience, aligning with contemporary design standards and enhancing overall user interaction within the chat environment.
Working with Complex Components
The chat message bubble, a central and highly versatile component, presented numerous complex use cases due to its vast array of potential content types and interactive states. My approach focused on creating a component architecture, designed for maximum scalability to seamlessly support both current functionality and future features.
To achieve this, I leveraged advanced design system capabilities, including:
Multiple variants to cover all possible states and content combinations.
The strategic use of dropdown and Boolean properties for granular control.
Nested components to build complex structures efficiently.
Full integration with design tokens for consistent styling and easy customization.
Built-in responsive sizing to ensure adaptability across various screen sizes.
Introducing new experiences
Reply
We introduced the Reply feature, a crucial enhancement for Social+ Chat. This powerful functionality allows users to directly respond to any message type.
The Reply action opens up a new path for building highly specific and intuitive chat interactions. By clearly linking responses to their original context, it significantly improves conversation clarity and user focus, keeping the chat fluid and deeply engaging within all communities.
Reaction
To enrich user expression and foster more dynamic conversations, we integrated real-time message reactions into Social+ Chat. This feature allows users to instantly express emotions and acknowledge messages without sending a new text, effectively reducing chat clutter and keeping conversation threads cleaner and easier to follow.
Group Chat
Following the successful delivery of 1:1 chat, the strategic next step for Social+ was to introduce group Chat. This vital feature was designed to cultivate stronger community connections and foster collective engagement within our diverse client ecosystems. And of course, building a group chat meant developing a new set of specialized features to handle all the complex dynamics that come with multi-person conversations.
@Mention
To enhance conversational clarity and user engagement in group settings, we integrated @Mentions. This powerful feature empowers users to directly tag specific members, ensuring their messages stand out and receive immediate attention. It fosters more focused discussions and provides targeted notifications, making sure no important communication is missed, even in the busiest group chats.
Group moderation
We know how vital it is for group chats to stay safe and on-topic. That's why group moderation is a cornerstone of our UI Kit, helping prevent everything from spam to off-topic discussions that can spoil the vibe. Moderators play a key role in ensuring a great experience for everyone. To support them, our UI Kit offers four powerful moderation features: the ability to Promote to Moderator, Report users, Ban users, and Remove users.
Search
Our search feature tackles the common frustration of finding specific information or conversations in busy chat environments. Imagine instantly pulling up an important link shared weeks ago or quickly jumping into a project chat without endless scrolling. This powerful tool allows users to swiftly locate past messages, discover relevant chat rooms, or pinpoint specific conversations in their packed chat list. Ultimately, it cuts down on frustration, boosts productivity, and creates a much smoother and more enjoyable chat experience.
Public Figma File
We took a proactive step by making our Figma UI Kit a publicly accessible file. This allows potential clients to easily explore and even try customizing the UI on their own before committing to a contract. This transparency significantly boosts engagement and helps spread awareness of our services to a wider audience, demonstrating the true flexibility and power of our UI Kit firsthand.
Link to the Public File:
https://www.figma.com/community/file/1489181794508772327/social-chat-ui-kit-4
