A Amuletta é uma aplicação web responsiva de e-commerce para uma marca (fictícia) de acessórios femininos. Pelo celular ou pelo computador, a cliente navega pelo catálogo, encontra as peças que procura, guarda favoritas, monta a sacola e finaliza a compra.
Pessoa que procura acessórios (colares, brincos, anéis, pulseiras, bolsas e acessórios de cabelo) para uso próprio ou para presentear. Usa todas as funções: navega, busca, filtra, favorita, compra e se cadastra na newsletter. Não precisa criar conta para comprar.
Recebe os pedidos finalizados (número, itens, total, forma de pagamento e endereço de entrega) e a lista de e-mails da newsletter, usada para divulgar lançamentos e promoções.
O aplicativo tem oito funções principais. A tabela resume para que serve cada uma, quem usa, o resultado esperado e como esse resultado aparece na tela.
| Função | Para que serve | Usuário | Resultado esperado | Como é apresentado |
|---|---|---|---|---|
| 1. Catálogo de produtos | Mostrar as peças à venda | Cliente | Cliente conhece produtos e preços | Grade de cards com imagem, nome, preço e parcelamento |
| 2. Busca | Encontrar uma peça pelo nome | Cliente | Só os produtos que correspondem ao texto | Grade atualizada a cada letra e contador de resultados |
| 3. Filtro por categoria | Ver só um tipo de acessório | Cliente | Lista restrita à categoria escolhida | Botão da categoria destacado em vermelho e grade filtrada |
| 4. Ordenação | Organizar a lista por critério | Cliente | Produtos na ordem escolhida | Grade reorganizada |
| 5. Detalhes do produto | Ver informações completas de uma peça | Cliente | Cliente decide se compra | Janela sobreposta com imagem ampliada e descrição |
| 6. Favoritos | Guardar peças para ver depois | Cliente | Lista de peças salvas | Coração preenchido, número no ícone e painel lateral |
| 7. Sacola de compras | Reunir as peças que serão compradas | Cliente | Itens, quantidades e valores calculados | Painel lateral com lista, barra de frete grátis e resumo de valores |
| 8. Finalizar compra | Concluir o pedido | Cliente (e equipe da loja, que recebe o pedido) | Pedido registrado com número | Formulário e tela de confirmação com número do pedido |
| Extra: Newsletter | Cadastrar e-mail para receber novidades | Cliente (e equipe de marketing) | E-mail cadastrado | Aviso de confirmação na parte de baixo da tela |
Apresentar todos os produtos à venda de forma visual e organizada, para a cliente conhecer a coleção.
Cliente / visitante, logo ao abrir o site.
A cliente vê rapidamente quais peças existem, quanto custam e quais são novidades.
Grade de cards (4 colunas no computador e 2 no celular) com o contador "8 produtos" acima.
Encontrar uma peça específica sem precisar percorrer o catálogo inteiro.
Cliente que já sabe o que procura (ex.: "colar", "argola").
Só os produtos que correspondem à busca aparecem.
Grade atualizada na hora e contador de resultados ("2 produtos"). Se nada for encontrado, aparece a mensagem "Nenhum produto encontrado".
Mostrar só um tipo de acessório: Novidades, Colares, Brincos, Anéis, Pulseiras, Bolsas ou Cabelo.
Cliente que quer explorar um tipo de peça.
Lista restrita à categoria escolhida.
O botão da categoria ativa fica preenchido em vermelho, a grade é atualizada e o contador mostra quantos produtos existem nela.
Organizar os produtos pelo critério mais útil para a cliente.
Cliente comparando preços ou procurando lançamentos.
Produtos exibidos na ordem escolhida.
A grade é reorganizada na hora, mantendo filtro e busca ativos.
Dar todas as informações de uma peça antes da compra.
Cliente interessada em um produto.
A cliente tem informação suficiente para decidir se compra.
Janela sobreposta (modal) dividida em imagem e informações. No celular, ocupa a tela inteira.
Guardar peças de interesse para comparar ou comprar depois.
Cliente que ainda está decidindo.
Lista com as peças salvas pela cliente.
Coração preenchido em vermelho no produto, número de favoritos sobre o ícone do topo e painel lateral com a lista.
Reunir as peças que a cliente quer comprar e mostrar quanto vai pagar.
Cliente pronta para comprar.
Itens, quantidades e valores sempre corretos e atualizados.
Contador de itens sobre o ícone da sacola e painel lateral que se abre ao adicionar, com a lista. O painel traz uma barra de progresso que mostra quanto falta para o frete grátis e o resumo de valores (subtotal, frete e total).
Concluir o pedido com os dados de entrega e a forma de pagamento.
Cliente, que preenche o pedido. A equipe da loja recebe o pedido para separar e enviar.
Pedido registrado e identificado por um número (ex.: #AM-482913).
Tela de confirmação com ícone de sucesso, número do pedido, endereço de entrega, itens comprados, frete, forma de pagamento e total.
Cadastrar o e-mail da cliente para receber lançamentos, reposições e ofertas.
Cliente, que se cadastra. A equipe de marketing usa a lista de e-mails.
E-mail cadastrado na lista de novidades.
Aviso "Pronto! Você vai receber nossas novidades." na parte de baixo da tela, com o campo limpo.
Caminho típico da cliente, da página inicial até o pedido confirmado.
Capturas do aplicativo funcionando. Clique em qualquer tela para abri-la ao vivo.
Observação: este é um protótipo funcional. Os produtos, pedidos e cadastros são simulados no próprio navegador (não há servidor, banco de dados nem pagamento real). Numa versão de produção, essas funções seriam ligadas a um sistema de pedidos, a um meio de pagamento e a uma ferramenta de e-mail marketing.