05.07.2017 Views

ProcessoUXCIT-ComoProjetarExperienciaConsumidor

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Processo de UI/UX CI&T:<br />

como projetar a experiência do consumidor?<br />

Cléo Cardinale<br />

ux designer CI&T


INSPIRAÇÕES<br />

Design Centrado no<br />

Usuário<br />

Design<br />

Thinking<br />

Metodologia<br />

Ágil<br />

Mindset<br />

Lean<br />

fundamento em<br />

pesquisa<br />

soluções<br />

inovadoras<br />

processo ágil<br />

e escalável<br />

ciclos de validações<br />

e aprendizados


PREMISSAS<br />

SIMPLES O SUFICIENTE PARA APLICAÇÃO NOS DIFERENTES<br />

CONTEXTOS DE PROJETO E NÍVEIS DE PROFICIÊNCIA.<br />

ABRANGENTE O SUFICIENTE PARA DAR CONTA DAS MAIS<br />

DIFERENTES NECESSIDADES DOS CLIENTES.


PARA A DEFINIÇÃO DO TIPO DE PROCESSO A SER APLICADO,<br />

DEVE-SE CONSIDERAR:<br />

EXIGÊNCIAS DO NEGÓCIO DO CLIENTE (E DA CI&T)<br />

NECESSIDADE DOS USUÁRIOS FINAIS<br />

TECNOLOGIA MAIS ADEQUADA


QUEM PARTICIPA DA DEFINIÇÃO DO PROCESSO<br />

CLIENTE<br />

GP/SM<br />

CI&T<br />

ESTRATEGISTA<br />

NEGÓCIO<br />

ARQUITETO<br />

TECNOLOGIA


CICLO<br />

DE DESIGN


CICLO DE DESIGN<br />

A unidade básica do Processo de UI/UX da CI&T<br />

é o Ciclo de Design, que se baseia nos<br />

princípios do Design Thinking.


COMO FUNCIONA<br />

Ciclo de<br />

Design<br />

Sprint 0 Sprint 1 Sprint 2<br />

Sprint 3<br />

Spri<br />

unidade básica<br />

repetições conforme a necessidade do projeto


CICLO DE DESIGN<br />

UX<br />

UI<br />

01<br />

Inspiraçao<br />

02<br />

Ideação<br />

03<br />

Prototipação<br />

04<br />

Validação<br />

05 Execução


CICLO DE DESIGN ENTREGÁVEIS<br />

UX<br />

UI<br />

01<br />

Inspiraçao<br />

02<br />

Ideação<br />

03<br />

Prototipação<br />

04<br />

Validação<br />

05 Execução<br />

JORNADA DO USUÁRIO MOCKUP E FLUXOS PROTÓTIPOS FEEDBACK SOBRE A<br />

INTERFACE<br />

LAYOUTS E<br />

STYLEGUIDE


CICLO DE DESIGN ITERAÇÕES<br />

UX<br />

Aperfeiçoamento das interfaces não<br />

validadas.<br />

UI<br />

01<br />

Inspiraçao<br />

02<br />

Ideação<br />

03<br />

Prototipação<br />

04<br />

Validação<br />

05 Execução


CICLO DE DESIGN ITERAÇÕES<br />

UX<br />

UI<br />

01<br />

Inspiraçao<br />

02<br />

Ideação<br />

03<br />

Prototipação<br />

04<br />

Validação<br />

05 Execução<br />

Aprendizados retroalimentam o<br />

Ciclo de Design.


SUGESTÕES DE FERRAMENTAS


Esta lista de ferramentas é meramente indicativa,<br />

outras podem ser utilizadas desde que atendam aos<br />

objetivos propostos em cada fase.


SUGESTÃO DE FERRAMENTAS<br />

01<br />

Inspiraçao<br />

02<br />

Ideação<br />

03<br />

Prototipação<br />

04<br />

Validação<br />

05 Execução<br />

Benchmarks<br />

Análise Heurística<br />

Análise das tarefas<br />

Mapa do<br />

ecossistema<br />

Entrevistas<br />

Shadowing<br />

Teste de<br />

usabilidade<br />

Personas<br />

Mapa de<br />

empatia<br />

Moodboards<br />

Jornada do usuário<br />

Sitemap / App map<br />

Cenários e casos de<br />

uso<br />

Storyboards<br />

Fluxogramas<br />

Roadmap<br />

User flows<br />

Sketches / Mockups<br />

Storyboards<br />

Sketches /<br />

Mockups<br />

Sitemaps<br />

Wireframes<br />

Protótipos<br />

Testes de<br />

usabilidade<br />

Pesquisas quantitativa<br />

Pesquisas quantitativa<br />

Entrevistas;<br />

Controle de qualidade<br />

Recomendações<br />

Feedback sobre a interface<br />

Style guide<br />

Layout de interface<br />

Recorte de<br />

assets<br />

Concepção de<br />

interações<br />

Casos de uso<br />

Correções<br />

Controle de qualidade


OUTRAS FONTES<br />

uxdesign.cc/ux-methods-deliverables<br />

www.designkit.org/methods<br />

servicedesigntools.org<br />

www.ideo.com/work/method-cards<br />

projectofhow.com/methods<br />

toolbox.hyperisland.com/<br />

75toolsforcreativethinking.com<br />

www.methodkit.com/research-method-card<br />

servicedesigntoolkit.org<br />

www.allaboutux.org/all-methods


PROCESSO DE UX/UI<br />

NO DESENVOLVIMENTO AGILE


O Ciclo de Design é aplicado em cada sprint da metodologia Agile, numa<br />

adaptação do Lean UX.<br />

Assim, cada sprint tem seu próprio ciclo (Inspiração - Ideação - Prototipação<br />

- Validação - Execução) mas com os entregáveis específicos de cada sprint.<br />

Apenas a Inception e o Sprint de Release possuem Ciclos de Design<br />

adaptados às suas necessidades.


RESUMO DO PROCESSO DE UX<br />

Inception<br />

(com Sprint de Design) : entendimento e<br />

protótipo<br />

jornada e protótipo validado<br />

Inception<br />

(sem Sprint de Design) :<br />

entendimento<br />

Sprint 0<br />

planejamento e setup<br />

Sprint N<br />

desenvolvimento e testes<br />

Sprint de release<br />

evolução e suporte<br />

jornada do usuário e conceito<br />

macroestrutura: seções e navegação<br />

+ layouts do Sprint 1<br />

microestrutura: layouts validados<br />

entrega homologada<br />

Insumos do Ciclo de Design<br />

Etapas do Ciclo de Design<br />

Analytics<br />

Estratégia<br />

Pesquisa Inspiração Ideação Prototipação Validação Execução


INSUMOS POSSÍVEIS DO PROCESSO DE UX<br />

PROJETO<br />

ESTRATÉGIA<br />

ANALYTICS<br />

CO-CRIAÇÃO<br />

DESIGN<br />

Briefing<br />

Objetivos do negócio<br />

Backlog do projeto<br />

Tecnologia adotada<br />

Feedbacks<br />

Business canvas<br />

Proposta de valor<br />

Blueprint<br />

Análise de mercado<br />

Métricas<br />

KPIs e Testes A/B<br />

Recomendações<br />

Brainstorming<br />

Design Thinking<br />

Sessões de co-criação<br />

Sessões de priorização<br />

Sprint de Design<br />

Prototipação rápida<br />

Jornada do usuário<br />

Benchmark<br />

Análise Heurística<br />

Análise de tarefas<br />

Acessibilidade<br />

Mapa do ecossistema<br />

Moodboards<br />

Pesquisa qualitativa<br />

Pesquisa quantitativa<br />

Entrevistas<br />

Shadowing<br />

Mapa de empatia<br />

Testes de usabilidade<br />

Personas


ENTREGÁVEIS POSSÍVEIS DO PROCESSO DE UX<br />

01<br />

Inspiraçao<br />

02<br />

Ideação<br />

03<br />

Prototipação<br />

04<br />

Validação<br />

05 Execução<br />

Benchmarks<br />

Análise Heurística<br />

Análise das tarefas<br />

Mapa do<br />

ecossistema<br />

Entrevistas<br />

Shadowing<br />

Teste de<br />

usabilidade<br />

Personas<br />

Mapa de<br />

empatia<br />

Moodboards<br />

Jornada do usuário<br />

Sitemap / App map<br />

Cenários e casos de<br />

uso<br />

Storyboards<br />

Fluxogramas<br />

Roadmap<br />

User flows<br />

Sketches / Mockups<br />

Storyboards<br />

Sketches /<br />

Mockups<br />

Sitemaps<br />

Wireframes<br />

Protótipos<br />

Testes de<br />

usabilidade<br />

Pesquisas quantitativa<br />

Pesquisas quantitativa<br />

Entrevistas;<br />

Controle de qualidade<br />

Recomendações<br />

Feedback sobre a interface<br />

Style guide<br />

Layout de interface<br />

Recorte de<br />

assets<br />

Concepção de<br />

interações<br />

Casos de uso<br />

Correções<br />

Controle de qualidade


ATUAÇÃO DO DESIGNER NOS SPRINTS DE DESENVOLVIMENTO<br />

SPRINT N-1<br />

SPRINT N<br />

SPRINT N+1 SPRINT N+2<br />

Avalia e revisa<br />

o que foi feito<br />

no Sprint<br />

passado.<br />

Dá feedback e<br />

tira dúvidas<br />

sobre o design<br />

do Sprint atual.<br />

Projeta o<br />

próximo Sprint<br />

(layout e<br />

interações)<br />

Pesquisa<br />

(insumos),<br />

prototipa e<br />

valida o Sprint<br />

posterior.


VANTAGENS DO PROCESSO DE UX


Processo de<br />

UX CI&T<br />

Metodologias<br />

tradicionais<br />

Inovação<br />

do Design Thinking<br />

Assertividade<br />

do Design Centrado no Usuário<br />

Qualidade e<br />

Integração do time<br />

do Lean UX<br />

Agilidade e<br />

Escalabilidade<br />

do Agile<br />

Participação<br />

do cliente<br />

da Co-criação<br />

Intuição e modismos<br />

da Criação<br />

Hipóteses não validadas<br />

da Publicidade<br />

Esforços<br />

fragmentados<br />

da terceirização<br />

Trabalho<br />

em "waterfall"<br />

do desenvolvimento tradicional<br />

Problemas de<br />

comunicação<br />

da segmentação


THANK<br />

YOU FOR<br />

YOUR<br />

TIME!

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!