Real case
jun. 2023 - nov. 2023
Material design
Material design
Biblioteca de estilos com tokens, diretrizes e regras de design para padronização de interfaces em portal intranet.
+
Como ux/ui designer responsável pelo portal corporativo da MJV, consultoria em tecnologia e inovação, eu desenvolvi a primeira versão do Material Design, uma biblioteca de estilos com tokens e diretrizes que se tornou uma base fundamental para o trabalho dos designers e desenvolvedores internos.
Sob a mentoria de um product designer especialista, eu estruturei um sistema visual, garantindo acessibilidade, consistência e eficiência na criação e edição de páginas do portal corporativo. O processo envolveu pesquisa, validação de componentes e documentação detalhada.
Resultados
alcançados
Padrão consistente de interfaces
Padrão consistente de interfaces
Otimização no trabalho (design e dev)
Otimização no trabalho (design e dev)
Redução no prazo de entrega de projetos
Redução no prazo de entrega de projetos
O desafio
MJV
consultoria de TI
+1000 funcionários
portal interno desalinhado
Problemas
As pessoas usuárias tinham dúvidas e dificuldades para encontrar e compreender as informações disponíveis no portal intranet.
A principal causa desse problema era a grande discrepância entre as páginas publicadas. Com um misto de páginas antigas e novas, não existia uma identidade visual consolidada para o portal corporativo e cada editor montava sua página conforme imaginava ser mais adequado.
Problemas
As pessoas usuárias tinham dúvidas e dificuldades para encontrar e compreender as informações disponíveis no portal intranet.
A principal causa desse problema era a grande discrepância entre as páginas publicadas. Com um misto de páginas antigas e novas, não existia uma identidade visual consolidada para o portal corporativo e cada editor montava sua página conforme imaginava ser mais adequado.
Motivação
Então, Como podemos melhorar a usabilidade do portal e torná-lo mais intuitivo?
Minha resposta foi: Uma biblioteca de estilos com componentes, diretrizes de design e referências para que se tornasse possível a padronização do portal corporativo.
Motivação
Então, Como podemos melhorar a usabilidade do portal e torná-lo mais intuitivo?
Minha resposta foi: Uma biblioteca de estilos com componentes, diretrizes de design e referências para que se tornasse possível a padronização do portal corporativo.
Etapas do projeto
research; usabilidade; componentização; acessibilidade; Sync-up.
74 telas do portal
foram avaliadas
para entender o uso
de elementos e definir padronização + regras
dos componentes.
Durante a etapa de mapeamento e análise, eu fiz um levantamento de todas as principais telas do portal corporativo para avaliar os elementos visuais utilizados. Também comecei a estudar sobre UI Kits e Design Systems para entender como a biblioteca de estilos deveria ser.
Finalizadas as análises, eu defini quais elementos seriam definidos nessa primeira versão da biblioteca de estilos. A partir de então, as pesquisas e estudos passaram a ser sobre elementos específicos, a fim de apoiar a construção dos componentes e das regras de uso.
Definição de Guidelines
Componentes entregues
5 áreas da empresa começaram a utilizar o Material Design logo após seu lançamento e orientações
Após construído, o Material Design foi apresentado para as áreas da empresa e houve uma etapa dedicada a instruir as pessoas quanto a sua importância e aplicação. Para tal, foram desenvolvidos materiais que explicavam sobre as diretrizes, boas práticas de design e regras de uso para cada componente.
5 dentre os portais internos aderiram ao Material Design logo que este foi apresentado, iniciando o processo de substituição de elementos antigos pelos padronizados, de forma que foi constatado uma otimização do trabalho de desenvolvimento das páginas do portal corporativo.
Aplicação de componentes
Retrospectiva
Aprendizados
Design system e acessibilidade
Eu aprendi os princípios de Design System e a pensar mais sistemicamente, integrando design, acessibilidade e escalabilidade para criar componentes funcionais e adaptáveis.
próximos passos
Evolução para Design system
A minha ideia era que esse material design evoluísse até se transformar em um Design System completo. Então, eu esperava acompanhar de perto a aceitação e implementação do projeto para que, aos poucos, eu trabalhasse nessa evolução.
Dificuldades
Baixa maturidade de design
Devido a total liberdade para várias pessoas criarem suas páginas, tive dificuldade para encontrar apoio para a implementação do material design. A solução para isso foi fazer reuniões de alinhamento com as equipes e apresentar a proposta, incluindo o processo de construção, benefícios para o portal e os resultados estimados.
Reflexão sincera
Colaboração entre diferentes áreas internas seria melhor para o projeto
Olhando por uma nova perspectiva, o processo de construção do material design poderia ter sido menos unilateral, incluindo desde o início pessoas de outras áreas e não apenas de uma equipe, embora fosse multidisciplinar.
Aprendizados
Design system e acessibilidade
Eu aprendi os princípios de Design System e a pensar mais sistemicamente, integrando design, acessibilidade e escalabilidade para criar componentes funcionais e adaptáveis.
próximos passos
Evolução para Design system
A minha ideia era que esse material design evoluísse até se transformar em um Design System completo. Então, eu esperava acompanhar de perto a aceitação e implementação do projeto para que, aos poucos, eu trabalhasse nessa evolução.
Dificuldades
Baixa maturidade de design
Devido a total liberdade para várias pessoas criarem suas páginas, tive dificuldade para encontrar apoio para a implementação do material design. A solução para isso foi fazer reuniões de alinhamento com as equipes e apresentar a proposta, incluindo o processo de construção, benefícios para o portal e os resultados estimados.
Reflexão sincera
Colaboração entre diferentes áreas internas seria melhor para o projeto
Olhando por uma nova perspectiva, o processo de construção do material design poderia ter sido menos unilateral, incluindo desde o início pessoas de outras áreas e não apenas de uma equipe, embora fosse multidisciplinar.
Aprendizados
Design system e acessibilidade
Eu aprendi os princípios de Design System e a pensar mais sistemicamente, integrando design, acessibilidade e escalabilidade para criar componentes funcionais e adaptáveis.
próximos passos
Evolução para Design system
A minha ideia era que esse material design evoluísse até se transformar em um Design System completo. Então, eu esperava acompanhar de perto a aceitação e implementação do projeto para que, aos poucos, eu trabalhasse nessa evolução.
Dificuldades
Baixa maturidade de design
Devido a total liberdade para várias pessoas criarem suas páginas, tive dificuldade para encontrar apoio para a implementação do material design. A solução para isso foi fazer reuniões de alinhamento com as equipes e apresentar a proposta, incluindo o processo de construção, benefícios para o portal e os resultados estimados.
Reflexão sincera
Colaboração entre diferentes áreas internas seria melhor para o projeto
Olhando por uma nova perspectiva, o processo de construção do material design poderia ter sido menos unilateral, incluindo desde o início pessoas de outras áreas e não apenas de uma equipe, embora fosse multidisciplinar.
Aprendizados
Design system e acessibilidade
Eu aprendi os princípios de Design System e a pensar mais sistemicamente, integrando design, acessibilidade e escalabilidade para criar componentes funcionais e adaptáveis.
próximos passos
Evolução para Design system
A minha ideia era que esse material design evoluísse até se transformar em um Design System completo. Então, eu esperava acompanhar de perto a aceitação e implementação do projeto para que, aos poucos, eu trabalhasse nessa evolução.
Dificuldades
Baixa maturidade de design
Devido a total liberdade para várias pessoas criarem suas páginas, tive dificuldade para encontrar apoio para a implementação do material design. A solução para isso foi fazer reuniões de alinhamento com as equipes e apresentar a proposta, incluindo o processo de construção, benefícios para o portal e os resultados estimados.
Reflexão sincera
Colaboração entre diferentes áreas internas seria melhor para o projeto
Olhando por uma nova perspectiva, o processo de construção do material design poderia ter sido menos unilateral, incluindo desde o início pessoas de outras áreas e não apenas de uma equipe, embora fosse multidisciplinar.
ei, Obrigada
Fico feliz por você conferir meu trabalho.
Se tiver dúvidas ou quiser conversar, me mande uma mensagem ou e-mail e conecte-se pelo LinkedIn.
Real case
jun. 2023 - nov. 2023
Material design
Biblioteca de estilos com tokens, diretrizes e regras de design para padronização de interfaces em portal intranet.
+
Como ux/ui designer responsável pelo portal corporativo da MJV, consultoria em tecnologia e inovação, eu desenvolvi a primeira versão do Material Design, uma biblioteca de estilos com tokens e diretrizes que se tornou uma base fundamental para o trabalho dos designers e desenvolvedores internos.
Sob a mentoria de um product designer especialista, eu estruturei um sistema visual, garantindo acessibilidade, consistência e eficiência na criação e edição de páginas do portal corporativo. O processo envolveu pesquisa, validação de componentes e documentação detalhada.
Resultados
alcançados
Padrão consistente de interfaces
Otimização no trabalho (design e dev)
Redução no prazo de entrega de projetos
O desafio
MJV
consultoria de TI
+1000 funcionários
portal interno desalinhado
Problemas
As pessoas usuárias tinham dúvidas e dificuldades para encontrar e compreender as informações disponíveis no portal intranet.
A principal causa desse problema era a grande discrepância entre as páginas publicadas. Com um misto de páginas antigas e novas, não existia uma identidade visual consolidada para o portal corporativo e cada editor montava sua página conforme imaginava ser mais adequado.
Motivação
Então, Como podemos melhorar a usabilidade do portal e torná-lo mais intuitivo?
Minha resposta foi: Uma biblioteca de estilos com componentes, diretrizes de design e referências para que se tornasse possível a padronização do portal corporativo.
Etapas do projeto
research; usabilidade; componentização; acessibilidade; Sync-up.
74 telas do portal
foram avaliadas
para entender o uso
de elementos e definir padronização + regras
dos componentes.
Durante a etapa de mapeamento e análise, eu fiz um levantamento de todas as principais telas do portal corporativo para avaliar os elementos visuais utilizados. Também comecei a estudar sobre UI Kits e Design Systems para entender como a biblioteca de estilos deveria ser.
Finalizadas as análises, eu defini quais elementos seriam definidos nessa primeira versão da biblioteca de estilos. A partir de então, as pesquisas e estudos passaram a ser sobre elementos específicos, a fim de apoiar a construção dos componentes e das regras de uso.
Definição de Guidelines
Componentes entregues
5 áreas da empresa começaram a utilizar o Material Design logo após seu lançamento e orientações
Após construído, o Material Design foi apresentado para as áreas da empresa e houve uma etapa dedicada a instruir as pessoas quanto a sua importância e aplicação. Para tal, foram desenvolvidos materiais que explicavam sobre as diretrizes, boas práticas de design e regras de uso para cada componente.
5 dentre os portais internos aderiram ao Material Design logo que este foi apresentado, iniciando o processo de substituição de elementos antigos pelos padronizados, de forma que foi constatado uma otimização do trabalho de desenvolvimento das páginas do portal corporativo.
Aplicação de componentes
Retrospectiva
Aprendizados
Design system e acessibilidade
Eu aprendi os princípios de Design System e a pensar mais sistemicamente, integrando design, acessibilidade e escalabilidade para criar componentes funcionais e adaptáveis.
próximos passos
Evolução para Design system
A minha ideia era que esse material design evoluísse até se transformar em um Design System completo. Então, eu esperava acompanhar de perto a aceitação e implementação do projeto para que, aos poucos, eu trabalhasse nessa evolução.
Dificuldades
Baixa maturidade de design
Devido a total liberdade para várias pessoas criarem suas páginas, tive dificuldade para encontrar apoio para a implementação do material design. A solução para isso foi fazer reuniões de alinhamento com as equipes e apresentar a proposta, incluindo o processo de construção, benefícios para o portal e os resultados estimados.
Reflexão sincera
Colaboração entre diferentes áreas internas seria melhor para o projeto
Olhando por uma nova perspectiva, o processo de construção do material design poderia ter sido menos unilateral, incluindo desde o início pessoas de outras áreas e não apenas de uma equipe, embora fosse multidisciplinar.
Aprendizados
Design system e acessibilidade
Eu aprendi os princípios de Design System e a pensar mais sistemicamente, integrando design, acessibilidade e escalabilidade para criar componentes funcionais e adaptáveis.
próximos passos
Evolução para Design system
A minha ideia era que esse material design evoluísse até se transformar em um Design System completo. Então, eu esperava acompanhar de perto a aceitação e implementação do projeto para que, aos poucos, eu trabalhasse nessa evolução.
Dificuldades
Baixa maturidade de design
Devido a total liberdade para várias pessoas criarem suas páginas, tive dificuldade para encontrar apoio para a implementação do material design. A solução para isso foi fazer reuniões de alinhamento com as equipes e apresentar a proposta, incluindo o processo de construção, benefícios para o portal e os resultados estimados.
Reflexão sincera
Colaboração entre diferentes áreas internas seria melhor para o projeto
Olhando por uma nova perspectiva, o processo de construção do material design poderia ter sido menos unilateral, incluindo desde o início pessoas de outras áreas e não apenas de uma equipe, embora fosse multidisciplinar.
Aprendizados
Design system e acessibilidade
Eu aprendi os princípios de Design System e a pensar mais sistemicamente, integrando design, acessibilidade e escalabilidade para criar componentes funcionais e adaptáveis.
próximos passos
Evolução para Design system
A minha ideia era que esse material design evoluísse até se transformar em um Design System completo. Então, eu esperava acompanhar de perto a aceitação e implementação do projeto para que, aos poucos, eu trabalhasse nessa evolução.
Dificuldades
Baixa maturidade de design
Devido a total liberdade para várias pessoas criarem suas páginas, tive dificuldade para encontrar apoio para a implementação do material design. A solução para isso foi fazer reuniões de alinhamento com as equipes e apresentar a proposta, incluindo o processo de construção, benefícios para o portal e os resultados estimados.
Reflexão sincera
Colaboração entre diferentes áreas internas seria melhor para o projeto
Olhando por uma nova perspectiva, o processo de construção do material design poderia ter sido menos unilateral, incluindo desde o início pessoas de outras áreas e não apenas de uma equipe, embora fosse multidisciplinar.
Aprendizados
Design system e acessibilidade
Eu aprendi os princípios de Design System e a pensar mais sistemicamente, integrando design, acessibilidade e escalabilidade para criar componentes funcionais e adaptáveis.
próximos passos
Evolução para Design system
A minha ideia era que esse material design evoluísse até se transformar em um Design System completo. Então, eu esperava acompanhar de perto a aceitação e implementação do projeto para que, aos poucos, eu trabalhasse nessa evolução.
Dificuldades
Baixa maturidade de design
Devido a total liberdade para várias pessoas criarem suas páginas, tive dificuldade para encontrar apoio para a implementação do material design. A solução para isso foi fazer reuniões de alinhamento com as equipes e apresentar a proposta, incluindo o processo de construção, benefícios para o portal e os resultados estimados.
Reflexão sincera
Colaboração entre diferentes áreas internas seria melhor para o projeto
Olhando por uma nova perspectiva, o processo de construção do material design poderia ter sido menos unilateral, incluindo desde o início pessoas de outras áreas e não apenas de uma equipe, embora fosse multidisciplinar.
ei, Obrigada
Fico feliz por você conferir meu trabalho.
Se tiver dúvidas ou quiser conversar, me mande uma mensagem ou e-mail e conecte-se pelo LinkedIn.