Jhone Dias

Material de divulgação do empreendimento YOU Botafogo

Descrição

Enquanto trabalhava na imobiliária Patrimóvel, criei o material a seguir para divulgação em mídias digitais referente a divulgação de um imóvel que estava sendo negociado pela imobiliária. O material tinha o intuito de atrair potenciais compradores para saber mais sobre o imóvel clicando na chamada, levando-os para o site da empresa.

Projeto de Desenvolvimento de Website para Pós-Graduação na Unigranrio

Descrição

Como UI Designer e Desenvolvedor Front-End, tive o privilégio de trabalhar no website para os cursos de pós-graduação na renomada instituição educacional, Unigranrio. Desde as fases iniciais de concepção até a entrega final, estive profundamente envolvido em todas as etapas do projeto.

Minha jornada começou com a elaboração das ideias de design, trabalhando meticulosamente em protótipos que capturavam a essência e os requisitos específicos da Unigranrio. Durante essa fase, concentrei-me em garantir uma experiência de usuário intuitiva e atraente, alinhada com a identidade visual da instituição.

Após a aprovação dos protótipos, mergulhei no desenvolvimento do site, utilizando minhas habilidades em HTML, CSS e JavaScript para transformar conceitos em realidade digital. Cada elemento foi cuidadosamente codificado para garantir a funcionalidade perfeita e a compatibilidade com diferentes dispositivos e navegadores.

Um dos aspectos do projeto foi a integração com uma API para fornecer informações atualizadas sobre os cursos de pós-graduação da Unigranrio. Através de um trabalho diligente, implementei essa funcionalidade, garantindo que os visitantes do site tivessem acesso rápido e preciso às informações relevantes.

Este projeto não apenas me desafiou profissionalmente, mas também me proporcionou uma experiência valiosa em colaboração e resolução de problemas.

Campanha de páscoa Modal S/A

Descrição

Nossa proposta visa engajar os colaboradores do banco Modal S/A na nobre causa da Páscoa através de uma campanha de doações. Criamos um material visualmente cativante, projetado para transmitir a mensagem de forma clara e impactante. Cada elemento foi cuidadosamente selecionado para garantir que a mensagem da campanha seja facilmente compreendida, incentivando a participação e solidariedade.

E-mail CDB Modalmais

Descrição

Este projeto envolveu a criação de um layout visualmente atrativo de email marketing direcionado para o pessoal interno da empresa. O objetivo era promover um novo produto bancário exclusivo para os funcionários, enfatizando conveniência, taxas competitivas e suporte personalizado. O design focou na comunicação clara dos principais recursos, mantendo a identidade da marca e profissionalismo.

Campanha para Conscientização sobre Segurança da Informação

Descrição

Neste projeto, desenvolvi uma campanha de email com o objetivo de promover a conscientização sobre segurança da informação. A campanha foi elaborada para envolver os destinatários e educá-los sobre a importância de proteger dados sensíveis e manter práticas digitais seguras. Através de visuais cativantes e mensagens concisas, os emails transmitiram conceitos-chave como gerenciamento de senhas, conscientização sobre phishing e a importância das atualizações de software. Ao incorporar elementos interativos e chamadas claras para ação, a campanha incentivou os destinatários a participarem ativamente na melhoria de sua própria postura de segurança cibernética.

Sites e Landing pages de disputas judiciais

Descrição

Desenvolvemos sites e landing pages em Webflow com o propósito de apresentar de forma organizada e estratégica a defesa de nossos clientes em casos judiciais. Devido à natureza sensível das informações envolvidas, essas páginas são protegidas por senha, garantindo a privacidade e segurança dos conteúdos. Até o momento da publicação deste portfólio, já havíamos lançado mais de 50 desses sites, cada um deles projetado minuciosamente para apoiar os casos legais de nossos clientes. Abaixo, você encontrará uma seleção de imagens que ilustram algumas dessas páginas de casos.

Dashboard Business Inteligence

Descrição

Neste projeto, tive o privilégio de participar de um empolgante trabalho que uniu a criação de interfaces de usuário intuitivas e tecnologias modernas. O desafio era claro: criar dashboards informativos personalizados para clientes, cada um com acesso seguro ao seu próprio painel de controle, onde eles poderiam acompanhar e analisar os dados essenciais relacionados aos seus pedidos de patentes.

Objetivo e Desafios

O objetivo deste projeto era fornecer aos clientes uma experiência única e rica em informações, permitindo-lhes acessar e entender rapidamente o status de seus pedidos de patentes e demais informações relevantes. Além disso, buscamos melhorar a eficiência e a transparência na gestão desses processos. Os desafios eram diversos, incluindo:

1. Personalização: Criar uma interface personalizada para cada cliente, refletindo suas necessidades e preferências específicas.
2. Segurança: Garantir que os dados fossem acessados de forma segura e restrita apenas aos clientes autorizados.
3. Intuitividade: Projetar uma interface de usuário intuitiva e amigável, de modo que mesmo clientes não familiarizados com a tecnologia pudessem usar o sistema facilmente.

Solução

Para enfrentar esses desafios, optamos por usar tecnologias modernas que proporcionassem flexibilidade e eficiência.

• HTML e CSS: Utilizamos HTML e CSS para criar interfaces de usuário visualmente atraentes e responsivas. A combinação de estrutura HTML bem organizada com estilização CSS refinada resultou em designs limpos e elegantes que atendiam às expectativas dos clientes.
• Vue.js: Com a capacidade de atualizar dados em tempo real e fornecer uma experiência de usuário reativa, o Vue.js permitiu que os clientes explorassem informações críticas de maneira ágil e eficaz.
• Power BI: Ferramenta utilizada pela equipe para criar os painéis e tratar os dados para criação dos relatórios.

Telas do projeto:

OBS: Por se tratar de um projeto com informações ultra sensíveis, as telas estão desfocadas para resguardar o sigilo dos clientes.

Plataforma de Landing Pages

Descrição

Neste abrangente projeto, desenvolvido no ambiente Microsoft 365, nosso principal objetivo era criar um espaço dedicado à construção de páginas altamente personalizadas, acessíveis exclusivamente aos clientes e interessados registrados, que fazem uso de credenciais de login e senha, sendo que todos os funcionários da empresa pudessem fazer login com seu SSO. O foco na experiência do usuário se reflete na interface de fácil utilização, tornando a navegação intuitiva e eficiente.

Um aspecto notável deste projeto foi a incorporação da linguagem Liquid, a qual foi essencial para a personalização das páginas e a criação de experiências altamente relevantes para cada cliente. Aprender e implementar essa nova linguagem foi um desafio pelo pouco tempo que tive para isso.

Em resumo, este projeto exemplifica minha capacidade de combinar os princípios de UX design com habilidades técnicas de desenvolvimento front-end, além de demonstrar uma capacidade de aprendizado ágil.

A seguir, um exemplo de página desenvolvida na plataforma. No momento do desenvolvimento desse portifólio, a plataforma contava com 14 hotsites desenvolvidos.

OBS: Por se tratar de páginas com informações confidenciais, os dados estão borrados para garantir a confidencialidade de algumas informações. Como a maior parte das páginas são formados por informações 100% confidenciais, não é possível trazer uma gama de exemplos.

App de Leis

Descrição

Este projeto se destacou por sua abordagem ágil e eficiente, motivada pela necessidade de entrega rápida.

Com um prazo acelerado, optamos por uma fase de pesquisa enxuta que nos permitiu agir com rapidez, obtendo insights valiosos.

Ao invés de percorrer tradicionalmente os estágios de prototipagem de baixa e alta fidelidade, fomos diretamente para a versão beta da aplicação. Esta abordagem nos permitiu testar, iterar e refinar a experiência do usuário em um ambiente real desde o início, economizando tempo e garantindo que a aplicação estivesse rapidamente disponível para nossos usuários.

No momento da criação deste portifólio, a aplicação encontrava-se em produção na versão 1.0

App de Vídeos

Descrição

Fase de Pesquisa e Descoberta

Iniciamos o projeto realizando uma pesquisa para compreender as necessidades e dores dos usuários. Essa etapa foi crucial para obter insights valiosos que moldaram o curso do projeto. Realizamos entrevistas e análise de concorrência para obter uma visão abrangente das demandas dos usuários.

Design Centrado no Usuário

Com base no feedback coletado na fase de pesquisa, demos início ao design centrado no usuário. Criei wireframes e protótipos de alta fidelidade para iterar rapidamente nas soluções, levando em consideração a experiência do usuário em todos os estágios e incorporando elementos de design modernos e eficazes, garantindo uma interface amigável e agradável.

Validação e Feedback Constante

Uma vez com os protótipos de alta fidelidade em mãos, conduzimos testes de usabilidade com os próprios usuários para garantir que a aplicação atendesse às suas expectativas. As iterações baseadas no feedback contínuo foram fundamentais para refinar a interface e melhorar a usabilidade.

Desenvolvimento da Versão Beta

Após a validação dos protótipos, a equipe de desenvolvimento entrou em ação para criar a versão beta da aplicação. Como desenvolvedor front-end, fui responsável por traduzir o design em código funcional. Utilizei tecnologias modernas e melhores práticas para garantir um desempenho sólido e uma experiência de usuário consistente.

Novos testes na versão Beta

Com a versão Beta em produção, iniciamos uma nova rodada de testes de usabilidade. Identificamos a necessidade de realizar modificações essenciais para simplificar ainda mais a aplicação e aprimorar significativamente os filtros de busca. Isso foi possível graças aos testes em produção, que nos forneceram insights valiosos e uma compreensão mais profunda das reais demandas dos usuários. Com base nesses resultados, implementamos melhorias para garantir que a aplicação oferecesse uma experiência ainda mais eficiente e intuitiva.

Resultados finais

No momento da criação desse portifólio a aplicação encontrava-se operando em produção na versão 1.0

Site para requisição de contratos

Descrição

No escritório Licks Attorneys, fui encarregado de desenvolver uma plataforma para que os clientes pudessem solicitar contratos ao escritório. Esta plataforma precisava ser projetada de forma a ser facilmente replicável para outros clientes. Para garantir uma solicitação eficiente, os contratos precisavam ser enviados por e-mail para destinatários específicos, além de serem enviados de volta ao solicitante como confirmação da solicitação.

Considerando que toda a estrutura do site da empresa estava hospedada no Webflow, era um requisito que essa nova página também fosse desenvolvida na mesma plataforma. Dado que havia diferentes tipos de contratos, cada um com campos específicos, optei por ampliar as funcionalidades do Webflow, utilizando o Zapier, uma ferramenta para automatização de processos, para gerenciar o envio de e-mails.

Para entender os requisitos e proporcionar a melhor experiência de usuário, iniciei um processo de pesquisa com todas as partes envolvidas. Com base nessas conversas, elaborei alguns wireframes para discutir com os usuários e obter feedback. Abaixo estão dois exemplos que ilustram essa etapa.

Após revisão de todas as telas e algumas rodadas de teste com os usuários, finalizei o produto que está atualmente em produção. Abaixo, apresento uma galeria de imagens que representam o projeto.

Telas em desktop

Telas em dispositivo móvel