Make a List!

Apresentação

Este projeto é parte do curso de Desenvolvimento de Software Multiplataforma do 3º semestre da Faculdade de Tecnologia de Franca (Fatec). O projeto abrange as seguintes disciplinas:

Gestão Ágil de Projetos e Softwares: Aplicação de metodologias ágeis para o desenvolvimento do projeto.
Banco de Dados Não Relacional: Implementação do banco de dados MongoDB integração com back-end.
Desenvolvimento Web III: Criação da interface e desenvolvimento front-end e back-end da aplicação.
Interação Humano Computador: Consideração de usabilidade e experiência do usuário na interface.

Equipe

A equipe do projeto "Make a List!" é composta por membros do 3 semestre do curso de Desenvolvimento de Software Multiplataforma, cada um responsabilidades principais no projeto, mas também com participação geral de todos na tomada de decisões e no projeto de uma forma geral.

Eduarda Matos (team leader): Pesquisa de mercado, identidade visual, protótipo, testes de qualidade e usabilidade.
Gabriel Imenes: Auxílio nas documentações e no front-end.
Igor Achette: Front-end principal.
João Paulo Falcuci: Documentação detalhada, testes de qualidade e usabilidade.
Raul Araújo: Back-end da aplicação e banco de dados.

Briefing

Plano de ação 5W1H

What? - Qual o problema identificado?

Falta de uma solução digital eficiente na organização e compartilhamento de listas de compras entre usuários e/ou grupos de usuários.

Where? - Onde o problema identificado?

Grupos familiares, pessoas que dividem a mesma residência, amigos ou colegas de trabalho que frequentemente precisam coordenar suas compras.

When? - Quando o problema identificado?

Todos esses questionamentos não encontram uma solução eficiente nas aplicações de listas disponíveis no mercado atualmente.

Who? - Quem é afetado pelo problema?

Qualquer grupo de pessoas que compartilhem a responsabilidade pelas compras.

Pessoas que habitam a mesma residência (famílias, repúblicas, pensões)
Amigos que planejam eventos em conjunto.
Colegas de trabalho que organizam eventos em conjunto, etc.

How? - Como será solucionado o problema?

Quando usuários compartilham a responsabilidade por uma mesma compra: saber quais itens precisam ser comprados, quais itens já foram comprados por outros usuários, qual o preço pago e a quantidade comprada? Todos esses questionamentos não encontram uma solução eficiente nas aplicações de listas disponíveis no mercado atualmente.

Why? - Por que o problema é relevante?

Para otimizar e facilitar situações que requerem o fácil compartilhamento de listas de compras entre os usuários.

Plano de ação 5W1H

Personas

Matriz CSD (Certezas, Suposições e Dúvidas)

Benchmark

Mapa de Jornada de Usuário

Rabiscoframe - 4-Corners

Wireframe - Fluxo Criação de Listas

Wireframe - Fluxo Criação de Grupos

Styleguide - Cores

Definimos as cores a partir das emoções que desejamos transmitir aos usuários.

Azul Árdósia
Inspiração
Criatividade
Estabilidade

Azul Céu
Amizade
Confiança
Tranquilidade

Alvacento
Equilíbrio
Elegância
Sofisticação

Styleguide - Tipografia

Fonte:

Kaushan Script

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789

Fonte: Raleway

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789

Styleguide - Logotipo

Para a composição do logotipo, utilizamos a fonte Kaushan Script pela sua caligrafia elegante remetendo coisas escritas à mão.

Styleguide - Logomarca

Para logomarca, mantivemos o primeiro e o último elemento do logotipo.

Identidade Visual - Moodboard

Protótipo

Avaliação Heurística - 10 Heurísticas de Nielsen

Front-end

Utilizamos bibliotecas e frameworks modernos e atualizados amplamente trabalhados no mercado.

Outras tecnologias: React-Hook-Form e React-icons (material design)

Além disso, o projeto foi idealizado para ser 100% responsivo, sendo capaz de ajustar-se a todos os tipos de telas, como smartphones, tablets e desktops.

Back-end

O servidor da aplicação foi desenvolvido utilizando a biblioteca Express, que torna capaz de usar o próprio javascript no server-side. Ele é responsável por processar todas as requisições e realizar as chamadas ao banco de dados, que foi desenvolvido utilizando o MongoDB.