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


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.

Migração do Website DIA Supermercados para AWS

Geolocalizador e Horários da Ecourbis

Aplicativo do Dia

Desenvolvimento do website da Damebe Construtora

Geolocalizador Ecoss Ambiental

Website da Drogaleste

Website do Atacadão

Desenvolvimento do website da Lwart Soluções Ambientais

Migração da CDN do E-Commerce ETNA para Amazon CloudFront

Redesign e Migração do Website do Spani Atacadista para AWS

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 97329-9834contato@clouddog.com.br
Icone de Whatsapp