C4I Chat
Services
ART DIRECTION
UI/UX DESIGN
Year
2026
Info
C4I Chat is a secure, in-house communication platform that brings AI assistance and human collaboration into one unified experience.
Users can seamlessly move between AI chats, one-to-one conversations, and group communication, while sharing files, media, and map coordinates directly within conversations.
The experience is supported by a scalable MUI-based design system, ensuring consistency across components, interactions, and the wider product.
timeline
Ongoing
Before moving into interface design, I mapped the complete user flow to understand how human communication, AI interactions, content sharing, authentication, and connectivity states would work together within a single system.
The flow helped define key decision points, alternate paths, and system responses from choosing between human and AI conversations to composing messages, sharing content, handling offline states, and managing AI-generated actions.
Establishing this architecture early created a clear foundation for the product, allowing the interface and design system to be built around real user journeys rather than isolated screens.
With the core flows defined, I translated the architecture into low-fidelity wireframes to establish the product’s layout, hierarchy, and interaction patterns before introducing visual styling.
The exploration focused on creating a consistent structure across direct conversations, group chats, attachments, and contextual information, while keeping frequently used actions easy to access.
Working at low fidelity allowed me to validate navigation, content density, panel behaviour, and conversation patterns early creating a clear foundation for the design system and final interface.
As the product expanded across AI conversations, direct messaging, group chats, attachments, profiles, and multiple interaction states, maintaining consistency became critical. Instead of treating each screen as an individual design, I created a comprehensive MUI-based design system that could act as the foundation for the entire product.
The system defines Noto Sans typography, colour and semantic tokens, spacing, iconography, reusable components, variants, and interaction states. Components were designed to behave predictably across different scenarios, reducing unnecessary UI decisions and creating a more familiar experience for users.
Beyond visual consistency, the system created a shared language between design and development. Building on MUI made components easier to translate into production, while clearly defined states and patterns reduced ambiguity during implementation.
Most importantly, the design system allows C4I Chat to scale without losing consistency new workflows and features can be introduced using established patterns rather than redesigning the interface each time.
With the design system established, I translated the foundations into the core product experience creating a communication environment that feels structured, familiar, and easy to navigate.
The interface was designed around a persistent communication layer, allowing users to quickly access direct conversations, groups, and AI-assisted chats while retaining relevant contextual information alongside the conversation.
A modular layout keeps navigation and communication consistent, while the surrounding workspace can adapt to different types of information and workflows. This ensures the experience remains familiar even as the complexity of the task changes.
The result is an interface where the design system, information architecture, and interaction patterns work together as one cohesive product, rather than a collection of independent screens.
Communication within C4I Chat needed to extend beyond traditional text messaging. The experience was designed to support files, images and media, map coordinates, links, replies, and speech-to-text within the same conversation flow.
The challenge was introducing these capabilities without making the interface feel complex or overcrowded. Each interaction follows a consistent pattern, allowing users to quickly share different types of information while remaining focused on the conversation.
Special attention was also given to message states, previews, contextual actions, and shared content, ensuring users can understand what was sent, access important information quickly, and maintain context throughout a conversation.
By treating these features as part of one unified communication system, the experience remains familiar, predictable, and scalable, even as the amount and type of information being exchanged becomes more complex.
The AI experience was designed as an extension of C4I Chat rather than a separate product, allowing users to move between human conversations and AI-assisted workflows within the same familiar environment.
A key focus was making AI behaviour clear, predictable, and transparent. The interface communicates each stage of an interaction—from understanding the request and generating a response to presenting information and completing an action.
For workflows where AI can initiate an action, an approval layer keeps the user in control. Users can review the generated output before choosing to approve, edit, or reject it, preventing AI actions from feeling automatic or ambiguous.
By combining familiar conversational patterns with visible AI states and human confirmation, the experience creates a clear distinction between AI assistance, user decisions, and completed actions while remaining consistent with the wider product ecosystem.
