WhatsApp Customer Platform: Custom-built platform for customer support teams

Product Design

UI/UX

Frontend Development

Overview

This project is a custom-built platform designed to enable customer support teams to communicate with clients directly from within the company’s internal console.It replicates the WhatsApp Web interface while extending its functionality to support internal workflows, team collaboration, and real-time communication.I was responsible for designing the entire experience from scratch and developing the frontend, including the UI structure, components, and real-time data integration.

Context

The platform was built for the customer service team, who needed a centralized environment to manage all client conversations efficiently.Instead of relying on external tools, the goal was to integrate communication directly into the company’s ecosystem, adapting it to internal workflows and operational needs.

Problem

The team faced several challenges:

Conversations were not centralized
No clear ownership of chats
Lack of collaboration within conversations
External tools were disconnected from internal workflows
Communication lacked structure and visibility

There was a need for a platform that could combine external communication with internal coordination.

Goal

The goal was to build a platform that:

Centralizes all customer conversations
Integrates seamlessly into the internal system
Allows chat assignment and ownership
Enables internal collaboration within conversations
Feels identical to WhatsApp to avoid user friction

A key requirement was that the platform had to look and behave exactly like WhatsApp.

Approach

The solution was built by combining WhatsApp’s API with a custom real-time system.

Messages are sent and received via the WhatsApp API
Webhooks capture incoming messages
Data is stored in a real-time database
The frontend consumes and renders conversations dynamically

This allowed the platform to behave like a live messaging system while maintaining full control over the data.

Key Decision

The most critical decision in this project was to create a pixel-perfect replication of WhatsApp Web.Instead of introducing a new interface, the goal was to eliminate learning curves, reduce friction, and leverage a familiar user experience.At the same time, new internal features were carefully integrated without breaking the visual consistency.This required temporarily stepping away from the company’s design system in order to fully match WhatsApp’s UI.

Real Whatsapp Web

Canplast Whatsapp

Design

The design process focused on accurately replicating every aspect of WhatsApp Web:

Contact list
Conversation layout
Message styles (sent / received)
Media such as images, audio, and documents
Reactions and interactions

Every detail was carefully recreated to ensure the experience felt native and familiar.Once the base interface was complete, new features were layered on top.

Extended Features

The platform introduces additional capabilities beyond WhatsApp:

Chat assignment to team members
Conversation subscriptions for users who need visibility without ownership
Internal discussions within conversations
The ability to tag team members and collaborate in context

Conversation subscriptionsThese features were designed to feel like a natural extension of the original interface.

Intern conversation

Development

The frontend was fully developed using Next.js.I was responsible for building the UI structure, implementing components, handling real-time data rendering, and managing communication with the database.The system relies on real-time updates, ensuring that messages and changes are reflected instantly.

Performance Challenges

One of the main challenges was handling large volumes of messages over time.As conversations grew, performance issues appeared in message loading, searching, and contact filtering.To solve this, I implemented RPC functions for direct database queries, significantly improving performance and reducing response times.

Chat UI

Result

The platform is currently in use and has significantly improved the workflow of the customer support team.

Centralized communication
Faster response times
Improved collaboration
Seamless integration with internal systems

It transformed communication into a structured and efficient process.

Learnings

This project provided valuable experience in both design and development.It allowed me to work with the WhatsApp API and real-time systems, design a pixel-perfect interface, balance replication with innovation, and solve performance issues at scale.It also reinforced the importance of attention to detail, especially when recreating a familiar product experience.