Family-Law Practice — Website & Editorial Portal
Nine page templates including a podcast hub and blog, desktop and mobile.
A multi-page presence for a specialised family-law practice: practice-area pages, institutional narrative, media appearances, a podcast hub and blog templates. I designed every desktop and mobile layout — home, about, divorce, custody, services, contact, news, podcast and blog — establishing the typographic hierarchy, the custom navigation components and the practice-area card patterns, over a 19-frame design page and a 24-frame style guide. Sole website UI designer; identity and the build were other people's.
- Role
- Sole website UI designer
- Timeframe
- Jan 2024 – Feb 2024
- Stack
- Figma
- Evidence
- Live
- Design file
Sole Website UI Designer for PHR Advogados, a boutique law firm specialized in Family and Succession Law (Direito de Família e Sucessões). Designed 19 responsive canvas nodes across desktop and mobile in Figma (file key BHcRPjnGD2AzDId9LBd3Y7) spanning core institutional pages (Início, Quem somos, Contato), detailed practice area subpages (Divórcio, Guarda, O que fazemos), an editorial thought-leadership blog (Blog #14), and media integration hub (Notícias & PHR Podcast), supported by a 24-node Style Guide establishing brand colors (#477891 slate blue and warm neutrals), typography hierarchies, and responsive navigation bars.
Agency employment at Sagitta delivering from January 5, 2024 to February 15, 2024. Juan served as the sole website UI designer within the agency team: Kelvin Bezerra designed the firm's visual identity and logo, Juan designed the complete multi-page responsive website in Figma, and an external no-code developer implemented and published the site on WordPress. Scoped by Ramon.
Boutique legal UX: empathy and authority in family law
- 19
- responsive layout nodes on the primary Design page
- Tier A
- production fidelity match between Figma and live website
- 24
- style guide design tokens and typography specifications
- 118 KB
- verified live HTML at phradvogados.com.br
Family and Succession Law involves deeply personal, emotionally fraught life events: contentious divorces, child custody disputes, and family inheritance mediation. Potential clients searching for representation are often experiencing acute stress. The design for PHR Advogados required balancing profound human empathy with uncompromising legal authority, replacing cold legal bureaucracy with a welcoming, dignified digital experience.
Editorial thought leadership: podcast and media hub
Unlike traditional firms that rely solely on static brochures, PHR Advogados actively produces educational legal content. On the primary Design page (node 1:15), I architected dedicated content surfaces to showcase their authority:
- PHR Podcast Hub — Dedicated media showcase featuring episode players, topic overviews, and streaming platform links to demystify complex family law issues for the public.
- Press & Media Coverage (Notícias) — Curated press room showcasing television interviews, legal commentary, and newspaper citations establishing public credibility.
- Detailed Practice Verticals (Divórcio & Guarda) — Focused, compassionate pages explaining the procedural differences between judicial and extrajudicial divorce, child custody arrangements, and child support calculations.
- Editorial Legal Blog (Blog #14) — Clean, readable typographic article templates optimized for long-form legal guides and case law analysis.
- Clear Contact Gateway (Contato & Mobile Views) — Low-friction, discreet consultation scheduling forms with direct confidential WhatsApp contact options.
Juan grades this project Tier A: the production site at phradvogados.com.br answers HTTP 200 with 118 KB and faithfully preserves the delivered Figma typography, practice cards, and editorial layouts. It represents one of the closest production alignments in the Sagitta agency cohort.
Visual identity tokens in the Style Guide
The 24-node Style Guide page (node 1:16) standardized the firm's visual foundation: a calming slate blue primary tone (#477891), warm neutral backgrounds, accessible contrast ratios for sensitive reading, and elegant typographic scales reflecting Kelvin Bezerra's brand identity.
What this project is and is not
- Not brand identity or logo design. Kelvin Bezerra designed the PHR Advogados logo and visual brand.
- Not WordPress implementation. The website was deployed in WordPress by a no-code developer.
- Not podcast recording or editorial content writing. I designed the media player UI and editorial layouts, not the audio or articles.
- Not user research or discovery. Scoping and requirements were managed by Ramon.
- Not supported by client acquisition analytics. No consultation booking or traffic metrics exist in the portfolio record.
The power of content-driven legal design
PHR Advogados demonstrates how a specialized legal practice can blend empathy with educational media to build client trust. By integrating podcast episodes, press appearances, and structured practice guides into an elegant responsive interface, the design established a benchmark for modern legal digital presence.
Evidence
The website was implemented and published to production, and continues to operate today at phradvogados.com.br (HTTP 200, 118,089 B verified on 2026-08-21). Juan grades this project as Tier A: the live site remains closely aligned with the delivered Figma designs, with only minor CMS styling adjustments. No consultation booking or traffic metrics exist. This case study documents boutique legal portal design, editorial multimedia hubs, and sensitive family practice UX.