Skip to main content
LisbonB2B · SaaS · Fintech · AI-accelerated workflows

Maria
Varagilal

Lead Frontend Designer who ships product.

10+ years transforming product experiences across B2B SaaS — from strategy through to production. I own the full design lifecycle: research, flows, UI, and when the design is approved, I build it. A designer who ships — no handoff required.

Today, I use AI to accelerate every stage — from exploration and prototyping to production-ready components.

9
Digital products
designed & shipped
5+
Products unified
single experience
4+
B2B SaaS
complex workflows
10+
Years
experience

My playbook

The MVP Method

MVP — Maria Varagilal Playbook

Growth creates complexity. When a single product becomes a platform of interconnected solutions, the biggest risk is losing the feeling of one coherent experience.

Most of my career has been spent solving that exact problem: how to keep a multi-product experience coherent as it scales.

The Maria Varagilal Playbook Method is the approach I've developed and refined along the way — translating the philosophy behind my work into a repeatable practice. Applied across strategy, design, implementation, and rollout — not just documentation — it protects the original vision as products evolve.

For me, the design lives directly in code — whether in a component, a layout, or a page. I explore and validate in design tools; once a direction is approved, I build it where it has to live to stay real.

Outcomes

When the dimensions operate together

These are results, not steps. They emerge when the five dimensions work together at the leadership level.

Clarity

Dimension 1 + Dimension 3

Seeing only what truly matters — stripping noise before it compounds

Confidence

Dimension 4

Decisions made once, launched, and trusted — no second-guessing in production

Consistency

Dimension 2 + Dimension 5

A unified experience that evolves without losing its identity

Evolution

The loop that ties it together

Each commitment describes how it evolves, but the underlying cycle is the same across all three — create, launch, test, refine — the evolution loop that keeps the vision honest.

1.

Create

Dimension 4

Work within defined boundaries

2.

Launch

Dimension 3

Reach the launch line and release

3.

Test

Dimension 5

Learn from real users and real data

4.

Refine

Dimension 1 + Dimension 2

Iterate while protecting the vision

Each pass through the loop sharpens the product and deepens understanding. The role of leadership is to protect clarity, confidence, and consistency — so the team can release, learn, and move forward with purpose. The work has always been about more than any single method — it's about what disciplined practice makes possible.

My work

Design to Production

I design it, I build it. Below is live work — brand identity, product flows, and production frontend I designed and built.

Brand & identity: Logos, visual language, and cohesive experience across ecosystems and products.

Component library — this site

Custom component library (50+ components): Built with React, Tailwind v4, theme system, and accessibility in mind.

ButtonAccordionCardSidebarDialogSheetDropdownMenuTabsForm

Components and theme configuration live in the same codebase as this landing page.

Securibox

Designed and developed the entire product family — brand identity, product experience, and production frontend across all properties.

shipped

Securibox: Unified Identity

Brand identity, visual language, and every public-facing page — from logo to production build — for a data-automation company that needed to feel like one trusted platform

+

Read in full

Sketch · Figma · Gatsby · Bootstrap · React · Vite · Redux · Accessibility (WCAG)securibox.eu
shipped

Cube - Own your data

Making credential handover feel safe and worth doing — Cube is the consumer face of Securibox's agent technology

+

Read in full

Figma · React · Gatsby · Vite · Accessibility (WCAG)cube.securibox.eu
shipped

SCA - CloudAgents

Designing the operator layer for an API product — from agent configuration to sync monitoring across 500+ integrations

+

Read in full

Figma · React · Vite · Bootstrap · Accessibility (WCAG)securibox.eu
shipped

Me - Securibox Account

Account identity hub and connected-services surface — profile, credentials, data transparency - one account layer serving the entire Securibox ecosystem

+

Read in full

Figma · React · Vite · Redux · Bootstrap · Accessibility (WCAG)me.securibox.eu
shipped

Securibox ID

Security-critical auth and registration — balancing conversion, trust, and WCAG accessibility in the first moment users encounter the platform

+

Read in full

Figma · React · Vite · Accessibility (WCAG)accounts.securibox.eu
shipped

RH — HR Payslip Distribution

Two-sided B2B payslip platform — HR bulk operations on one side, employee secure access on the other, with regulatory compliance built into every flow

+

Read in full

Get in touch

Let's build something that lasts.

From brand principles to production code — building unified experiences that create cohesion, scale with the business, and stay alive even as teams change.