Case study
Cube asks users to hand over login credentials for their bank, telecoms, insurance, and retail accounts so automated agents collect documents on their behalf. The design problem: making something inherently invasive feel safe, clear, and worth doing — across 300+ integrations, designed and shipped in production code. Typography, grid, and visual detail aren't afterthoughts — when a product has to earn trust before a single interaction, craft is doing functional work, not decorative work.
Outcomes
Context
Securibox's agent technology automates document collection by connecting to users' bank, telecoms, insurance, and retail accounts through stored credentials. The technology worked — the design problem was the moment of handover. Users had to trust a product with their login credentials for every provider, and one wrong signal — an unclear sync status, a missing storage path, an unexplained error — breaks that trust entirely. The same platform powers both Cube (consumer) and SCA (developer/operator). I designed the product experience and built the frontend for both, but the audiences diverge completely: Cube needed emotional safety and progressive disclosure; SCA needed operational density and configuration precision. This case covers the consumer side.
Users already wanted to automate. The only question that mattered:
Can I trust you with my credentials?
Key decisions
Decision 1
Trust
Credentials and sync status on the same screen — spatially separated, not behind a tab
The instinct is to put sync status on a separate screen. Instead, credentials live on the left, synchronisation status on the right — same view, different zones. Users returning to check on an agent shouldn't navigate away to confirm it worked. The MFA button is persistent in the top right, always reachable without disrupting the form. The folder path breadcrumb appears here too — seeing exactly where documents will land, at the moment of saving credentials, reduces the anxiety that the data is going somewhere unknown.
Decision 2
Scale
Two views for 300+ agents — both necessary
A user who knows exactly which provider they want needs a scannable list with status at a glance. A user exploring needs logo density — to feel the scale of what's possible. List view: provider name, document types, last sync, and connection status in one row. Card view: same data, denser grid, prioritising provider identity and the add action. The filter sidebar is identical in both modes — same system, two expressions. The "Unavailable" badge was a late decision: testing showed users couldn't distinguish working from unconfigured with only a status dot, so the explicit text label was added alongside the colour signal.
Decision 3
Legibility
The dashboard's third column — keeping sources legible
The dashboard has three columns: My Collection (user-pulled documents), My Agents (configuration and status), and HR Documents pushed by the user's employer. The tension: Cube is a product the user controls. HR Documents arrive without user action, from their company. The decision: keep them visible but explicitly labelled and spatially separated — "HR DOCUMENTS" header — so the source is always legible. The same logic applies to the files explorer: Securibox-collected folders, employer folders, and personal cloud (Google Drive, OneDrive) appear as siblings under the same root. Different origins, unified view — never presented as if they came from the same place.
Implementation
Design
Brand, concept & narrative
- —Cube as a distinct sub-brand: logo, colour system, typography, iconography, and visual hierarchy — approachable and trust-led, not generic B2B chrome. Distinct from Securibox corporate, but unmistakably part of the same family.
- —Positioning and story: "Own your data" and plain-language automation — the idea of agents and credential-based sync framed before the ask, so the product reads as understandable personal control rather than opaque infrastructure.
- —Marketing site designed alongside the app: landing story order, security posture page, pricing — bilingual FR/EN copy throughout, so value and trust build before install.
Setup & configuration
- —Agent discovery: list and card modes sharing one filter sidebar with a 12-category document taxonomy, sort controls, and view toggle; explicit "Unavailable" labelling when an integration is offline; "Add suggestion" CTA for provider requests.
- —Credential and synchronisation: credentials and sync status kept in the same view but spatially separated — so users never navigate away to confirm an agent worked. Persistent MFA entry, masked fields, help tooltips, password visibility toggle, and a breadcrumb showing exact storage path at the moment of saving.
- —Connected-app settings and revoke patterns for cloud destinations
Ongoing use
- —Dashboard designed as a single surface across screen sizes: summary metrics bar (accounts, documents, agents, delivery status) followed by three legible source columns on desktop and stacked sections with bottom tab navigation on mobile. Inline agent status expansion showing file count or contextual error without navigation; HR Documents spatially separated and explicitly labelled.
- —Folder tree rendering multiple storage sources (Securibox, employer, Google Drive, OneDrive) as one unified view — different origins, one browsing experience.
Code
Marketing site
- —Gatsby static generation with bilingual FR/EN routing and SEO — chosen for performance and crawlability on a site that needs to build trust before the user ever sees the app.
- —Multi-page structure: landing (agent carousel, value proposition, setup flow), security (encryption posture, data handling, trust signals), and pricing — each page designed as a standalone entry point with its own content hierarchy.
- —Agent carousel on the landing page: rotating provider cards with category labels, activation CTAs, and background brand pairings — showcasing the breadth of integrations before sign-up.
App shell & agent views
- —React with a Vite-based toolchain; FR/EN i18n throughout. Shared component patterns with the SCA frontend where the underlying API endpoints overlapped.
- —Agent views: grid and list rendered from the same data source and shared filter state — one taxonomy and sort model driving both expressions, so switching view mode preserves filter context.
- —Credential UI: help tooltips, password visibility toggle, persistent MFA action; synchronisation status panel consuming API sync history and document counts.
Dashboard, files & settings
- —Summary metrics bar and three-column layout; inline agent status expansion with conditional rendering (file count vs error state); mobile reorganisation to single column with bottom tabs.
- —Files explorer: folder tree rendering multiple storage sources (Securibox, employer, Google Drive, OneDrive) as one unified view; storage capacity visualisation.
- —Connected applications: settings and revoke flows for cloud destinations in the UI.
Results & Metrics
Trade-offs & Learnings
— The landing page (cube.securibox.eu) was designed alongside the app — not after it. It handles the first layer of understanding (what agents are, how sync works) so the app itself can skip the explainer and let users explore immediately.
— Inside the app, there used to be a step-by-step walkthrough. It was removed. Instead of pushing actions or asking for immediate commitment, the experience stays open and pressure-free. When no agent is set up, the interface shows a single clear entry point: "Configure your first agent." Only after interacting do users see available options. Progressive reveal over guided tours.
— Cube as a sub-brand had to feel distinct from Securibox corporate — approachable, personal, consumer-grade — while clearly belonging to the same family. The tension surfaced in every colour and type decision: too far from the parent brand and enterprise clients question the relationship; too close and consumers feel they've landed in a B2B tool. The resolution was accent colour and tone of voice, not structural divergence.
— Maintaining two build systems — Gatsby for the marketing site and React/Vite for the app — introduced overhead. The trade-off was worth it: the marketing site needed static generation, SEO, and fast first-paint; the app needed SPA routing, shared state, and component reuse with SCA. Keeping them separate meant each could optimise for its audience without compromising the other.
— Designing mobile as a dedicated single-column layout with bottom tab navigation — rather than a responsive adaptation of the desktop grid — meant maintaining a parallel layout system. The payoff: the mobile experience reads as intentional, not squeezed. The cost: every new dashboard feature ships twice.
Trust is the product. Everything else is plumbing.
300+ agents, one credential moment — designed so the hardest step feels like the safest one.