Digital Transformation
The Regional Council of Engineering and Agronomy of the State of São Paulo (Crea-SP) is the largest Supervisory Council for Professional Practice in Latin America and is among the largest in the world.
In 2021 a Digital Transformation is their main goal, and they choose Jaqueline Miguel as their UX and UI Designer.
Service Portal
Challenge
Users faced difficulty navigating CREA-SP's digital platforms, resulting in time wasted trying to locate essential services. The goal: develop a unified, personalized service portal focused on usability and efficiency.
Achievements
-
Led the development of the CREA-SP Design System (Figma), resulting in greater consistency and efficiency.
-
Redesigned the interface, which increased accessibility by 30% (improved contrast, typography, and navigation).
-
Performance optimization that accelerated loading times by 15% (layout and responsiveness).
Identified Challenge
Users were struggling to find key services on the CREA-SP website, leading to wasted time and frustration. The goal was to develop a unified, personalized portal focused on usability and quick access to the most frequently used services.
Project Steps
-
Initial Analysis
Identified the need for a centralized digital portal with improved usability and service accessibility.
-
Behavior Mapping
Heatmaps were applied to the existing website to understand navigation patterns and define which services should be prioritized in the new structure.
-
Benchmarking & UX References
Conducted benchmarking with other regional CREA websites and professional councils’ service portals. Major national banking platforms were also analyzed and adopted as usability and interaction standards.
BEFORE / AFTER Crea-sp Website
-
Site Redesign & Visual Alignment
Based on benchmarking insights, the CREA-SP site was redesigned to reflect best practices in navigation, layout, and accessibility — integrating improvements directly into the new architecture and aligning it with user expectations.
-
Design System Creation
Developed a comprehensive design system (check out the demo below) to ensure visual and functional consistency across the redesigned site and future digital products
-
MVP Prototyping
Designed the MVP using Figma, focusing on mobile-first and responsive design, streamlining access to services. After we were happy with the wireframes, it was time to translate them into UI designs that would be handed over to the developers for implementation.
Design System
.png)
Figma Design System: Core Component Snippet
Implementation & Design-to-Code Bridge
To ensure the CREA-SP Design System wasn't just a library of static components, I acted as a bridge to the engineering team. I co-developed the global CSS architecture, translating Figma tokens into production-ready code used across all institutional platforms. This technical collaboration ensured 100% visual fidelity and drastically reduced development time for new features. As a direct result of this standardized implementation, we achieved a 30% improvement in accessibility compliance and a 15% boost in overall site performance.
Scalability & Design Ecosystem
The CREA-SP Design System was built as a scalable backbone to ensure a sustainable and accessible digital evolution.
-
CMS Integration: Components are integrated into the CMS, allowing teams to deploy new pages with full visual integrity and reduced development time.
-
Mobile-First Consistency: Every component was adapted for mobile, ensuring 100% functional parity and intuitive interactions on handheld devices.
-
Inclusive Growth: Native support for advanced accessibility, including a high-contrast inverted mode, ensuring the platform scales for all users and contexts.
CMS
Mobile Consistency
High-contrast inverted mode
MVP Prototyping
Designed the MVP using Figma, focusing on mobile-first and responsive design, streamlining access to services. After we were happy with the wireframes, it was time to translate them into UI designs that would be handed over to the developers for implementation.
Wireframe
Mockup
-
User Testing
Conducted usability tests with over 120 participants — 60 on mobile and 60 on desktop — to validate the new interface and user flows.
-
Refinement and Handoff
Refined layouts and interactions based on user feedback and created complete documentation and user flows for the development team.
-
MVP Launch Support
Provided ongoing support throughout development, ensuring the final product met usability and design goals from MVP to delivery.
Wireflow & Userflow
.png)
_edited.jpg)
Additional projects
As part of CREA-SP’s broader digital transformation, there was a clear need for an automated support channel to help users quickly find information and navigate services. This led to the creation of Minerva — an omnichannel chatbot designed to assist users across all CREA-SP digital platforms.
Challenge: Users often struggled to locate specific services or documents. The customer support team was overwhelmed by repetitive inquiries, which led to delays and inefficiencies.
Achievements:
-
Provide 24/7 automated assistance across multiple platforms (website, mobile, intranet).
-
Help users find services, documents, and institutional guidance efficiently.
-
Reduce the workload of the support team by automating frequent questions.
-
Ensure Minerva’s tone and identity aligned with CREA-SP’s updated digital ecosystem.