STUDIO STTARK

DELIV

LINK DO PRODUTO ATUAL

PROJETO

UX RESEARCH / UX / DESIGN

AGIL.FACEPE.BR

O objetivo do projeto deste produto é trabalhar na etapa de manutenção e evolução de um produto que funciona a cerca 20 anos e que necessita de reformulação em diversos aspectos (tecnologia, interface, experiencia do usuário, segurança, melhoria de disponibilidade) e a equipe na qual estou alocado encontra-se efetuando esta migração.

O projeto conta com cerca de 18 módulos, todos com funcionalidades independentes e que necessitam de reestruturação do funcionamento e da mecânica de uso do produto. É nesta etapa que entra o profissional de Design! Para rever não só a nova interface mas todo o projeto de experência e mecânica de funcionamento do produto.

ETAPAS DO DESENVOLVIMENTO

TÉCNICAS / PRODUTOS / ARTEFATOS / MÉTODOS

search

DESCOBERTA

Entendimento do contexto e quais as reais necessidades dos usuários (Design Sprint).

supervised_user_circle

PERSONAS

Definição de públicos e necessidades específicas de cada um.

receipt

STORYTELLING

Contar de forma lúdica histórias das features do produto.

subject

PRESS RELEASE

Auxiliar o usuário a entender qual a utilidade daquela features.

view_quilt

DESIGN SYSTEM

Produzir artefatos que auxiliem os times de desenvolvimento e design.

view_module

STYLEGUIDE

Fragmento do Design System para consulta de times menores de desenvolvimento.

playlist_add_check

TECNOLOGIAS

AngularJS / TypeScript / HTML / CSS / Javascript.

wrap_text

FRONTEND

Escolha de Frameworks, tecnologias, arquitetura, paradigmas.

rotate_right

TESTES

Testes de Usabilidade, Teste de Usuário, Teste A/BA, Heatmap, Card Sorting.

DESCOBERTAS

Processo inicial de entendimento do produto e das necessidades dos usuários

search PESQUISAS

Entrevistas Estruturadas

Inicialmente, era necessário identidicar os usuários e quais eram as suas reais necessidades de produto, para isso, foram elaborados questionários estruturados para identificar o perfil de cada um destes usuários.

Baseado em informações previamente levantadas no processo de análise, foram elaborados questionários para cada tipo de público.

A partir dos dados obtidos em pesquisa, foram criadas as personas, storytellings foram escritas, future press releases, a construção da jornada de consumo e o mapa de empatia do produto.

Estes artefatos foram obtidos a partir de Design Sprint aplicado ao tempo de sprint do projeto para que os artefatos anteriores pudessem ser escritos.

supervised_user_circle PERSONAS

Proto Personas

Após obter informações relevantes sobre os públicos alvos do produto, hora de construir as personas nas quais iriam se basear as funcionalidades que serão desenvolvidas.

receipt STORYTELLING

Pixar Storytelling

Hora de contar em formato de história o que é a funcionalidade do produto na visão dos usuários mapeados.

subject PRESS RELEASE

Future Press Release

Uma declaração de futuro do que aquela funcionalidade possibilitará ao usuário após desenvolvida.

receipt MAPA DE EMPATIA

Colocando-se no lugar do usuário

Á partir de informações capturadas em contexto e entender o que de fato os usuários precisam, foi necessário ir a campo para poder levantar estas informações.

Baseado no que já tinha anteriormente mapeado sobre quais as atividades que o usuário executa, foram elecandas as falas, o que eles pensam, o que eles sentem.

O que os usuários deseja fazer, o que idealiza de solução para a realidade dele.

subject CUSTOMER JOURNEY

Mapeando o percurso de consumo do produto

Artefato utilizado para perceber em que momento o usuário começa a utilizar o produto para realizar suas rotinas administrativas.

Perceber o que ele experimenta durante essa jornada até chegar ao fim da realização de algum processo.

O que o faz dedicir realizar o processo todo pela ferramente a não por outra externa antes (Excel).

line_style PROTÓTIPOS

Wireframes / Alta Fidelidade

Depois de mapeadas as Personas, definidas as Storytellings e Future Press Release é o momento de prototipar, validar estes protótipos, ajustar para depois efetuar os testes e retormar o ciclo para cada micro-funcionalidade.

view_quilt DESIGN SYSTEM

Design System / Styleguide

Artefato elaborado e mantido com o objetivo de orientar as equipes de desenvolvimento junto aos artefatos de Design. A criação deste produto foi um marco importante para as equipes de desenvolvimento, pois ele tem o papel de um repositório de código com a identidade solida e aplicada ao projeto.

A elaboração deste artefato e de um artefato de código para que todas as equipes do projeto pudessem consultar este documento foi um marco importante da mudança de pensamento sobre o design.

Agora, a manutenção da consistência do código referente ao design / cores e elementos do produto estão orientados por um artefato centralizado e organizado.

O Style Guide de código foi criado para consulta e uma parte dele encontra-se logo abaixo (não encontra-se completo devido a não permissão de divulgação deste produto).

Veja a versão do Design System do projeto em PDF.

playlist_add_check TECNOLOGIAS

HTML / CSS / JAVASCRIPT / ANGULAR / TYPESCRIPT

Devido a minha vivência anterior com projetos de produto web, participei ativamente da escolha das tecnologias que seriam utilizadas em projeto e junto a equipe de Dev Frontend escolhemos as principais tecnologias e Frameworks do projeto.

A escolha das tecnologias foi baseada em testes anteriores com os frameworks com relação a limites de implementação, capacidades, suporte a API e bilbiotecas.

O uso de frameworks de mercado foi uma decisão extremamente acertada com relação ao uso de produtos sólidos e estáveis em funcionamento em outros produtos pelo mundo.

A escolha de framewoks como Bootstrap e Angular foi pensando na formação das equipes que no futuro teriam acesso ao código do produto e deveriam interagir com tecnologias já conhecidas.

rotate_right TESTES

Teste de Usabilidade / Teste A/B / Headmap

Para testar a implementação do produto, foram aplicados alguns testes que tem como objetivo aperfeiçoar a experiência do usuário com o produto. Também é nesta etapa de testes que são validadas hipóteses levantadas durante o desenvolviemnto, testadas e alteradas em caso de necessidade.

Os testes de usabilidade foram aplicados a um contexto de sala físico, onde a estrutura necessária para medir a satisfação e o atendimento dos requisitos do produto.

De acordo com o desenvolvimento de algum módulo da solução, novos testes eram aplicados para saber o nível de eficiência do produto de acordo com as expectativas dos usuários.

Os resultados dos primeiros testes devolveram feedbacks de mudanças em alguns fluxos, forma como o recurso entregava os resultados e como o usuário interagia com a solução e quais as reações e emoções dele.

PROBLEMAS ENFRENTADOS

Como foram contornados ou solucionados os problemas de aplicação de métodos de design a um contexto que não conhecia tais métodos?

highlight_off

CULTURA

Aplicar design em uma empresa de cultura diferente é um trabalho lento e gradual.

highlight_off

CONTEXTO

Dificuldade em explicitar a importância do design para outras camadas do produto.

highlight_off

EQUIPES

Fazer com que a equipe entenda que design não é só aparência.

highlight_off

LIDERANÇA

Mostrar o impacto das etapas de design aplicadas ao contexto.

highlight_off

GESTÃO DO PROJETO

Fazer com que o gestor entenda que design não é "perfumaria".

highlight_off

STEAKHOLDERS

Problemas com ego que dificultavam a fluidez das tarefas do projeto.

LIÇÕES APRENDIDAS

Caso tenha gostado de meus trabalhos e queria entrar em contato para prestação de algum serviço, converse comigo por um dos seguintes canais:

playlist_add_check

PESSOAS

Foi importante mostrar as pessoas a importância do design e como ele podia ajuda-los.

playlist_add_check

RESILIÊNCIA

Entender que em orgãos públicos, nem tudo é possível, mas se bem argumentado é facilitado.

playlist_add_check

TECNOLOGIAS

Aprendizado e troca de conhecimento com a camada de Frontend.

playlist_add_check

MEETUP

Fazer pequenos encontros sobre artefatos de design que são novos para todos os membros da equipe.

playlist_add_check

WORKSHOPS

Qualificar todo o time para o entendimento dos produtos de design em outras camadas (Front e Backend).

playlist_add_check

DOCUMENTAR

Documentar TUDO e criar artigos relacionados a temas trabalhados dentro do projeto.