Projeto
Adorie
A Adorie é um marketplace focado em entregas rápidas e compras locais na região de Campinas, SP. Fiz parte do time de design como Estagiária de UX/UI design.
Durante os 4 meses que passei na empresa, desenvolvi um design system e realizei um redesign resposivo de toda a plataforma.
Ano
Duração
Ferramenta(s)
1.
Analisando a plataforma atual
Quando entrei para a equipe, a plataforma ainda estava na fase de MVP, então sua UI era provisória e ainda não estava completamente desenvolvida.
Junto da equipe de UX/UI design, identifiquei os principais problemas da interface naquele momento, como o não alinhamento com a visão da marca e o não cumprimento de boas práticas de hierarquia e design visual.
![](https://assets-global.website-files.com/6409f078fe01ed98545cc75b/641b5bda43c66d2a9a81c804_6414cd2dc3b6491574cb6417_Frame%25205346%2520(8).png)
2.
Desenvolvendo um Design system
Um dos principais problemas identificados na etapa anterior foi a falta de consistência dos componentes básicos e tokens de design da interface. Dessa forma, houve a necessidade de realizar um design system que pudesse garantir a coesão das telas e facilitar a realização de mudanças visuais. As interações dos componentes foram previstas e documentadas no arquivo do Figma junto do handoff para os desenvolvedores.
Durante esse processo, todos os elementos da interface foram repensados e reprojetados para representar melhor a marca e tornar a interface mais limpa e moderna.
![](https://assets-global.website-files.com/6409f078fe01ed98545cc75b/641b5bda80801c24c255a425_641b573127b5265a5b23426d_Frame%2520867.png)
3.
Reprojetando a interface
Com os átomos e moléculas do design system prontos, o próximo passo foi aplicá-los nas telas. Além disso, durante o processo de reformulação das telas antigas, foram adicionadas nelas novas funcionalidades essenciais para a plataforma, como uma seção de categorias para a tela de Início e um filtro para os produtos de uma loja.
![](https://assets-global.website-files.com/6409f078fe01ed98545cc75b/641b5bdae39e4a37d52c727d_641b5816b2396aba5a365e7f_Frame%25205347.png)
4.
Adaptando para web
Finalmente, os componentes do aplicativo foram aptados para o acesso em computadores. Nesse quesito, o design system foi essencial para facilitar o processo de desenho de telas, garantir a consistência entre os dois ambientes e permitir a reutilização do código.
![](https://assets-global.website-files.com/6409f078fe01ed98545cc75b/641b5bda8522ed2b0f3ddc53_641b593d80801cda5255745d_Frame%25205348%2520(1).png)