Home›Projects›Brand & Bilingual Website

Insurance / Advisory

Brand & Bilingual Website

Researched, designed, and built Protecta’s brand and bilingual website, from content structure and components to the initial live release in five days.

2026Design Engineer | Brand, content, and websiteClient: Protecta Advisory

Structure

My role was Design Engineer, owning the brand system, bilingual UX/UI, content structure, implementation, accessibility QA, and launch; the client advisors provided domain expertise and final approvals.

Tools Used

  • NotebookLM
  • Figma AI
  • Codex
  • Claude Code
  • Storybook
  • Grammarly

The problem

Protecta is an independent health and life insurance advisory serving multicultural US families in English and Spanish. Their value is human-led, year-round guidance, the opposite of the call-center feeling common in the category.

They already had strong word-of-mouth momentum and a referral model that pays cash incentives, but they had no brand system, no website, and no content architecture to explain that value clearly online.

AI-Augmented Delivery Workflow

AI expanded the option set; I set the criteria. At every stage, I evaluated outputs against source research, bilingual user needs, brand trust, business goals, feasibility, and accessibility, then selected the direction and made the final call.

1

Capture + Research

Capture audience needs, objections, and the service model.

Client callQuestionnaireNotebookLM

2

Brand + Content

Explore tone, hierarchy, and copy, then refine the strongest direction.

Claude DesignClaude

3

Design + Build

Build the Figma component library and carry it into production code.

Figma AICodexClaude Code

4

Validate

Document coded states, check accessibility, and prepare launch.

StorybookVoiceOverVercel

Capture + Research

I grounded the work in the 2026 Hispanic Insurance Growth Blueprint, client questionnaire, and advisor interviews, focusing on ACA, life, and digital acquisition. Advisor input surfaced recurring objections, trust concerns, and family questions.

AI accelerated research synthesis and analysis of bilingual patterns and positioning gaps. I used those findings to shape the website’s content hierarchy, brand voice, and contact path, then made the final design and implementation decisions.

Open Notebook research ↗

Brand + Content

Connected the visual direction and content system from the start, using Claude Design and Claude to explore tone, hierarchy, and copy. I refined the strongest direction into a premium, advisor-led brand system, then wrote and adapted the messaging so the English and Spanish experiences each felt native rather than translated.

Visual direction

Coverage that actually shows up.

Warm, premium, human

Deep pine grounds the system; cream and warm accents keep insurance guidance calm and approachable.

Message hierarchy

Complete family protection

Coverage that shows up for you.

Protección familiar completa

Cobertura que está contigo.

English and Spanish, equally considered

Each language gets its own clear hierarchy and natural phrasing, not a translated afterthought.

Voice + content system

WarmClearSupportive

Problem → Explanation → Solution → Next step

Guide before selling

Short, plain-spoken content builds confidence first, then invites a conversation when the family is ready.

Design + Build

I built the design-system components in Figma with Figma AI, then implemented their coded counterparts with AI-assisted development. Storybook documents the implementation states, keeping bilingual reuse, accessibility review, and future iteration visible in one place.

Claude DesignExploration
ProtectaEN  /  ES

Coverage that shows up for you.

Get a free quote

Explore the visual direction

A fast first screen to compare tone, hierarchy, and brand character, not the final UI.

Figma AIComponents

Hero / Default

Care that stays with you.

Quote

Button

Primary

Language

ENES

Turn the direction into a system

I built the components, variants, and bilingual states that the pages would reuse.

StorybookButton / Docs
Components / Button

Default · hover · focus · disabled

Implement and verify

The coded counterpart is reviewed in Storybook for behavior, responsive states, and accessibility.

Protecta Storybook · Accordion
Open Protecta Storybook ↗
Protecta website design
Protecta logo

Newsreader

Warm editorial display and headlines

Geist

Clear, modern body and UI text

JetBrains Mono

Eyebrows, labels, and data

Deep pine

#154F4D

Soft sage

#CFE3AD

Cream

#FDFCFE

Clay

#D96C4B

Honey

#E6BE63

Validate

Demand captured

The recorded volume works out to roughly 30 WhatsApp inquiries and 10 qualified leads per week. The contact path turned website attention into a repeatable advisor workload instead of an unstructured inquiry channel.

Sales progression

One in three inquiries became qualified, one in four qualified leads booked, and three of 10 consultations closed. That makes the clearest confirmed outcome three new customers and a 2.5% inquiry-to-customer progression.

Protecta project cover

1,000

Website visits

120

WhatsApp inquiries

12% same-period contact ratio

40

Qualified leads

33% of inquiries

10

Consultations booked

25% of qualified leads

3

New customers

30% of consultations · 2.5% of inquiries

Recorded in the same 28-day period. The 12% contact ratio and downstream percentages are calculations from the reported counts, not website-attributed conversion rates.

What to measure next: Add page, language, and campaign tags to every WhatsApp CTA, then carry the source into the CRM. That will show which content creates qualified demand and allow customer value to be reported without guessing. With only 10 consultations, one additional customer changes the close rate by 10 percentage points, so the next 2–3 reporting cycles should confirm the trend before major investment.

Learnings

AI is best at compression, not authorship. The biggest gain came from compressing research synthesis, first-draft copy, and code scaffolding. Brand judgment, hierarchy, and trust signals still needed a designer making the calls.

Localization is a design decision. The Spanish experience needed cultural adaptation, not literal translation. That changed tone, phrasing, and how reassurance showed up in the interface.

A live product changes review quality. Showing the client a working site instead of frames made feedback faster and more grounded because they evaluated the real experience rather than imagining it.

More work

Other Projects

Print DesignBrand Design

Classical Word Arabic Institute

Created a warm, editorial six-panel trifold that brings the institute's learning offer, faculty, and enrollment journey into one cohesive print experience.

View case study →
Self-Service Access and Role Management case study preview for Paychex & Flock
UX ResearchIA

Self-Service Access and Role Management

Replaced a manual workflow with a centralized, self-managed platform; cutting processing time by 72%.

View case study →
AI Benefits Integration case study preview for Nayya AI
UX ResearchIA

AI Benefits Integration

Designed the integration of Nayya as an AI-powered benefits tool, guiding employees to choose coverage that matched their needs.

View case study →