UI / UX designer
Visão geral do projeto:
O projeto "ZR Tecnologia" foi um site para a empresa "ZR", do Brasil, que tem como foco criar uma ponte entre empresas que não possuem um site para desenvolvedores de sites, permitindo que eles criem sites personalizados para as necessidades de seus negócios, o projeto foi concluído, mas infelizmente a empresa encerrou suas operações antes de colocar o site no ar.
Papel:
Designer de UX/UI
Tipo de projeto:
Website dedicado
Desafio do projeto:
Como designer de UX/UI, desempenhei um papel fundamental no desenvolvimento de uma plataforma de site amigável, projetada especificamente para empreendedores com conhecimento técnico limitado
Responsabilidades:
Minhas responsabilidades como único designer de UX/UI incluíam: criação de personas, desenvolvimento de arquitetura de informações, wireframing (baixa e alta fidelidade), design de UI e validação de design centrado no usuário por meio do alinhamento de personas e wireframes.
Conhecendo nossa persona principal
Persona e pontos de dor
Persona: Ricardo
Idade : 43
Educação : Alguns cursos superiores
Cidade natal : Orlando
Família : Esposa e 4 filhos
Ocupação : Empreendedor
Problema identificado: Empreendedores mais de idade com poucas habilidades digitais tem dificuldade de estabelecer uma presença digital efetiva ou forte por causa da complexidade da criação de um website
Metas:
Para alcançar o crescimento empresarial sem sacrificar as responsabilidades familiares ou enfrentar constantes conflitos de agenda
Frustrações:
Experimenta frustração quando confrontado com interfaces digitais complexas
Iniciando o design:
Apesar de uma pesquisa formal limitada sobre o usuário, empreguei um design centrado no usuário
Arquitetura da informação e wireframes de papel:
A Arquitetura da Informação inicial
No início, criei uma landing page com opções de site, mas o projeto tomou outro rumo depois
Opções de wireframes iniciais
Eu os fiz com base em layouts de sites que criei antes
Layout do Hero Banner
Este wireframe foi baseado em um modelo de site e foi o escolhido
Wireframe 3
Layout dos slides
Wireframe 4
Layout de camadas de bolo
Depois de algum trabalho, o primeiro wireframe digital ficou pronto
Wireframe digital apresentando variação de cartão A com contêineres.
Wireframe digital apresentando variação de carta B sem contêineres.
O wireframe digital com de variação A foi aprovado pelo cliente, então comecei a projetar... mas
Fase de projeto + Iterações
A fase de design deste projeto foi um pouco mais longa que os outros projetos, considerando que ele foi alterado diversas vezes, e que as alterações foram feitas após os mockups
A primeira variação
De acordo com o feedback, os cards ficaram confusos demais
Brinquei com o layout e as cores dos cartões, mas não consegui identificar o que era... então percebi que era o fundo.
Variações de estilo de carta rejeitada
Cartão descartado usado para teste de segundo plano
O estilo final do cartão
