Confidential/2026
multibeep
A navigable mockup of a SaaS for automated phone services: surveys, contracts and bookings run by a phone assistant, with credits and certified results.
(01) Overview
The product lets a company run its customer phone calls on autopilot: a phone assistant reads, asks, listens for keys or words and books slots, while the company follows each survey, contract and booking from a web panel, pays in credits and can certify every result. The client's brief was a backend document. My job was the interface, delivered as a clickable mockup the development team could build from: access and onboarding, the company panel, a visual call flow editor, a booking module with its own calendar, account settings, transactional emails and a public certificate checker. Halfway through, the product got a name and an identity, multibeep, and I drew its logo and brand board too.
Client
Confidential
Year
2026
Services
Design, Development, Branding
Deliverables
Product design, Clickable mockup, Design system, Logo and brand board, Numbered screen set, Review change logs
(A) The Challenge
Surveys, contracts and bookings look like three different services on paper, but they run on the same machinery: a call flow, a list of calls and a certificate. Meanwhile the team's decisions kept moving the product, and every change had to stay traceable across many rounds of review.
(B) The Approach
- 01
One pattern, three services
The three services share one pattern: a row per call and a detail drawer with the questions and answers, the recording and the same certificate actions. Calls stopped being screens of their own.
- 02
A call flow you wire
The call flow became a canvas where each answer is an output wired to the next node, with one canvas per language, because the words change even when the flow does not.
- 03
From dark to light
The first direction, in August, was a dark panel. When the team asked for light, the whole system was redrawn on a cool light canvas with blue as its only accent.
- 04
A code for every screen
Every screen, modal and state carries a fixed reference code, so a comment about one code always means the same screen, however many rounds later.
screens, modals and states with a fixed reference code
dated review rounds, shipped as 22 versions
screens retired as their content moved into the services
(02) Brand & Design System
The identity arrived late, when the product stopped being called TeleGestión. The starting point was an existing mark, a pulse drawn as an M between signal waves, and I rebuilt it as adjustable geometry: concentric waves with a single centre, one cutting angle, a symmetric valley and a reduced two wave version for 32 px and below. Poppins carries the wordmark, with «beep» in the brand blue, while the interface keeps Space Grotesk for headings and figures and Inter for text. The UI is light on a cool canvas, and blue is the only accent: the deeper blue closes every gradient, from the access panel to the app icon.
Isotype & app icon
colour
on brand blue
on dark
one ink
Icon sizes
128643216multibeepPalette
Typography
Poppins
multibeep · 1.240 créditos · 0123456789
wordmark 500 / 700 with «beep» in blue · Space Grotesk for headings and figures · Inter for the interface
(03) The Product
A call flow you wire, not a form you fill
Each node is a card on a canvas and each possible answer, a key, a word or no answer at all, is an output connected to the next node. The plus on a free output opens the node catalogue and places the new node already wired. Save stays active and lists everything missing, and every path has to end in a final node.
Its own agenda instead of an external calendar
The month view colours each day by occupancy across all agendas, with week and day views, drag and drop for appointments and a context menu on free slots. Agendas carry weekly schedules inherited from a base template, plus absences that warn about the appointments they affect and a waitlist.
Inside a send: progress, results and every call
Each send shows who was reached, who is pending a retry and who was never contacted, then every question with its average and a per question breakdown. Answers the flow did not expect are flagged, and results can be exported or certified for the period.
One modal for one call or a thousand
Calling customers merges the single call and the campaign: one phone with its variables, or a CSV with a preview where each column is mapped to a variable of the assistant. Language, schedule and the follow up policy for that send are set in the same place.
A base role plus visible adjustments
Each user gets a base role and can then gain or lose individual permissions, shown as adjustments over the role. Permissions the current admin does not hold appear locked, so nobody can grant more than they have, and a third tab limits which assistants and agendas a user can see.
A public page to check any certificate
Anyone holding a certificate can verify it by its code: issuer, operation, timestamp and SHA-256 fingerprint, with the signed PDF to download. It shares the brand and the design system with the panel, along with the transactional emails.
(04) The Outcome
124 screens, modals and states, reviewed over 18 dated rounds between August and October and shipped as 22 numbered versions. The review changed the product, not just the surface: the dark first direction went light at the team's request, 13 screens were retired in rounds 3 to 6 as their content moved into the services, and the booking module grew a calendar with month, week and day views, schedules, absences and a waitlist. The team built the real application from the mockup, and the last rounds were already comments on that app checked against it. The brand closed the project: a pulse drawn as an M between signal waves, rebuilt as adjustable geometry, with its variants, app icon and favicon carried across every page.