(WIP)
Ministério da Saúde
"Onde está o dinheiro da saúde"
/ Ministry of Health
"Where is the health money?"
TL; DR:
Caso / Case:
App Redesign
Tipo / Kind:
Redesenhar o aplicativo que era só para Android para uma versão única compatível com Android, iOS e Web
/ Redesigning the app that was initially only for Android into a unified version compatible with Android, iOS, and Web.
Duração / Timeframe:
18 meses e contando / months and counting
Plataforma / Platform:
App (iOS and Android) and Web (mobile and desktop)
Meu envolvimento / My involvement:
Information Architecture, UI Design
Impacto / impact:
WIP
• Contexto
/ Context
Este aplicativo foi lançado pelo Ministério da Saúde do Brasil para promover a transparência e permitir que a população acompanhe a destinação dos recursos públicos no setor de saúde. O objetivo principal é permitir que os cidadãos monitorem os gastos e investimentos realizados pelo governo federal, estados e municípios em saúde pública. A iniciativa de criar o aplicativo surgiu como parte dos esforços do governo brasileiro para aumentar a transparência e a prestação de contas na gestão dos recursos públicos, fortalecendo o controle social e a participação da sociedade na fiscalização do uso do dinheiro público
/ This app was launched by the Ministry of Health of Brazil to promote transparency and allow the population to track the allocation of public resources in the health sector. The main objective is to enable citizens to monitor the expenses and investments made by the federal government, states, and municipalities in public health. The initiative to create the app emerged as part of the Brazilian government's efforts to increase transparency and accountability in the management of public resources, strengthening social control and the participation of society in monitoring the use of public funds.
Tela da versão antiga do app, quando não havia acessibilidade
/ Screen of the old design of the app, when there was no accessbility
• Qual era o problema?
/ What was the problem?
O aplicativo inicialmente foi lançado apenas para Android, porque representava a maioria do brasileiros, cerca de 82% do país usa o sistema do Google. Porém o Ministério tinha a intenção de disponibilizar para todos os brasileiros, independente do sistema de seus celulares e incluindo também uma versão web para ser acessado por dispositivos móveis ou computadores. O desafio então era que todo o design do aplicativo era limitado muito amador, visto que o mesmo foi projetado por uma pequena equipe de jovens empreendedores.
/ The app was initially launched only for Android, as it represented the majority of Brazilians, with about 82% of the country using Google's system. However, the Ministry intended to make it available to all Brazilians, regardless of their mobile system, including a web version accessible by mobile devices or computers. The challenge was that the entire app design was very limited and amateurish, as it was designed by a small team of young entrepreneurs.
Tela da versão antiga do app, quando não havia acessibilidade
/ Screen of the old design of the app, when there was no accessbility
Os principais problemas que precisavam ser resolvidos eram:
/ The main issues that needed to be addressed were:
• Ausência de acessibilidade no design
/ Lack of accessibility in the design
• Responsividade para Web
/ Responsiveness for the web
• Adaptação para uma versão em comum com Android e iOS
/ Adaptation for a common version for Android and iOS
• Melhor comunicação dentro do app
/ Better communication within the app
• Melhor visualização dos diversos gráficos e dados
/ Improved visualization of various charts and data
• Facilitação do design a ponto de alcançar públicos mais leigos em leitura de dados
/ Simplifying the design to reach more lay audiences in data reading
• Solução
/ Solution
Assim, fui contratado para integrar a equipe da Fiocruz (o órgão que primeiro investiu no desenvolvimento do aplicativo), para que o mesmo fosse adaptado para e cumprisse todos os requerimentos que faltavam. Após a entrega e o desenvolvimento o projeto será entregue ao Ministério da Saúde do Brasil para que este órgão o gerencie (e não mais a Fiocruz).
/ Thus, I was hired to join the Fiocruz team (the organization that first invested in the development of the app) to adapt it and meet all the missing requirements. After the delivery and development, the project will be handed over to the Ministry of Health of Brazil so that this body manages it (and no longer Fiocruz).
• Processo de design
/ Design Process
• UI Design
/ UI Design
o processo de UI design para este aplicativo foi particularmente desafiador, pois exigia uma reestruturação constante para atender às melhores práticas de acessibilidade e interpretação de dados. O aplicativo, focado na transparência de dados da saúde, frequentemente apresentava informações complexas e gráficos detalhados recebidos do backend. Meu desafio era diagramar esses dados de uma maneira que fosse compreensível para um público com baixa escolaridade. Trabalhei extensivamente na simplificação de gráficos e na criação de visualizações de dados que transformassem informações complexas em insights fáceis de entender. Isso envolveu o uso de ícones, legendas e textos explicativos.
/ The UI design process for this app was particularly challenging, as it required constant restructuring to meet best practices in accessibility and data interpretation. The app, focused on health data transparency, frequently presented complex information and detailed charts received from the backend. My challenge was to diagram these data in a way that would be understandable to an audience with low educational levels.
I worked extensively on simplifying charts and creating data visualizations that transformed complex information into easily understandable insights. This involved the use of icons, captions, and explanatory text.
• Aprovação interna com o governo
/ Internal approval with the government
Trabalhar no desenvolvimento de um aplicativo para o governo é um processo desafiador e complexo, devido às diversas camadas de aprovação envolvidas. Cada etapa requer uma série de reuniões e revisões, o que pode ser exaustivo e demorado. A aprovação do aplicativo passa por vários departamentos e níveis hierárquicos, cada um com suas próprias exigências e critérios. Além disso, o prazo do projeto é frequentemente afetado por mudanças no governo, como a troca de presidente do país, o que pode alterar prioridades e introduzir novas diretrizes.
/ Working on the development of a government app is a challenging and complex process due to the various layers of approval involved. Each stage requires a series of meetings and reviews, which can be exhausting and time-consuming. The app's approval goes through multiple departments and hierarchical levels, each with its own requirements and criteria. Additionally, the project timeline is often affected by changes in the government, such as a change of the country's president, which can shift priorities and introduce new guidelines.
Reunião da equipe da Fiocruz discutindo a aprovação de detalhes do app com o Ministério da Saúde em Março/2024
/ Fiocruz team meeting discussing app details approval with the Ministry of Health in March 2024.
/ Fiocruz team meeting discussing app details approval with the Ministry of Health in March 2024.
Apesar dessas dificuldades, a UI do aplicativo sempre recebeu muitos elogios. Durante todas as revisões, os comentários e ajustes solicitados pelos avaliadores foram sempre focados no conteúdo e não nos componentes. A estrutura visual, a usabilidade e o design geral do aplicativo foram consistentemente bem-recebidos, destacando a qualidade do trabalho realizado. Mesmo enfrentando atrasos e mudanças, a consistência e a qualidade do design foram pontos positivos reconhecidos em todas as etapas do processo de aprovação.
/ Despite these difficulties, the app's UI has always received high praise. Throughout all the reviews, the feedback and adjustments requested by the evaluators were always focused on the content, not the components. The visual structure, usability, and overall design of the app were consistently well-received, highlighting the quality of the work done. Even facing delays and changes, the consistency and quality of the design were positive points recognized at every stage of the approval process.
• Handoff
/ Handoff
Arquivo de Figma contendo:
/ Figma file containing:
• Protótipo de alta fidelidade
/ High-fidelity prototype
• Telas revisadas
/ Revised screens
• Anotações documentando cada tela
/ Annotations documenting each screen
• Marcações para o Dev Mode do Figma
/ Markups for Figma Dev Mode
• Componentes documentados
/ Documented components
• Notações de acessibilidade
/ Accessibility notes
• Fluxos adaptados para App e Web
/ Flows adapted for App and Web
/ Figma file containing:
• Protótipo de alta fidelidade
/ High-fidelity prototype
• Telas revisadas
/ Revised screens
• Anotações documentando cada tela
/ Annotations documenting each screen
• Marcações para o Dev Mode do Figma
/ Markups for Figma Dev Mode
• Componentes documentados
/ Documented components
• Notações de acessibilidade
/ Accessibility notes
• Fluxos adaptados para App e Web
/ Flows adapted for App and Web
Exemplo de telas no Figma
/ Sample of Figma screens
Estruturei o arquivo de maneira organizada, com páginas e seções distintas para telas, componentes e estilos. No Dev Mode, os desenvolvedores puderam acessar informações detalhadas sobre cada elemento de design, como dimensões, espaçamento e propriedades CSS, além de inspecionar componentes e ver o código gerado automaticamente.
/ I structured the file in an organized manner, with distinct pages and sections for screens, components, and styles. In Dev Mode, developers could access detailed information about each design element, such as dimensions, spacing, and CSS properties, as well as inspect components and view the automatically generated code.
/ I structured the file in an organized manner, with distinct pages and sections for screens, components, and styles. In Dev Mode, developers could access detailed information about each design element, such as dimensions, spacing, and CSS properties, as well as inspect components and view the automatically generated code.
Criei e documentei componentes reutilizáveis, adicionando descrições e notas para explicar suas variações, estados e comportamentos esperados, o que facilitou a compreensão e utilização correta.
/ I created and documented reusable components, adding descriptions and notes to explain their variations, states, and expected behaviors, facilitating proper understanding and usage.
/ I created and documented reusable components, adding descriptions and notes to explain their variations, states, and expected behaviors, facilitating proper understanding and usage.
Incluí protótipos interativos e animações para demonstrar a navegação e transições esperadas, mantendo uma comunicação constante com a equipe de desenvolvimento para integrar feedback e esclarecer dúvidas.
/ I included interactive prototypes and animations to demonstrate the expected navigation and transitions, maintaining constant communication with the development team to integrate feedback and clarify doubts.
/ I included interactive prototypes and animations to demonstrate the expected navigation and transitions, maintaining constant communication with the development team to integrate feedback and clarify doubts.
Além disso, exportei todos os ativos necessários, como ícones e imagens, nos formatos e resoluções apropriados, garantindo que os desenvolvedores tivessem todos os recursos de que precisavam para iniciar a implementação imediatamente.
/ Additionally, I exported all necessary assets, such as icons and images, in the appropriate formats and resolutions, ensuring that developers had all the resources they needed to start implementation immediately.
/ Additionally, I exported all necessary assets, such as icons and images, in the appropriate formats and resolutions, ensuring that developers had all the resources they needed to start implementation immediately.
• Resposta dos usuários
/ Users usage
(O aplicativo está em desenvolvimento)
(/ WIP - work in progress)
• Impacto
/ Impact
(O aplicativo está em desenvolvimento)
(/ WIP - work in progress)