The Redesign
The new portal reorganizes the experience around clearer user journeys, direct access to frequently used services and a modular interface designed to support future evolution.
- Clearer entry points for beneficiaries, providers and internal teams
- Simplified navigation and information architecture
- Improved service discoverability
- Stronger visual hierarchy and consistency
- Responsive interface structure
- Reusable components and service patterns
- Accessibility-oriented design decisions
- Functional front-end prototype for validation
My Role
I worked across the digital product design and prototyping process, including:
- Information architecture and content organization
- UX/UI design
- Navigation structure and user flows
- Visual identity adaptation for digital interfaces
- Responsive interface design
- Functional front-end development
- Public-area and simulated private-area experiences
- Interactive forms, dashboards and data visualization
- Content structure for knowledge-based services
- Design system and implementation documentation
User Experience
The portal was designed around three main audiences:
- Beneficiaries
- Accredited healthcare providers
- Authorized Plan-Assiste staff
The interface prioritizes simple language, clear actions and direct access to frequently used services.
Experiences represented in the prototype include:
- Beneficiary onboarding and guidance
- Accredited provider search
- Beneficiary services
- Provider services
- News and institutional information
- Contact and support channels
- Simulated beneficiary login and private-area navigation
- Forms, dashboards and service requests
Design Approach
The interface uses a modular system based on reusable components, cards, navigation patterns and clearly separated service areas.
The visual language builds on the Plan-Assiste identity through green and teal tones while introducing stronger hierarchy, cleaner spacing, clearer states and a more consistent component structure.
The portal was designed for desktop use while remaining responsive for smaller screens and mobile experiences.
Technology
The functional prototype was developed with:
- React
- TypeScript
- Vite
- React Router
- Tiptap
- Recharts
- ExcelJS
- Lucide
- Custom CSS
- Vercel
Important: the portfolio version is a functional prototype. It uses simulated authentication and local data where necessary to demonstrate workflows and interactions. It does not connect to production Plan-Assiste systems, gov.br authentication or the Benner backend.
Design System & Portal Manual
To support consistency and future evolution of the portal, I also developed a dedicated implementation manual covering the main design and interface principles of the project.
The manual documents visual identity, layout structure, reusable components, editorial and content patterns, accessibility guidelines, motion principles, responsive behavior, page structure and administrative interfaces.
View Portal Manual
https://planassiste.vercel.app/manual-portal.html
Functional Prototype
The project can be explored as a live interactive prototype:
View Live Prototype
https://planassiste.vercel.app
From UX Concept to Working Product
Plan-Assiste demonstrates my approach to digital product development: understanding complex information and processes, organizing them around user needs, designing the experience and transforming the resulting interface into a functional application.
The project brings together digital communication, information architecture, UX/UI design, front-end development and design-system documentation within a single digital service experience.
Client: Ministério Público da União (MPU)
Role: Information Architecture, UX/UI Design, Front-End Development
Tools: React, TypeScript, Vite, React Router, Tiptap, Recharts, ExcelJS, Lucide, Vercel
Year: 2026
Live Prototype: https://planassiste.vercel.app
Portal Manual: https://planassiste.vercel.app/manual-portal.html
