A Algar Telecom é uma empresa do grupo Algar que atua no setor de Telecom e TI há mais de 60 anos com dois objetivos principais: manter um relacionamento próximo com os nossos clientes e oferecer serviços de alta qualidade.
A versão anterior do site foi criada em 2014 foi atualizada em 2018 quando a Ene Soluções assumiu a responsabilidade sobre o portal, junto com os times internos da Algar, e trouxe uma nova visão de estrutura.
Sistema de componentes
O portal possui uma estrutura consideravelmente complexa e composta por várias páginas e aplicações. Para otimizar os processos, decidimos implementar uma estrutura baseada em componentes.
Mas afinal, o que é um componente?
Basicamente, o componente é uma “peça” reutilizável, que pode ser facilmente substituída por outra coisa que implementa a mesma API, que pode ser implementada independentemente, e que encapsula um conjunto coerente de comportamentos e responsabilidade na estrutura. Ou seja, uma página é construída utilizando a junção de vários componentes.
Baseado nesse ponto de vista, é muito mais inteligente e ágil pensar na evolução dos componentes, do que em criar uma “nova página”.
Atomic Design
Atomic Design foi criado em 2013 por Brad Frost e se baseia na química para criar uma metodologia em que os componentes são aplicados ao design de interfaces. Ele divide os componentes em átomos, moléculas, organismos, templates e páginas.
Baseados nessa metodologia, foram criados os primeiros componentes. Nesse momento, definimos as cores, as fontes incluindo peso e tamanho, espaçamentos horizontais e verticais, e todos os elementos básicos “átomos” que poderiam compor uma molécula.
Moléculas
Por mais que pareça simples um componente, a responsividade faz com que eles sempre possuam uma certa complexidade.
Banner
Um dos componentes mais importantes, o banner, utilizado na home da maioria das páginas do portal, parece simples por se tratar de uma imagem, porém ele precisa atender uma série de requisitos.
- As imagens precisam ser “responsivas” ou seja, precisam ser pensadas para que sua leitura e visualização sejam preservadas independente da resolução do dispositivo do usuário.
- As promoções precisam estar atreladas ao banco de dados do CRM
- O portal identifica a localização do usuário e apresenta apenas os banners e ofertas destinadas àquele público específico.
- Ele funciona em sistema de carrossel com tempo pré determinado mas o usuário tem a opção de avançar ou pausar a qualquer momento.
Tem a opção de inserção de links para redirecionar o usuário.
Componente Insight
Outro componente muito utilizado, praticamente em todas as páginas, é o componente nomeado de Insight. Recebeu esse nome pela sua versatilidade de uso. Atualmente um dos componentes mais plásticos do portal.
Nele você tem a opção de inserir uma tag de título, um título, uma descrição, um CTA, texto legal, um link, uma imagem de background e uma imagem sobreposta ao background. Além disso, você pode definir se a imagem ou texto estarão no lado esquerdo ou direito do componente. Isso facilita a liberdade criativa na hora de utilizar esse componente em alguma pagina.
Para garantir que a imagem de background funcione corretamente, travamos a altura do componente em 650px no desktop, mas deixamos a altura adaptável no mobile.
Cards de oferta
Os cards de ofertas são os componentes mais importantes do portal pois são os responsáveis pelo índice de conversão. É no card que o usuário avalia as informações mais relevantes da oferta e consegue adquirir seu produto.
Todas essas informações vêm do banco de dados do CRM e por isso precisam atualizar de forma automática sempre que surgem novas ofertas.
Devido a quantidade variável de cards que podem ser apresentados, definimos que seria mais viável a apresentação em carrossel. Todos os cards de oferta direcionam o usuário para o checkout e por isso, pensamos de forma estratégica ao apresentar as informações dentro do card.
Construção das páginas
Agora que temos um sistema de moléculas e que juntas formam outros componentes, fica fácil construir uma página.
Depois de trabalhar o conteúdo e priorizar as informações, podemos visitar nosso banco de componentes e escolher os que mais fazem sentido para determinados tipos de informação.
Atualmente, a home do portal de varejo é composta por 8 componentes.
Conclusão
Com nossos profissionais alocados em diversos times dentro da Algar Telecom, aumentamos consideravelmente o nível de entregas relacionadas ao portal em todos os sentidos. Trazendo alguns pontos importantes como:
- Garantia de padronização do layout e funcionamento das páginas.
- Agilidade no processo de concepção e desenvolvimento.
- Estrutura dinâmica com liberdade criativa.
- Sempre em beta, ou seja, pode receber melhorias contínuas.
Com isso, concluímos que a evolução é sempre contínua se tratando de usabilidade e tecnologia. Quando se pensa dessa forma o produto final beneficia não só os clientes Algar, em termos de negócio, mas também, todos os StakeHolders envolvidos no processo em termos de operação, trazendo eficiência e dinamismo para melhorias e testes necessários para evolução do portal.
()