en
About the projects
Alelo is one of the largest benefits companies in Brazil, and I worked as a designer in two distinct periods between 2020 and 2022:
• In the first, I was placed through a consulting firm.
• In the second, I worked as a freelancer through an agency.
• In the first, I was placed through a consulting firm.
• In the second, I worked as a freelancer through an agency.
In this context, I will present two specific projects:
1) UI Improvements, where, through heuristic analysis, I created a backlog of interface improvements to bring greater consistency to the product.
2) Design System, where I componentized all elements of the existing Design System at the time in Figma.
2) Design System, where I componentized all elements of the existing Design System at the time in Figma.
When was this done?
2020–2022
pt-br
Sobre os projetos
A Alelo é uma das maiores empresas de benefícios do Brasil e eu trabalhei como designer em dois momentos distintos entre 2020 e 2022:
• No primeiro, fui alocado por meio de uma consultoria.
• No segundo, atuei como freelancer por intermédio de uma empresa.
• No primeiro, fui alocado por meio de uma consultoria.
• No segundo, atuei como freelancer por intermédio de uma empresa.
Neste contexto, apresentarei dois projetos específicos:
1) Melhorias de UI, no qual, através de uma análise heurística, elaborei um backlog de melhorias de interface com o objetivo de proporcionar maior consistência ao produto.
2) Design System, onde componentizei no Figma todos os elementos do Design System vigente na época.
1) Melhorias de UI, no qual, através de uma análise heurística, elaborei um backlog de melhorias de interface com o objetivo de proporcionar maior consistência ao produto.
2) Design System, onde componentizei no Figma todos os elementos do Design System vigente na época.
Quando foi feito
2020–2022
en
UI improvements
As a product designer, I identified UI inconsistencies in the Meu Estabelecimento app through heuristic analysis. I seamlessly integrated proposed improvements into the squad's backlog, seizing opportunities in the somewhat neglected design upon joining the project.
Scenario
Meu Estabelecimento, utilized by merchants on Android and iOS, grappled with platform discrepancies due to a lack of maturity and the absence of a Design System.
Challenge
Overcoming the company's design immaturity and conveying to the team the significance of heuristic analysis in enhancing the user experience.
Objective
Ensure a consistent experience across Android and iOS. Executed a detailed heuristic analysis, proposing design and usability enhancements. Result: a clearer product vision and strategic planning for future improvements.
pt-br
Melhorias na UI do App
Como designer de produto, identifiquei inconsistências na interface do aplicativo Meu Estabelecimento por meio de uma análise heurística. Integrei as melhorias propostas ao backlog da squad ao notar oportunidades durante a análise do design, que estava negligenciado ao iniciar no projeto.
Cenário
O Meu Estabelecimento, usado por comerciantes em Android e iOS, enfrentava discrepâncias entre as plataformas devido à falta de maturidade e ausência de um Design System.
Desafio
Superar a falta de maturidade em design na empresa e comunicar à equipe a importância da análise heurística para aprimorar a experiência do usuário.
Objetivo
Garantir uma experiência consistente no Android e iOS. Conduzi uma análise heurística detalhada, propondo melhorias no design e usabilidade. Resultado: visão organizada do produto e planejamento de melhorias futuras.
en
Mapping
Developed a basic mapping of the app areas that didn't exist, providing a clearer overview and easing user navigation.
Heuristics
Conducted a heuristic analysis of the app based on 10 crucial usability points, swiftly identifying potential product improvements.
Presentation
Communicated the improvements to the Product Owner (PO) and developers, who were highly satisfied with the proposed changes. This positive feedback led to the creation of a backlog for the implementation of the improvements.
Design
Initiated the design process from the backlog, maintaining regular alignment with the PO and developers. Presented the proposed solutions, ensuring a consistent implementation of the improvements throughout the app.
pt-br
Mapeamento
Desenvolvi um mapeamento básico das áreas do aplicativo que não existia, proporcionando uma visão geral mais clara e facilitando a navegação do usuário.
Heurísticas
Conduzi uma análise heurística do aplicativo com base em 10 pontos cruciais de usabilidade, identificando rapidamente possíveis melhorias no produto.
Apresentação
Comuniquei as melhorias ao Product Owner (PO) e aos desenvolvedores, que se mostraram bastante satisfeitos com as mudanças propostas. Esse feedback positivo resultou na criação de um backlog para a implementação das melhorias.
Design
A partir do backlog, dei início ao processo de design, mantendo alinhamento constante com o PO e os desenvolvedores. Apresentei as soluções propostas, garantindo uma implementação consistente das melhorias em todo o aplicativo.
Splash screen
Both UIs were quite divergent from the client's new visual direction. Through alignments with the marketing team, I successfully adapted them for the web.
As duas interfaces estavam consideravelmente diferentes do novo visual do cliente. Após alinhamentos com a equipe de marketing, consegui ajustá-las para a web.
Onboarding
The onboarding flow was visually inconsistent, and the adaptation made much more sense.
O fluxo de onboarding era visualmente inconsistente, e a adaptação proporcionou maior coesão.
Navigation menu
The app menu also suffered from visual inconsistencies. With the new version, in addition to improved consistency, it brought a more serious tone to the product.
O menu do aplicativo também apresentava notáveis inconsistências visuais. Com a nova versão, além de mais consistência, conferi ao produto uma aura mais sólida.
Receipts
The receipts section is one of the most accessed areas of the app and was inconsistent even across operating systems.
A seção de recebimentos é uma das áreas mais visitadas do aplicativo e estava inconsistente, inclusive entre os sistemas operacionais.
en
Design System
A few months after concluding my work through a consulting agency, I was hired as a freelancer to rejoin Alelo, this time with a focus on building the foundation for the company's Design System alongside three other designers.
I actively contributed to creating components for the app, and that's what I'll delve into with more detail here.
Scenario
It was a swift project; the foundation for the components already existed but wasn't componentized within Figma.
Challenge
Organizing and producing within a short timeframe.
Objective
Deliver the best possible foundation for the Design System to evolve from our contribution.
pt-br
Design System
Alguns meses após encerrar minha colaboração por meio de uma consultoria, fui contratado como freelancer para retornar à Alelo, desta vez com foco na construção da base para o Design System da empresa, junto com mais três designers.
Trabalhei ativamente na criação dos componentes para o aplicativo, e é essa parte que explorarei com mais detalhes aqui.
Cenário
O projeto foi ágil; a base dos componentes já existia, mas não estava componentizada no Figma.
Desafio
Organizar e produzir dentro de um prazo reduzido.
Objetivo
Entregar a melhor base possível para que o Design System evoluísse a partir do nosso trabalho.
en
Mapping
We listed all the components that needed creation.
Organization
We set up a basic structure on Trello to maintain asynchronous control over the project.
Presentation
Hands-on, we produced components in separate files:
• Core
• Web
• App
• Web
• App
Testing
Conducted quick tests on the components to assess properties and nomenclature.
Deploy
After organizing and testing, we deployed all the libraries and concluded the project.
Mapeamento
Listamos todos os componentes que precisávamos criar.
Organização
Estabelecemos uma organização inicial no Trello para manter o controle assíncrono do projeto.
Mão na massa
Colocamos a mão na massa e criamos os componentes em arquivos separados:
• Core
• Web
• App
• Web
• App
Testes
Conduzimos alguns testes rápidos nos componentes para avaliar propriedades e nomenclaturas.
Deploy
Após organizar e testar os componentes, subimos todas as bibliotecas e concluímos o projeto.
en
Conclusion
Both projects had their nuances but, for the most part, proved to be highly positive experiences!
• UI improvements
I successfully bridged the gap between designers and developers, fostering more streamlined meetings and defining a standardized handoff process for the project. By presenting the heuristics to other project stakeholders, I could underscore the significance of design in terms of usability, providing a clearer understanding of industry best practices.
I successfully bridged the gap between designers and developers, fostering more streamlined meetings and defining a standardized handoff process for the project. By presenting the heuristics to other project stakeholders, I could underscore the significance of design in terms of usability, providing a clearer understanding of industry best practices.
• Design System
We successfully delivered a robust foundation for kickstarting the Design System. Despite not delving into every intricacy required for a comprehensive DS, we managed to provide a solid starting point. This effort not only paved the way for a deeper immersion but also facilitated a more practical and effectiveness-oriented approach in developing the Design System.
We successfully delivered a robust foundation for kickstarting the Design System. Despite not delving into every intricacy required for a comprehensive DS, we managed to provide a solid starting point. This effort not only paved the way for a deeper immersion but also facilitated a more practical and effectiveness-oriented approach in developing the Design System.
Thank you and until the next project! 👽✌🏻✨
Conclusão
Ambos os projetos apresentaram suas peculiaridades, mas, em sua maioria, foram extremamente positivos!
• Melhorias de UI
Consegui estreitar a colaboração entre designers e desenvolvedores, promovendo reuniões mais direcionadas e estabelecendo um padrão de handoff para o projeto. Ao compartilhar as heurísticas com os colegas envolvidos, pude destacar a importância do design em termos de usabilidade, oferecendo uma compreensão mais aprofundada das melhores práticas de mercado.
Consegui estreitar a colaboração entre designers e desenvolvedores, promovendo reuniões mais direcionadas e estabelecendo um padrão de handoff para o projeto. Ao compartilhar as heurísticas com os colegas envolvidos, pude destacar a importância do design em termos de usabilidade, oferecendo uma compreensão mais aprofundada das melhores práticas de mercado.
• Design System
Concluímos com êxito a entrega de um sólido material para dar início ao Design System. Embora não tenhamos explorado todos os aspectos em profundidade, conseguimos fornecer uma base consistente. Essa iniciativa não apenas abriu portas para uma imersão mais profunda, mas também possibilitou uma abordagem mais prática e orientada à eficácia no desenvolvimento do Design System.
Concluímos com êxito a entrega de um sólido material para dar início ao Design System. Embora não tenhamos explorado todos os aspectos em profundidade, conseguimos fornecer uma base consistente. Essa iniciativa não apenas abriu portas para uma imersão mais profunda, mas também possibilitou uma abordagem mais prática e orientada à eficácia no desenvolvimento do Design System.
Obrigado e até o próximo projeto! 👽✌🏻✨
