What the Partner Portal Solves
Gupshup's partners are not single businesses. They are enterprises and resellers who run WhatsApp messaging on behalf of many client companies at once. Each of those clients is a separate WhatsApp Business Account, with its own phone number, its own quality rating, its own templates, its own opt-in list, and its own messaging limits set by WhatsApp. Before this portal, keeping track of all of that meant living in spreadsheets and API responses. There was no single place to answer the questions a partner actually asks every morning: which accounts sent well yesterday, which template is doing the work, whose quality rating is slipping, whose phone number got flagged, and who needs a report by end of day. The Partner Portal is the answer to those questions. Its own login screen states the promise plainly: "Manage and track all your WhatsApp business accounts all at one place." Everything in the product is shaped by that one phrase, all and one place, because the hard part of this design was never a single screen. It was making many accounts feel like one coherent thing to manage.From Wireframes to Working UI
This project is also a record of how it was built, because the Figma file keeps both halves: a discussion-and-wireframes canvas where the structure was argued out, and a final UI canvas where it was made real.
The wireframes were deliberately grayscale and deliberately detailed. The template builder wireframe above already carries the real constraints in its annotations: template names can only contain letters, numbers, and underscores; the footer has a 60-character limit and does not support variables; languages can be added or removed later. Settling those rules in low fidelity, before a single colour or shadow was chosen, is what let the final UI move fast and stay correct. The visual layer changed a lot between the two canvases. The information architecture barely moved, because it had already been stress-tested in gray.
Signing In and the Daily Dashboard
The Login
The login screen is small on purpose, but it does one thing well: it tells a partner exactly what they are walking into. A clear product name, Enterprise Partner Portal, one line of value, and an illustration that names the channels the portal touches: WhatsApp at the centre, surrounded by profile, analytics, and reporting icons. A username, a password, a button. Nothing to read, nothing to decide.
The Dashboard
The dashboard is the morning briefing. Across the top sit four KPI cards, messages sent, delivered, read, and failed today, each with a comparison against yesterday so a number is never shown without context. A count alone says nothing; "5, up 25% on yesterday" tells a story.
Below that, the screen splits into the two things a partner needs at a glance. On the left, a Performance Chart comparing sent versus incoming messages, with an account filter, a date range, and a Line / Bar / Pie toggle so the same data can be read whichever way suits the question. On the right, an Account Highlights table, one row per account, showing notifications, two-way messages, quality rating, and phone-number status side by side. That table is the heart of "all in one place": a partner can scan every client's health in a single glance and click into whichever one needs attention.
The Analytics Suite
Messaging on WhatsApp is measured along a few distinct axes, and rather than cram them into one overloaded screen, the portal gives each its own focused view under a shared Analytics structure. Every view keeps the same shape, account selector, date range, a chart with a Line / Bar / Pie toggle, a summary panel, and a Download Report button, so moving between them feels like changing the question, not learning a new screen.Notification Message Analytics
Notifications are the business-initiated, template messages a brand sends out. This view answers "how well did our outbound messaging land." It charts sent versus delivered, breaks messages down by type (text, image, video, document), states the average delivered percentage with a plain-language verdict ("78%, Good"), and ranks the most-used templates so a partner can see which messages are actually pulling their weight.
Incoming-Message Analytics
The mirror image: what came back. This view is about the two-way conversation, total incoming, total replies, response rate with its own verdict, and the more human signals that only conversation reveals, the active response period (when people actually reply) and the most active day of the week. It even ranks the most effective templates by how much incoming conversation they triggered, which is a very different ranking from "most sent."
Opt-ins and Opt-outs
On WhatsApp, the right to message someone is permission you earn and can lose, so opt-ins are their own first-class view. Today's opt-ins and opt-outs sit up top with a running total, and the chart plots the two against each other over time, with averages and the single best opt-in day called out. When opt-outs start crossing opt-ins on that chart, a partner sees the problem before it becomes a quality-rating problem.
Templates
Template Management
Every WhatsApp template a brand sends has to be approved by WhatsApp and carries a status, and a partner managing dozens of accounts can have hundreds of templates in flight. The management screen leads with that reality: a row of status filters across the top, Enabled, Disabled, Flagged, Review pending, Rejected, each with a live count, so a partner can jump straight to "show me everything that got rejected" without scrolling a single table.
The table itself carries the details that matter for a regulated channel: template ID, name, language, type, created date, quality rating, and current status, all sortable, with an account selector and search above. It is built to make a large, messy, constantly-changing inventory feel governable.
Creating a Template
The builder is where the design has to teach WhatsApp's template rules without making them feel like rules. It pairs a structured form with a live phone preview that renders the message as a real WhatsApp chat bubble, complete with a Light / Dark toggle so a partner sees the message the way their end-user actually will.
The form mirrors WhatsApp's own template anatomy exactly: pick an account, name the template (letters, numbers, underscores only), choose a category and content type, set a language, then build the message from an optional header (60 characters), a body, an optional footer (60 characters, no variables), and interactive buttons that let customers reply or take action. Every field carries the constraint in its helper text, so the partner learns WhatsApp's rules by filling the form correctly the first time rather than by getting a template rejected and wondering why.
Profiles and Reports
Account Health at a Glance
The Profile screen is where a single account's full identity and health live. Pick an account and the left column shows its editable business information, vertical, description, contact details, address, mail-alert and URL configuration, while the right side lays out the WhatsApp-specific status of that account as a grid of cards.
Those cards are the things a partner cannot afford to lose track of: the WhatsApp Business number, connection status, quality rating (shown as Green / Yellow / Red, WhatsApp's own health signal), Facebook business verification, verified display name, the messaging limit (unique contacts per rolling 24 hours), the separate notification and customer-support account IDs, and the template count. Each is explained in a line and many are one-tap copyable, because these are the IDs a partner pastes into support tickets and API calls all day. This one screen turns a scatter of WhatsApp and Facebook settings into a single legible account dossier.
Reports as an Async Queue
Pulling a delivery report over a month of messaging is not instant, so the portal treats reporting honestly: as a request that gets queued, processed, and downloaded when ready, rather than pretending a heavy export can happen in a click.
A partner places a new report request, scoped by account, type, and date range, and it joins a table where each row carries a status: Pending while it builds, Error if it fails, and Ready with a download link when it is done. The pattern sets the right expectation, a report is something you ask for and collect, and it makes a slow backend operation feel like a tracked task instead of a frozen screen.
The System Underneath
Forty-plus screens across seven modules only feel like one product because they are built from one kit. A single top navigation, one account-selector pattern that behaves identically on every analytics view, one date-range control, one table style with sortable headers and status pills, one chart component with its Line / Bar / Pie toggle, and one status vocabulary, Green / Yellow / Red, Pending / Ready / Error, used the same way everywhere. That shared kit is what makes the analytics suite work. Because Notification, Incoming, and Opt-in analytics all share a skeleton, a partner learns the pattern once on the dashboard and reads every other view for free. The consistency is not decoration; it is the thing that lets a partner manage many accounts across many screens without the product ever feeling like many products.Platform Evolution
Wireframes
Structure settled in gray
A discussion-and-wireframes canvas where navigation, the template builder's field rules, and the multi-account model were argued out in grayscale before a single colour was chosen.
Foundation
Login and the daily dashboard
The morning-briefing dashboard: four KPI cards with day-over-day deltas, a Line/Bar/Pie performance chart, and the Account Highlights table that scans every client's health at a glance.
Analytics
Three views, one skeleton
Notification, Incoming, and Opt-in/Opt-out analytics, each its own focused screen on a shared skeleton of account selector, date range, chart toggle, summary, and download.
Authoring
Templates and account profiles
WhatsApp-native template authoring with a live light/dark phone preview, status-filtered template management, and the per-account profile health dossier (quality rating, limits, IDs).
Delivery
Async reports and the shared kit
A queued report model with Pending/Ready/Error statuses, unified by one component kit, one table, one chart, one status vocabulary, so 40+ screens read as a single product.
Lessons
- Settle the structure in gray. Arguing out field rules and information architecture in grayscale wireframes, before any visual design, is what let the final UI move quickly and stay correct. The look changed a lot between wireframe and final; the structure barely did.
- Never show a number without its context. "Sent: 5" is noise. "Sent: 5, up 25% on yesterday" is information. Deltas, verdicts ("78%, Good"), and comparisons appear next to almost every metric in the product.
- One skeleton, many views. Giving each analytics axis its own screen, but every screen the same skeleton, meant depth without a learning cost. Learn the dashboard, read the rest for free.
- Teach the platform's rules inside the form. The template builder encodes WhatsApp's real constraints as helper text on every field, so partners pass approval by filling the form correctly rather than by trial and rejection.
- Be honest about slow work. Modelling reports as a queued request with Pending / Ready / Error status set the right expectation, instead of hiding a heavy export behind a button that looks instant and is not.
FAQ
Gupshup's enterprise partners and resellers, who run WhatsApp messaging on behalf of many client businesses. Each client is a separate WhatsApp Business Account, and the portal exists to manage all of them, their templates, profiles, opt-ins, analytics, and reports, from one place rather than from spreadsheets and raw API responses.
Almost everything. Every analytics view, the template list, the profile screen, and the report queue all begin with an account selector, and the dashboard's Account Highlights table is built to scan every account's health at once. The core design problem was making many accounts feel like one coherent thing to manage.
WhatsApp messaging is measured along genuinely different axes: outbound notification delivery, inbound two-way conversation, and opt-in/opt-out permission. Each answers a different question, so each gets its own focused screen. They share one skeleton, account selector, date range, chart with Line/Bar/Pie toggle, summary, and download, so moving between them feels like changing the question, not learning a new screen.
It is WhatsApp's own health signal for a business number, shown as Green, Yellow, or Red. A slipping rating predicts messaging restrictions, so the portal surfaces it prominently on both the dashboard's account table and each account's profile, where a partner can catch it early.
It mirrors WhatsApp's exact template anatomy, category, content type, language, header, body, footer, and buttons, and puts every constraint in helper text right where the decision is made (name format, 60-character footer with no variables, and so on). A live phone preview with light and dark modes shows the result as a real chat bubble. The goal is to pass approval on the first submission.
End to end. The Figma file holds both the discussion-and-wireframes canvas, where the structure and field rules were worked out in grayscale, and the final UI canvas. This case study draws on both halves to show the path from low-fidelity decisions to the finished console.