Skip to main content

2015–Present

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

Role

Technical Product Designer & Frontend Developer

Skills

Brand identity from scratch · Visual language design · Corporate site strategy · Public page design & build · Shared design language foundations · Sub-brand architecture

Tools

Sketch · Figma · Gatsby · Bootstrap · React · Vite · Redux · Accessibility (WCAG)

Case study

Created the Securibox brand identity from scratch — logo, colour system, typography, imagery rules — and designed and built every public-facing page: corporate site, solution pages (CloudAgents, ParseXtract), about, careers, and contact. Then extended this foundation into a Unified Solutions Brand that carries across all product UIs, sub-brands, and white-label surfaces in production.

Maria Varagilal Playbook Methodology
Outcomes
Brand identity and logo designed from the ground up — colour system, typography scale, imagery direction, and application rules
Corporate site: homepage, about, careers, offices, contact — designed and built with the brand language applied end-to-end
Solution pages strategy, visual storytelling, content structure, integration diagrams, and security narrative
Unified Solutions Brand extending identity across six properties and sub-brands
Design-to-development alignment — shared styling foundation as the single source of truth for grids and components
Reduced task completion time and friction across key workflows
Context

Securibox had no established brand identity. As the company expanded from original document-management service into multiple solutions, each product emerged with its own visual language and no shared foundation. The corporate site needed to present a credible, unified platform to enterprise prospects. Solution pages needed to introduce technical products to both developers and business decision-makers. Without a brand, a visual language, or a page strategy, every touchpoint told a different story — fragmenting trust in a company that needed to feel like one reliable partner.

Every decision began with one question:

Does this make Securibox feel like one trusted company — or multiple separate tools?

Process

Phase 1

Audit

Brand & Experience Audit

Mapped every touchpoint — portals, mobile, emails, onboarding, public pages, and internal tools. Identified that the company had no cohesive visual identity and each surface had diverged into its own aesthetic. Evaluated what enterprise prospects, developers, and existing clients encountered at each entry point.

Phase 2

Principles

Unified Brand Principles

Translated the company vision into four actionable principles: Trust through Clarity, Precision in Every Interaction, Seamless Flow, Accessible by Default. These governed every decision — from the logo mark to the page hierarchy on solution pages to the tone of security copy.

Phase 3

Brand

Identity, Visual Language & Public Pages

Designed the Securibox logo and core visual identity from scratch — colour system, typography scale, imagery direction, and application rules. Then designed and built every public-facing page: the corporate homepage (solutions overview, partner credibility, journal, careers CTA), the about page (mission, team, offices, contact), and dedicated solution pages for CloudAgents and ParseXtract — each with its own content strategy, integration diagrams, security narrative, and audience-specific flow. Built the brand library in Sketch and later migrated to Figma.

Phase 4

Resources

Brand Library & Company Assets

Built the brand library in Sketch and defined core company resources — logo usage rules, presentation templates, documentation templates, and internal collateral — so the identity works beyond screens and every team can produce on-brand materials.

Phase 5

Implementation

Design Language in Production

Implemented the full visual language in production using Gatsby for static marketing properties and Bootstrap configuration as the shared styling foundation. The corporate site, solution pages, and sub-brand properties all draw from the same build and shared rules — so design specs and shipped CSS stay aligned without a separate documentation layer.

Implementation

Design

Brand identity

  • Securibox logo and mark: designed from scratch — a symbol system that works at favicon scale and on enterprise presentations alike.
  • Colour system: primary palette anchored in trust and professionalism, extended with solution-specific accent colours for sub-brands (Cube, SCA, PX).
  • Typography scale: hierarchy rules for headings, body, and code samples — consistent across marketing pages and product UIs.
  • Imagery direction: illustration style, icon system (Material Design integration), and photography tone — serious enough for regulated contexts, approachable enough for developer audiences.

Public pages — strategy & design

  • Page strategy for the corporate site and solution pages — content hierarchy, audience flow, and conversion structure designed so each page works as a standalone entry point.
  • Solution pages shaped by audience: developers scan for integration paths and code examples; business decision-makers scan for trust signals and security posture. Same page, two reading lines.
  • Integration diagrams and process flows designed as page components — visual explanations of technical architecture (agent pipeline, extraction pipeline) that do the heavy lifting so the copy stays lean.
  • Shared patterns across all public pages: security narrative block, contact CTA, GDPR-compliant form copy — consistent but not templated.

Unified language & touchpoints

  • Unified Solutions Brand: one design language across the corporate site, six product UIs, white-label portals, and client-facing surfaces — shared foundations, not shared templates.
  • Reusable hierarchy, spacing, grids, and UI patterns serving marketing pages, logged-in applications, onboarding, and email.
  • Sub-brand architecture: Cube, SCA, RH, Securibox ID, Me, and PX each have their own expression within the family — distinct audiences, coherent identity.
  • Coverage mapped to real channels: public sites, product UIs, account and auth entry points, HR and operator surfaces, enterprise client portals

Code

Corporate site

  • Gatsby: all public pages — homepage, about, solutions, documentation, and legal — built as static sites with responsive layouts and the design language applied directly in production.
  • Accessibility: WCAG-oriented patterns built into every page from the start.

Shared styling foundation

  • Bootstrap: brand applied through shared configuration — grids, components, and consistent rules — so design specs and shipped CSS draw from the same source across properties.

Company resources

  • Logo assets, presentation templates, and documentation templates delivered alongside the digital properties.
Results & Metrics
Brand identity created from zero — logo, colour system, typography, imagery direction — now the foundation across all Securibox properties
Corporate site and all solution pages designed, built, and shipped — the company's primary external face
Brand consistency improved across all client-facing touchpoints
Design-to-development alignment improved — fewer handoff iterations per component
Strengthened perception of a cohesive, reliable platform across enterprise clients
Trade-offs & Learnings

— Prioritising shared principles over visual flourish meant scaling back early design iterations. Adoption across teams mattered more than any single page looking its best in isolation.

— Bootstrap was a strategic choice — not a limitation. Using a framework with established conventions reduced documentation overhead and made it possible for one designer to maintain consistency across six properties.

— The corporate site and solution pages were designed as the brand's first expression. Every decision made there — colour, type, hierarchy, tone — became the reference point for product UIs that followed. Getting it wrong publicly would have undermined the system before it reached internal surfaces.

— Unification proved to be as much about culture as design. The identity was built to remain resilient even as teams evolve and new products are introduced.

Define what matters, shrink the space between design and production.

One logo, one language, one build. The brand is the language.