EcoriOnline e Ecori App

Soluções Web e Mobile para integradores de Energia Solar

Cliente

Ecori Energia Solar

Ramo

Energia Solar

Services

UI Design, UX Design

Data

Março 2024

Contexto

A plataforma de vendas da Ecori apresentava desafios de usabilidade, como falta de padronização de design, cores e espaçamentos inadequados, além da ausência de um design system, tornando a experiência confusa. Além disso, foi identificada a necessidade de uma versão mobile, permitindo que técnicos criassem orçamentos diretamente na casa dos clientes, agilizando visitas e aprimorando a experiência com praticidade.

Minhas Contribuições

Como UX/ UI Designer, resolvi os problemas de design sem alterar significativamente a estrutura original, evitando causar estranheza aos usuários habituais, mas sem deixar de aplicar uma padronização visual, ajustando cores, tipografia e espaçamentos para criar uma interface mais coesa, intuitiva e que facilitasse a navegação e a criação de orçamentos. Projetei o design de interface do app mobile da plataforma, permitindo que os integradores façam orçamentos diretamente durante as visitas aos clientes. Dessa forma, flexbilizando o uso dos serviços, trazendo mais agilidade ao processo, proporcionando uma experiência mais prática e eficiente.

App Screen with open sidebar
App Screen with open sidebar
App Screen with open sidebar

Discovery

Iniciei o processo realizando reuniões detalhadas com os stakeholders, buscando alinhar expectativas e estabelecer uma visão clara para o projeto, que incluía tanto o aplicativo mobile quanto o redesign da plataforma. Foi essencial compreender os objetivos estratégicos da empresa e os desafios enfrentados. Essas discussões permitiram identificar as principais necessidades do negócio e dos usuários, além de alinhar a visão do projeto com a proposta de valor da empresa. Também aproveitei para mapear prioridades, como a agilidade no atendimento, a melhoria na experiência do usuário e a integração entre os canais de venda, criando uma base sólida para direcionar as etapas seguintes.

Planejamento

O processo de planejamento do aplicativo começou com a definição de uma estrutura clara e funcional. Para isso, foram realizadas análises detalhadas, a fim de identificar as principais necessidades e fluxos de interação, garantindo que as funcionalidades essenciais fossem facilmente acessíveis. Cada etapa foi mapeada com foco na organização e simplicidade, permitindo que o app oferecesse de forma prática as principais funções da plataforma web utilizadas pelos usuários. Em paralelo, o redesign da plataforma web foi planejado de forma alinhada ao aplicativo, criando uma experiência coesa entre os dois ambientes. Esse alinhamento garantiu que tanto o app quanto a plataforma web entregassem uma experiência unificada, com navegação fluida e estética consistente, refletindo as mesmas diretrizes de design e valores da marca.

Wireframes

Com os objetivos e a estrutura inicial bem definidos, avancei para a criação dos wireframes, uma etapa crucial para visualizar e organizar os fluxos de usuário de forma prática e eficiente. Para o redesign da plataforma, priorizei a manutenção da estrutura original, garantindo que os usuários habituados à interface não enfrentassem dificuldades ou estranheza com as mudanças. Já no caso do aplicativo, focado na entrega de um MVP ágil, optei por um design simples e funcional, que equilibrasse um visual agradável com a eficiência no desenvolvimento. Isso permitiu à equipe técnica implementar uma solução mais prática.

App Measure Weight Screen
App Measure Weight Screen
App Measure Weight Screen

UI Design

Após finalizar os wireframes, os traduzi em designs de UI, mantendo a identidade visual já existente da Ecori, mas realizando ajustes em elementos, como cores e ícones, para seguir boas práticas de UI. O objetivo foi criar uma interface que fosse funcional e visualmente agradável, oferecendo uma navegação fluida e eficiente, alinhada aos valores da marca e proporcionando uma base sólida para o desenvolvimento futuro do aplicativo.

WIreframe alta fidelidade
WIreframe alta fidelidade
WIreframe alta fidelidade

Próximos Passos

• Validação após o desenvolvimento. • Testes de usabilidade. • Adicionar funcionalidades de backoffice. • Atualização de design de interface.

Meus Aprendizados

• Aprendi a importância de realizar reuniões constantes com stakeholders para alinhar expectativas e objetivos do projeto. • Compreendi a relevância de mapear fluxos e necessidades antes de iniciar o design, garantindo soluções funcionais. • Compreendi que algumas vezes é necessário equilibrar inovação juntamente com a familiaridade dos usuários em interfaces já estabelecidas. • Percebi o valor de fazer ajustes contínuos, baseados em feedback e testes, para alcançar uma experiência ideal.

© Todos os direitos reservados | Lucas Souza 2024