Stefaninini Rrends (online magazine)

181 visualizações

Publicada em

Online version for the Paper magazine "Trends" (by Stefanini).

Publicada em: Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
181
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Stefaninini Rrends (online magazine)

  1. 1. TRENDS - Stefanini Personas, Cenário e User Journey Website - Revista Trends
  2. 2. Personas, Cenário e User Journey
  3. 3. João Carlos, CMO, 35 anos João Carlos é CMO em uma empresa multinacional na área de Bebidas. Com o desafio de criar novas experiências para os clientes, João tem buscado soluções de tecnologia para extrair dados e informações que posam contribuir para decisões estratégicas, as quais também irão influenciar decisões de negócios. Temas como Big Data e Analytics tem sido constantes nas estratégias da área de Marketing e Desenvolvimento de Negócios da empresa. Tem como objetivo ampliar a capacidade analítica da sua área, investindo em Analytics e integrando fontes de informação diferentes em busca dos melhores insights. Nesta busca de soluções mais focadas, João tem trabalhado muito próximo da equipe de TI da empresa que tem dado suporte neste sentido. Por mais que algumas boas revistas e publicações, nacionais e internacionais, tenham ajudado João a se manter informado sobre as principais tendências em Tecnologia que possam lhe ajudar em suas decisões estratégicas, sente que estas publicações são muito focadas em Marketing e Comunicação e ainda tratam os assuntos de forma superficial. João busca conteúdo que possam ajudá-lo a não só mantê-lo informado sobre as principais tendências em Tecnologia que possam lhe ajudar a tomar decisões estratégicas, mas também que o ajudem a demandar soluções da área de Tecnologia mais assertivamente. Pain Point Objetivo “Para se ter sucesso na era digital, você precisa estar totalmente sincronizado com o comportamento e preferências de seus clientes num ambiente em que tudo muda muito rapidamente. É necessário ser rápido e adaptável” “Para se ter sucesso na era digital, você precisa estar totalmente sincronizado com o comportamento e preferências de seus clientes num ambiente em que tudo muda muito rapidamente. É necessário ser rápido e adaptável”
  4. 4. Antônio Silva, CFO, 45 anos Antônio é CFO da maior rede de educação e ensino do país. Com foco em aumentar a performance da empresa, ele tem percebido que, diferente de alguns anos atrás, as decisões de Tecnologia tem sido feitas de maneira cada vez mais estratégica. Por conta disso, tem havido uma maior necessidade de uma participação mais atuante de sua área nas decisões estratégicas em relação à area de Tecnologia.Entende que está mais próximo das decisões que envolvem aquisição de soluções de tecnologia, desde a terceirização da plataforma de tecnologia com pessoas, máquinas e programas (ITO), passando pela terceirização de processos (BPO), até o desenvolvimento de aplicações e soluções em Meios Digitais para ganho de competitividade e geração de valor agregado. Antônio tem sido envolvido cada vez mais em decisões importantes e estratégicas da área de Tecnologia. Com o objetivo de mensurar e gerir informações de performance, ele sente a necessidade de estar mais informados sobre as diferentes soluções em Tecnologia do mercado e suas tendências para que possa ter também um papel mais assertivo na decisão e aprovação de aquisições tecnológicas da empresa. Para Antônio é importante entender não só as tendências, mas também as diferentes soluções oferecidas pelo mercado em termos de custos e relevância estratégica para que possa atuar de forma mais assertiva nas decisões da empresa para aquisição de serviços de TI. Pain Point Objetivo “Precisamos ter as informações corretas no momento certo e investir o esforço necessário para interpretá-las"
  5. 5. Carlos Almeida, CIO, 39 anos Com uma carreira de 25 anos, Carlos é CIO em uma das maiores empresas de varejo do país. ELe tem percebido que nos últimos anos, que sua área tem sido demandada por diferentes setores da empresa como a área de Finanças e a de Marketing. Cada vez mais parte do processo de decisão estraégica da empresa, Carlos tem dado suporte a estas áreas na implementação de soluções tecnológicas que ajudem a aumentar a eficiência operacional. Diferente de alguns anos atrás, Carlos tem sentido cada vez mais a importância em estar atualizado não somente em relação às tendências na área de Tecnologia, mas entender mais profundamente quais são as melhores e principais soluções tecnológicas que possam ser implementadas de forma eficiente. Carlos busca uma publicação que possa não só mantê-lo atualizado sobre as principis tendências de Tecnologia, mas também em diferentes áreas de Negócios. É importante que a publicação ofereça formas facilitadas de se cruzar, filtrar e buscar informações de uma maneira ágil e focada. Pain Point Objetivo "Estamos adotando uma abordagem em duas vertentes: em primeiro lugar, fazer o nosso processamento de transações mais eficiente possível, usando processos globais e serviços partilhados; e segundo, a formação de nossa equipe financeira a ser parceiros de negócios real, não apenas os analistas financeiros. "
  6. 6. Cenário Carlos acabou de sair de uma reunião de Diretoria em que foi demandado a buscar uma solução em Tencologia que seja uma uma ferramenta de apoio para decisões estratégica da área de Marketing e de Novos Negócios para aumentar a competitividade de mercado (serviços mais eficientes ou diferenciais em produtos). Eles terão uma nova reunião de tomada de decisão em 15 dias e Carlos precisa estar preparado para apresentar prós, contras e valor de investimento de cada uma das soluções. Além destas informações fundamentais para decidirem pela melhor plataforma, Carlos quer também ter a certeza de apresentar soluções que estejam alinhadas com as tendências de mercados.
  7. 7. User Journey Carlos participa de uma reunião estratégica sobre demanda de solução Tecnológica para a área de Marketing e Novos Negócios Busca de informações relevantes para poder decicir pela melhor decisão Acessa Portal Trends para saber de novas tendências do mercado Compila informações comparativas com apoio da equipe de Finanças e de Marketing Participa de reunião de apresentação das soluções para a demanda da área de Marketing Passa a consultar e ler o portal Trends frequentemente para se manter atualizado Acessa portal Institucional Stefanini para saber mais das Soluções Tecnológicas
  8. 8. Personas, Cenário e User JourneyBenchmarking (Card-based design)
  9. 9. No Benchmarking a seguir, buscamos inspirações para as seguintes soluções: • Destaques em cards dinâmicos (Wired, ofertas Fiat) • Menu fixo estilo filtro (ofertas VW): editorias e formatos (Wired) • Identificação de editoria por cores (Pravda) • Identificação de formatos por ícones (Linkedin) • Possibilidade de visualização por cards e por lista (Proxxima e Klout) • Internas com labels (rótulos) que funcionarão como filtros (Proxxima) Benchmarking
  10. 10. Destaques em cards dinâmicos • A ideia é ter os destaques da revista apresentados na home seguindo a tendência de design “cards-based”, assim como a usada pela wired.com • A publicidade aparece também em formato card misturado ao conteúdo editorial, aumentando as chances de ser visto e clicado, uma vez que o olhar do usuário tem a tendência de “escanear" o conteúdoevitando as posições “padrões” de publicidade (como banner no topo e na lateral direita)
  11. 11. Destaques em cards dinâmicos • A inspiração aqui é a navegação por filtro e não por menu, promovendo uma reorganização dinâmica do conteúdo (cards) assim como acontece no site ofertas.fiat.com.br (filtro por preço) e ofertas.renault.com.br . O usuário tem, assim, a possibilidade de ver conteúdo com mais de dois tipos de seleção (no nosso caso, “editorias" e "formatos". • Outro ponto interessante, assim como mencionado no slide anterior, é a possibilidade de destacar alguns dos cards, possivelmente com conteúdo especial ou Publicidade.
  12. 12. Destaques em cards dinâmicos • E por falar em menu, além da possibilidade de se selecionar mais de uma opção de editoria, que permitirá a reoganização dinâmica dos cards de conteúdo, como acontece no ofertas.vw.com.br , destaca-se também o menu da wired.com que apresenta uma navegação primária por editoria e uma secundária por formato, entre outros.
  13. 13. - “editoria” por cores e de “formatos" por ícones • O tema para Wordpress Pravda apresenta os cards identifica as editorias por cores. • Já um estudo de design em formato cards para o Linkedin utiliza ícones para identificar os diferentes formatos de conteúdo. Identificação Visual
  14. 14. - “editoria” por cores e de “formatos" por ícones • O tema para Wordpress Clippy vai além e identifica os formatos de mídia (artico, vídeo ,galeria de imagem, áudio etc) por ícone. Identificação Visual
  15. 15. Visualização em grid e em lista • A revista Proxxima (Meio e Mensagem) também optou pelo formato cards para o seu website e oferece a opção de visualizar o conteúdo por lista. • Outra boa apresentação de coteúdo por listas é o da plataforma Klout que integra os labels (tags) das editorias na chamada em lista.
  16. 16. Labels (tags) como filtro adicional • E por falar em labels (tags), há ainda a possibilidade de se utilizar labels (tags) para o cruzamento de conteúdo nas editorias. • O resultado dos labels, geralmente, aparecem em formato de lista, como em um resultado de busca
  17. 17. Além das inspirações vistas anteriormente, vale contemplar ainda os seguintes aspectos: • Conteúdo relacionado nas internas (Institucional) • Destaques também para: Veja versão mobile, Conheça o site Institucional • Rodapé: Institucional, Editoria, Contato, versão Mobile • Internas: Título, Data, SM share, Comentários Cards contemplam: • identificação visual por cor (editoria) • identificação visual por ícone (formatos) • media (quando aplicável) • título • labels (tags) • data • resumo Outros pontos
  18. 18. Wireframes Wireframes
  19. 19. –Johnny Appleseed Home - cards - default Canais de Mídias Sociais Editorias Formatos Visualização por “grid" e por "lista" Chamadas por cards Scroll infinito Outras chamadas, widgets etc Menu "Filtros"
  20. 20. Home - list - default Visualização por lista
  21. 21. Home - cards - selecionados Editorias e formatos selecionados
  22. 22. Interna - Tech - Artigo Chamadas para site Institucional Plugin de Mídias Sociais (floating) Comentários (expandíveis)
 + abertos
 - fechados Conteúdos relacionados Rodapé
  23. 23. Outros exemplos de card-based design Prototype
  24. 24. Outros exemplos de card-based design Site Responsivo (live)
  25. 25. Outros exemplos de card-based design ANEXO
 Mais exemplos de Card-based design
  26. 26. Paper Sketching
  27. 27. Documentation
  28. 28. Não logado Por default, o usuário encontrará a página com todo o conteúdo organizado por cards A coluna da direita apresentarão widgets e publicidade
  29. 29. Organizar por Pode-se selecionar a opção de organizar o conteúdo por grid ou, neste caso, por lista
  30. 30. Pode-se também optar-se pela s opções de se organizar o conteúdo por “todos”, “online” ou “revista”, este último exibirá todo o conteúdo replicado das revistas Organizar por
  31. 31. Organizar por Todo o conteúdo replicado das revistas serão exibidos por ordem cronológica a partir do mais recente. Haverá a sleção de se filtrar por edição.
  32. 32. Ao se clicar em uma das seleções, todo o conteúdo replicado daquela edição será exibido Edições das Revistas
  33. 33. Será possível selecionar mais de uma revista Edições das Revistas
  34. 34. Edições das Revistas Ao se clicar novamente na edição selecionada, o conteúdo daquela opção não será mais exibido
  35. 35. Edições das Revistas Assim como ao se clicar em “Todos”, será exibido novamente todo o conteúdo
  36. 36. Busca O usuário pode fazer uma busca em todo o conteúdo do site
  37. 37. Busca O texto buscado é destacado no texto onde foi encontrado O conteúdo também pode ser exibido/filtrado por tag
  38. 38. Busca por tag Ao se clicar na tag selecionada, é exibido novamente todo o conetúdo
  39. 39. Ao se selecionar uma das opções do menu, neste caso formato “video”, os cards são reorganizados e apenas exibidos os que apresentam formato “vídeo”, selecionado no menu. Menu-filtro
  40. 40. Menu-filtro
  41. 41. Exibição de vídeo Possibilidade de ver os próximos videos Ao se fechar o popup, é exibido a página anterior
  42. 42. Ao se clicar novamente na opção do menu selecionada, o mesmo é “desligado” e o conteúdo é reorganizado Menu-filtro
  43. 43. Organizar por Pode-se selecionar a opção de organizar o conteúdo por grid para voltar a organização original
  44. 44. Não logado Se o usuário não estiver logado, ao clicar em um conteúdo da Revista, lhe será pedido o login/ cadastro
  45. 45. Não logado Fazer login/ cadastro Pode-se também fechar o popup para se voltar para a página anterior.
  46. 46. Não logado Fazer login/ cadastro Ao clicar na edição da Revista à direita, se o usuário não estiver logado, ele será convidado a fazer login/ cadastro. Caso esteja logado, poderá clicar e ter ao o conteúdo filtrado por edição
  47. 47. Login/Cadastro O usuário já cadastrado poderá fazer login ou recuperar seu login ou senha, caso tenha esquecido Poderá também se cadastrar caso tenha o código recebido
  48. 48. Login/Cadastro Ou poderá recuperar seu código
  49. 49. Login/Cadastro Ou se cadastrar caso não tenha seja assinante Trends
  50. 50. Login/Cadastro Neste caso, o não-assinante, entrará para uma lista de leads que será analisado para a opção de recebimento da revista (assinante)
  51. 51. Logado Ao estar logado, é possível navegar pelas edições Logado, poderá acessar todo o conteúdo logado
  52. 52. Menu-filtro Menu funciona como filtro Categorias Formatos
  53. 53. Menu-filtro Ao selecionar uma das opções do menu, os cards de conteúdo são reorganizados/ filtrados e serão exibidos apenas o selecionado
  54. 54. Menu-filtro Ao selecionar outra opção do menu, os cards de conteúdo são reorganizados/ filtrados e serão exibidos apenas os selecionados
  55. 55. Menu-filtro Ao se clicar novamente na opção do menu que estava selecionada, o filtro para aquela opção é "desligado"
  56. 56. Menu-filtro Ao se selecionar novamente a opção “desligada”, os cards da opção selecionada são exibidos novamente
  57. 57. Menu-filtro Ao selecionar uma das opções do menu/ formatos, os cards de conteúdo são reorganizados/ filtrados e serão exibidos apenas o selecionado
  58. 58. Menu-filtro Poderá ser selecionado também mais de uma oção de formato
  59. 59. Menu-filtro E mais categorias…
  60. 60. Menu-filtro E mais formatos…
  61. 61. Menu-filtro E mais categorias… O usuário poderá clicar a qualquer momento para visualizar o conteúdo
  62. 62. Conteúdo O conteúdo abre em popup, que pode ser fechado a qualquer momento pelo usuárioO topo do conteúdo é fixo A barra de Mídias Sociais será exibido durante toda a rolagem do conteúdoO usuário poderá navegar também pelas opções de âncora, ao clicar na opção, o texto será rolado para o ponto correto O usuário poderá ver algumas imagens do conteúdo em formato carrossel
  63. 63. Exibição cards Ao fechar o pop up que exibe o conteúdo, o usuário volta a visualizar a navegação anterior
  64. 64. Detalhes de Navegação
  65. 65. Organizar por: Todos, Online, Revista
  66. 66. Organizar por: Todos, Online, Revista
  67. 67. Organizar por: Todos, Online, Revista Selecionar Revista
  68. 68. Organizar por: Todos, Online, Revista Selecionar Revista
  69. 69. Organizar por: Todos, Online, Revista Selecionar Revista
  70. 70. Organizar por: Grid, Lista
  71. 71. Organizar por: Grid, Lista
  72. 72. UXpressoCafe.com

×