More than a collection of chat screens — a complete communication system within a social network. I designed its UX architecture, user flows, states, and components to support complex scenarios, scale with the product, and provide clear specifications for development.

Role

Product / UI/UX Designer

Scope

Research, product logic, UX architecture, UI design, user flows, component system, interaction states and edge cases, development handoff, and design support during implementation

Status

MVP

Year / Market / Stage

2026 / Russia / MVP

The messenger began as a new product direction within [NDA] Social Network.

The module needed to integrate naturally into the existing ecosystem, remain consistent with the core design system, and support complex communication scenarios across mobile and web platforms.

The scope included UX architecture, screen structure, components, interaction states, edge cases, development handoff, and ongoing design support throughout implementation.

A new communication module for an existing social network

The task was to design a complete communication module within a social platform, including one-to-one and group chats, chat profiles, privacy settings, and related functionality, while making it feel like a natural extension of the wider social network.

Each decision was considered not only within an individual screen, but also from a scalability perspective: how a component would behave with different content, across multiple states, and on different platforms. Research and design progressed in parallel, so the component architecture needed to support future growth and increasing product complexity from the outset.

Edge cases were treated as part of the core experience. These included unavailable participants, empty lists, failed messages, deleted content, privacy restrictions, loading states, the last-admin scenario in group chats, and other situations that directly affect implementation quality.

Designing a scalable messenger

I was responsible for designing the messenger as a standalone product module: its UX logic, UI, components, interaction states, integration of new elements into the core design system, and preparation of development-ready documentation.

The direction was overseen by an Art Director, while I independently managed the design process, detailed the solutions, and maintained day-to-day communication with the development team.

During implementation, I addressed questions around component behaviour, technical constraints, and missing states, refined the logic, updated the layouts, documented the decisions within the system, and supported the development team throughout the process.

Independent ownership of the product direction

Visually, the messenger continues the wider product system. No separate visual identity was introduced: the focus remained on readability, hierarchy, stable interaction patterns, and careful handling of content-dense interfaces.

The experience is built around reusable components, consistent spacing, neutral presentation, and predictable states. This allows the messenger to feel like an integral part of the product rather than a separate embedded service.

Visual Direction

The work was structured around user scenarios and contexts: one-to-one conversations, group chats, participant management, privacy, media, attachments, replies, forwarding, search, errors, empty states, and system notifications.
The scenarios were defined not only through screens, but also through interface behaviour:

• how a component changes depending on context;
• which states need to be supported;
• where users encounter restrictions;
• what feedback follows each action.

Edge cases were explored separately, including unavailable participants, failed messages, deleted content, privacy restrictions, content loading, empty lists, group management, and the last-admin scenario.
This approach helped resolve situations that are often discovered only during implementation.

Scenarios, states, and constraints

A dedicated component layer was created for the messenger. It extends the core design system without introducing a parallel visual language.
The system includes:

• chat-list elements;
• message components;
• the composer area;
• attachment previews;
• reply and forward states;
• media and file messages;
• system notifications;
• group-chat elements;
• empty states and settings.

Particular attention was given to message components. They needed to support different content types, sender roles, delivery statuses, and additional states without requiring the structure to be rebuilt each time.
The new elements were designed for reuse, future functional expansion, and consistent behaviour across mobile and web platforms.

Extending the core product design system

The result is a complete messaging module within a social network, supported by a defined UX architecture, a scalable component system, comprehensive interaction states, edge-case coverage, and development-ready documentation.
The project brought complex communication scenarios into one coherent structure and extended the core product design system without creating a separate visual layer.
For me, the project became an example of systemic product design, where the quality of the outcome depends not only on individual screens, but also on component logic, state coverage, scalability, and the accuracy of the development handoff.

Result