O Nexum é um projeto que conecta prestadores de serviço e pessoas que precisam desses serviços no seu dia-a-dia. Com uma interface intuitiva, o site da Nexum permite a oferta e contratação de serviços em pouco tempo, e pode ser realizada até mesmo pelo smartphone. Nesse site, o usuário consegue:
- Oferecer seu serviço, indicando o nome, descrição, preço, formas de pagamento e o prazo em que a oferta vence;
- Navegar entre os serviços ofertados, filtrando por preço e por palavra chave
- Adicionar produtos ao carrinho, visualizando o total da compra
- Finalizar a compra, contratando um ou mais serviços.
https://nexum-labenu.surge.sh/
- Geisy Lopes
- Lucas Homero Sabino
- Leonardo Souza Gomes
- Murilo Terenciani
- Sarah Romanhol Falconiere
https://coolors.co/ff9933-000000-ffffff-727d71-f5f6fa
WireFrame-Maryam-10.drawio (1).pdf
A estilização do site, montada no wireframe, foi pensada de forma que as informações fossem dispostas da forma mais objetiva possível. Sendo assim:
- na Home o usuário se depara com as duas opções ofertadas pelo site, a de cadastro do serviço e a de contratação do serviço. De lá, o usuário é redirecionado para a página de cadastro ou para a de serviços, dependendo do botão que clicar. Optamos por dispor essas opções uma ao lado da outra, e as deixamos como a única informação da Home, para que não ficasse um site carregado de informações que podem confundir o usuário.
- o Header foi disposto com um conceito simples, contendo somente os botões de Home e Carrinho, além da logo e do nome da empresa. Escolhemos fazer esse item do site com a cor preta, de forma a destacar essa parte. Assim, os outros componentes do site foram estilizados com cores mais amenas, porém bem marcantes, misturando o laranja e o branco.
- A página de cadastro permite ao usuário passar informações básicas do seu serviço. Escolhemos indicar qual informação deverá ser passada em cada quadro por meio do placeholder, ao invés de colocar a palavra acima da caixinha. Dessa forma, a interface fica mais limpa. Além disso, as opções de pagamento foram dispostas em uma lista com "checks", para que o usuário marque as opções de papagento aceitas de uma forma mais simples.
- Na página de serviços, o usuário consegue filtrar os serviços por valor mínimo e máximo e fazer uma busca de palavra chave. Além disso, é possível ordenar a disposição dos serviços de forma crescente ou decrescente em relação a preço, prazo e nome (ordem alfabetica). Escolhemos deixar os filtros em uma coluna na lateral esquerda, como é o padrão em diversos sites similares. A opção para ordenar os serviços ficou acima dos cards, bem como a opção de buscar palavra.
- Em cada card de serviço, o usuário pode clicar no botão para adicionar o serviço ao carrinho ou visualizar detalhes do serviço.
- A página de detalhes do serviço mostra todas as informações daquele serviço, caso o usuário tenha interesse em saber das formas de pagamento e da descrição.
- A página do carrinho dispõe a lista de produtos/serviços selecionados do lado esquerdo da tela e um card com a soma dos produtos e o botão de finalizar a compra do lado direito. Escolhemos fazer dessa forma para seguir um padrão que ocorre na maioria dos e-commerces, tornando o site intuitivo para primeiros usuários.
