Redesign e Migração para AWS - Website do Villarreal Supermercados


Imagem sobre portfolio

Sobre o Villarreal

O Villarreal Supermercados faz parte do Grupo Zaragoza e surgiu em 2003.
Possui atualmente 5 unidades, que estão bem localizadas nas cidades de São José dos Campos, Taubaté e Cruzeiro, na Região do Vale do Paraíba/SP. As lojas atendem a um público exigente por produtos e serviços diferenciados.

A rede possui um site institucional reestruturado em 2021 pela CloudDog e um e-commerce por outra empresa.

O Desafio

Reestruturar o layout do website do Villarreal, mantendo a sua identidade mas com uma proposta moderna que auxilie na divulgação da sua loja online (delivery). Além de propor um novo design, também tralhamos no desenvolvimento para uma alta performance e na migração da infraestrutura para Amazon Web Services, garantindo uma melhor navegação para os seus usuários e facilitando nas ações de marketing digital da empresa.

Por quê escolher a Amazon Web Services

Para projetar uma melhor estabilidade aos clientes do Villarreal, todo o conteúdo do website agora é servido através de serviços gerenciadas da AWS. Permitindo que a aplicação tenha um baixo custo de hospedagem e aumentando a disponibilidade, elasticidade e performance de navegação.

E também, foram utilizados outros serviços AWS, tais como:


- Amazon CloudFront: Para promover uma experiência de melhor performance para os usuários, por meio do armazenamento em cache, reduzindo o tempo de carga de conteúdos estáticos ou dinâmicos.

- Simple Storage Service (S3): Serviço de armazenamento infinito de objetos estáticos, utilizado para armazenar e servir através do CloudFront, conteúdos como HTML, CSS, JavaScript, Imagens e Documentos para o Website.

- Amazon API Gateway: Serviço gerenciado que administra as chamadas de API’s, através de requisições Rest/RestFull, ela atua como um endpoint seguro para fazer essas chamadas e retornar as respostas exibidas pela aplicação Web.

- AWS Lambda: Através do uso de Lambda é possível executar automaticamente códigos sem precisar que você provisione ou gerencie servidores. Basta escrever as funções que o código precisa executar e fazer upload para o Lambda.

- Amazon Dynamo DB: O Amazon DynamoDB é um banco de dados NoSQL para armazenar conteúdos de maneira elástica, de acordo com o tráfego do Website.

Arquitetura AWS

No diagrama abaixo é possível conferir o desenho macro da arquitetura após a implementação dos ajustes:

Arquitetura Spani-e-Villarreal

Os Benefícios

- Melhor tempo de carga do site como um todo;

- Maior velocidade de entrega de atualizações;

- Melhor posicionamento nos mecanismos de busca;

Apresentação do Redesign de Layout do Website

Com base nas informações do site antigo, reestruturamos o layout para se adequar a todos os dispositivos desde desktop, tablets e smartphones.

Funcionalidades

- Modal de Verificação de Lojas: aparece apenas no primeiro acesso, para identificar qual loja mais próxima o usuário quer ver as novidades.

- Google Search: sistema de busca que auxilia o usuário a procurar de forma mais rápida o que deseja encontrar no site.

- Push Notifications: permite ao usuário conferir as notícias do site em primeiro mão caso confirme a ativação em seu dispositivo.

- Geolocalização de Lojas: podendo ser visualizado de 2 modos (mapa ou lista), o usuário pode encontrar a sua loja mais próxima pela localização atual ou informando o endereço.

- Tabloide Digital: tabloides de ofertas com o mesmo layout do material impresso só que na versão digital, oferecendo mais praticidade para os usuários com opções de favorita oferta e ir para a loja delivery.

Novo Layout do Website do Villarreal

01-presentation
Apresentação do redesign do site do Villarreal.

03-design
O novo site foi desenvolvido para suportar todos os tipos de telas: desktop, tablet e mobile.

04-tabloide-digital-2
Aqui a nossa proposta de layout foi oferecer um tabloide dinâmico que além de bonito facilita a comunicação com os usuários. As ofertas são exibidas de acordo com a loja selecionada pelo usuário. O Tabloide digital se mantém com as mesmas características do impresso, sendo segmentado por categorias.

05-geolocalizacao-2
Opções de busca de lojas para a loja mais próxima ou por endereço informado. O novo layout oferece 2 tipos de resultados de busca (por lista ou por Google Maps). Nas informações da loja contém links para Ofertas, Como Chegar (rota pelo Google) e Telefone.

06-produtos
A loja tem produtos de importados de marca própria. Para destacar esses produtos, cada tipo de produto possui uma página com uma lista (totalmente gerenciável). Quando o usuário seleciona o produto, vai para uma página exclusiva com informações e opções para comprar pelo delivery e compartilhar o conteúdo nas redes sociais.

07-functions-2

01) Modal de Primeiro Acesso: No primeiro acesso do usuário no site, oferecemos um modal para que a loja mais próxima seja selecionada evitando equívocos para que o usuário veja as ofertas corretas da loja escolhida.

02) Push Notifications: Produto CloudDog: Disponibiliza alertas com novidades do site, caso o usuário permita.

03) Google Search: Produto CloudDog: Sistema de busca no site todo.

08-screens
Screens das páginas na versão mobile.

Tags

#aws #migracaoaws #cloudfront #elastic-beanstalk #cloudformation #rds #ec2 #load-balancer #auto-scaling #migracao #geolocalização #layout #design #redesigndesite #website #ofertas #tabloidedigital
Portfólio

Outros trabalhos

Confira os últimos trabalhos no nosso portfolio.

fale conosco

Queremos realizar os projetos da sua empresa!

Fale conosco e saiba como poderemos ajudar a sua empresa a reduzir custos na nuvem AWS

+ 55 11 95026-0071contato@clouddog.com.br
Icone de Whatsapp