SlideShare uma empresa Scribd logo
TRENDS - Stefanini
Personas, Cenário e User Journey
Website - Revista Trends
Personas, Cenário e User Journey
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”
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"
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. "
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.
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
Personas, Cenário e User JourneyBenchmarking
(Card-based design)
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
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)
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.
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.
- “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
- “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
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.
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
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
Wireframes
Wireframes
Online magazine wireframe (Lisandra Maioli))
–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"
Home - list - default
Visualização
por lista
Home - cards - selecionados
Editorias e formatos
selecionados
Interna - Tech - Artigo
Chamadas para
site Institucional
Plugin de Mídias
Sociais (floating)
Comentários
(expandíveis)

+ abertos

- fechados
Conteúdos
relacionados
Rodapé
Outros exemplos de
card-based design
Prototype
Online magazine wireframe (Lisandra Maioli))
Outros exemplos de
card-based design
Site Responsivo (live)
Online magazine wireframe (Lisandra Maioli))
Outros exemplos de
card-based design
ANEXO

Mais exemplos de Card-based design
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Paper Sketching
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Documentation
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
Organizar por
Pode-se
selecionar a
opção de
organizar o
conteúdo por grid
ou, neste caso,
por lista
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
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.
Ao se clicar em
uma das
seleções, todo o
conteúdo
replicado daquela
edição será
exibido
Edições
das Revistas
Será possível
selecionar mais
de uma revista
Edições
das Revistas
Edições
das Revistas
Ao se clicar
novamente na
edição
selecionada, o
conteúdo daquela
opção não será
mais exibido
Edições
das Revistas
Assim como ao se
clicar em “Todos”,
será exibido
novamente todo o
conteúdo
Busca
O usuário pode
fazer uma busca
em todo o
conteúdo do site
Busca
O texto buscado é
destacado no
texto onde foi
encontrado
O conteúdo
também pode ser
exibido/filtrado
por tag
Busca por tag
Ao se clicar na
tag selecionada, é
exibido
novamente todo o
conetúdo
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
Menu-filtro
Exibição
de vídeo
Possibilidade de
ver os próximos
videos
Ao se fechar o
popup, é exibido
a página anterior
Ao se clicar
novamente na
opção do menu
selecionada, o
mesmo é
“desligado” e o
conteúdo é
reorganizado
Menu-filtro
Organizar por
Pode-se
selecionar a
opção de
organizar o
conteúdo por grid
para voltar a
organização
original
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
Não logado
Fazer login/
cadastro
Pode-se
também fechar
o popup para
se voltar para
a página
anterior.
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
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
Login/Cadastro
Ou poderá
recuperar seu
código
Login/Cadastro
Ou se cadastrar
caso não tenha
seja assinante
Trends
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)
Logado
Ao estar logado, é
possível navegar
pelas edições
Logado, poderá
acessar todo o
conteúdo logado
Menu-filtro
Menu funciona
como filtro
Categorias
Formatos
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
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
Menu-filtro
Ao se clicar
novamente na
opção do menu
que estava
selecionada, o
filtro para aquela
opção é
"desligado"
Menu-filtro
Ao se selecionar
novamente a
opção
“desligada”, os
cards da opção
selecionada são
exibidos
novamente
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
Menu-filtro
Poderá ser
selecionado
também mais de
uma oção de
formato
Menu-filtro
E mais
categorias…
Menu-filtro
E mais formatos…
Menu-filtro
E mais
categorias…
O usuário poderá
clicar a qualquer
momento para
visualizar o
conteúdo
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
Exibição cards
Ao fechar o pop
up que exibe o
conteúdo, o
usuário volta a
visualizar a
navegação
anterior
Detalhes de
Navegação
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Online magazine wireframe (Lisandra Maioli))
Organizar por: Todos, Online, Revista
Organizar por: Todos, Online, Revista
Organizar por: Todos, Online, Revista
Selecionar Revista
Organizar por: Todos, Online, Revista
Selecionar Revista
Organizar por: Todos, Online, Revista
Selecionar Revista
Organizar por: Grid, Lista
Organizar por: Grid, Lista
UXpressoCafe.com

Mais conteúdo relacionado

Mais procurados

E-Book Tendências de Marketing DOM Strategy Partners 2010
 E-Book Tendências de Marketing DOM Strategy Partners 2010 E-Book Tendências de Marketing DOM Strategy Partners 2010
E-Book Tendências de Marketing DOM Strategy Partners 2010
DOM Strategy Partners
 
MBA paper_Guia de sobrevivência na turbulência do Marketing e das Marcas
MBA paper_Guia de sobrevivência na turbulência do Marketing e das Marcas MBA paper_Guia de sobrevivência na turbulência do Marketing e das Marcas
MBA paper_Guia de sobrevivência na turbulência do Marketing e das Marcas
Paola Campanari
 
Panorama geral - Midia I
Panorama geral - Midia IPanorama geral - Midia I
Panorama geral - Midia I
Mackenzie
 
FUNESO - Adm. de Marketing I - 12.08
FUNESO - Adm. de Marketing I - 12.08FUNESO - Adm. de Marketing I - 12.08
FUNESO - Adm. de Marketing I - 12.08
Elton Rodrigues
 
A UtilizaçãO De Marketing De Relacionamento
A UtilizaçãO De Marketing De RelacionamentoA UtilizaçãO De Marketing De Relacionamento
A UtilizaçãO De Marketing De Relacionamento
Jozelena Monteiro
 
Branding
BrandingBranding
Mercado de trabalho marketing e vendas- artigo
Mercado de trabalho   marketing e vendas- artigoMercado de trabalho   marketing e vendas- artigo
Mercado de trabalho marketing e vendas- artigo
Deborah Moreira
 
A Análise de um Mercado (a Relação Entre Pesquisa e Sistema de Informação)
A Análise de um Mercado (a Relação Entre Pesquisa e Sistema de Informação)A Análise de um Mercado (a Relação Entre Pesquisa e Sistema de Informação)
A Análise de um Mercado (a Relação Entre Pesquisa e Sistema de Informação)
PROFIGESTÃO - Profissionais em Gestão de Empresas e Pessoas
 
3 passos-para-monitoramento-e-analise-estrategica-de-redes-sociais
3 passos-para-monitoramento-e-analise-estrategica-de-redes-sociais3 passos-para-monitoramento-e-analise-estrategica-de-redes-sociais
3 passos-para-monitoramento-e-analise-estrategica-de-redes-sociais
Evandro Morgado
 
(Online) Branding
(Online) Branding(Online) Branding
(Online) Branding
Frederico Amorim
 
Gestão de marketing resumo
Gestão de marketing resumoGestão de marketing resumo
Gestão de marketing resumo
AntnioAbreuAgostinho
 
About Ink
About InkAbout Ink
About Ink
Ink
 
Template site
Template siteTemplate site
Template site
RuanOliveira
 
Template site
Template siteTemplate site
Template site
RuanOliveira
 
Template site
Template siteTemplate site
Template site
RuanOliveira
 
O MARKETING DIGITAL NAS EMPRESAS
O MARKETING DIGITAL NAS EMPRESASO MARKETING DIGITAL NAS EMPRESAS
O MARKETING DIGITAL NAS EMPRESAS
Rodrigo de Oliveira
 

Mais procurados (16)

E-Book Tendências de Marketing DOM Strategy Partners 2010
 E-Book Tendências de Marketing DOM Strategy Partners 2010 E-Book Tendências de Marketing DOM Strategy Partners 2010
E-Book Tendências de Marketing DOM Strategy Partners 2010
 
MBA paper_Guia de sobrevivência na turbulência do Marketing e das Marcas
MBA paper_Guia de sobrevivência na turbulência do Marketing e das Marcas MBA paper_Guia de sobrevivência na turbulência do Marketing e das Marcas
MBA paper_Guia de sobrevivência na turbulência do Marketing e das Marcas
 
Panorama geral - Midia I
Panorama geral - Midia IPanorama geral - Midia I
Panorama geral - Midia I
 
FUNESO - Adm. de Marketing I - 12.08
FUNESO - Adm. de Marketing I - 12.08FUNESO - Adm. de Marketing I - 12.08
FUNESO - Adm. de Marketing I - 12.08
 
A UtilizaçãO De Marketing De Relacionamento
A UtilizaçãO De Marketing De RelacionamentoA UtilizaçãO De Marketing De Relacionamento
A UtilizaçãO De Marketing De Relacionamento
 
Branding
BrandingBranding
Branding
 
Mercado de trabalho marketing e vendas- artigo
Mercado de trabalho   marketing e vendas- artigoMercado de trabalho   marketing e vendas- artigo
Mercado de trabalho marketing e vendas- artigo
 
A Análise de um Mercado (a Relação Entre Pesquisa e Sistema de Informação)
A Análise de um Mercado (a Relação Entre Pesquisa e Sistema de Informação)A Análise de um Mercado (a Relação Entre Pesquisa e Sistema de Informação)
A Análise de um Mercado (a Relação Entre Pesquisa e Sistema de Informação)
 
3 passos-para-monitoramento-e-analise-estrategica-de-redes-sociais
3 passos-para-monitoramento-e-analise-estrategica-de-redes-sociais3 passos-para-monitoramento-e-analise-estrategica-de-redes-sociais
3 passos-para-monitoramento-e-analise-estrategica-de-redes-sociais
 
(Online) Branding
(Online) Branding(Online) Branding
(Online) Branding
 
Gestão de marketing resumo
Gestão de marketing resumoGestão de marketing resumo
Gestão de marketing resumo
 
About Ink
About InkAbout Ink
About Ink
 
Template site
Template siteTemplate site
Template site
 
Template site
Template siteTemplate site
Template site
 
Template site
Template siteTemplate site
Template site
 
O MARKETING DIGITAL NAS EMPRESAS
O MARKETING DIGITAL NAS EMPRESASO MARKETING DIGITAL NAS EMPRESAS
O MARKETING DIGITAL NAS EMPRESAS
 

Semelhante a Online magazine wireframe (Lisandra Maioli))

[Chebante] Conceitos de Inteligência de Mercado e Branding
[Chebante] Conceitos de Inteligência de Mercado e Branding[Chebante] Conceitos de Inteligência de Mercado e Branding
[Chebante] Conceitos de Inteligência de Mercado e Branding
João Gabriel Chebante
 
ESTRATÉGIA E NEGÓCIOS PARA PRODUTOS DIGITAIS — PRODUTOS PARA HUMANOS.pdf
ESTRATÉGIA E NEGÓCIOS PARA PRODUTOS DIGITAIS — PRODUTOS PARA HUMANOS.pdfESTRATÉGIA E NEGÓCIOS PARA PRODUTOS DIGITAIS — PRODUTOS PARA HUMANOS.pdf
ESTRATÉGIA E NEGÓCIOS PARA PRODUTOS DIGITAIS — PRODUTOS PARA HUMANOS.pdf
Paulo Floriano
 
Apresentação institucional
Apresentação institucionalApresentação institucional
Apresentação institucional
Dani Yuri
 
Ok118 slids como planejar projeto logístico pelo modelo canvas
Ok118 slids  como planejar projeto logístico pelo modelo canvasOk118 slids  como planejar projeto logístico pelo modelo canvas
Ok118 slids como planejar projeto logístico pelo modelo canvas
delano chaves gurgel do amaral
 
Aula 03 empreendedorismo
Aula 03 empreendedorismoAula 03 empreendedorismo
Aula 03 empreendedorismo
Homero Alves de Lima
 
Como turbinar a expansão de franquias, por Erick Vils, fundador Solutto
Como turbinar a expansão de franquias, por Erick Vils, fundador SoluttoComo turbinar a expansão de franquias, por Erick Vils, fundador Solutto
Como turbinar a expansão de franquias, por Erick Vils, fundador Solutto
Erick Vils
 
Biz miz o1 m6_u6.2_r6_pt
Biz miz o1 m6_u6.2_r6_ptBiz miz o1 m6_u6.2_r6_pt
Biz miz o1 m6_u6.2_r6_pt
KATHLEENBULTEEL
 
Marketing e empreendedorismo digital
Marketing e empreendedorismo digitalMarketing e empreendedorismo digital
Marketing e empreendedorismo digital
Marcos Basilio
 
Indústrias e marcas: Como tornar seu site imbatível
Indústrias e marcas: Como tornar seu site imbatívelIndústrias e marcas: Como tornar seu site imbatível
Indústrias e marcas: Como tornar seu site imbatível
Arank
 
Guia de Boas Práticas Social Media
Guia de Boas Práticas Social MediaGuia de Boas Práticas Social Media
Guia de Boas Práticas Social Media
IAB Brasil
 
Apostila Marketing de Projetos
Apostila Marketing de ProjetosApostila Marketing de Projetos
Apostila Marketing de Projetos
Léo De Melo
 
Como você, CIO, gerencia a TI de sua empresa ?
Como você, CIO, gerencia a TI de sua empresa ?Como você, CIO, gerencia a TI de sua empresa ?
Como você, CIO, gerencia a TI de sua empresa ?
Mario Faria
 
Open Maker Industrial Challenge - Chamada Aberta
Open Maker Industrial Challenge - Chamada AbertaOpen Maker Industrial Challenge - Chamada Aberta
Open Maker Industrial Challenge - Chamada Aberta
Startadora Startups
 
Apostila plano de marketingmkt001.v1.2
Apostila plano de marketingmkt001.v1.2Apostila plano de marketingmkt001.v1.2
Apostila plano de marketingmkt001.v1.2
webone
 
Content Trends 2016: Tendências do Marketing de Conteúdo
Content Trends 2016: Tendências do Marketing de ConteúdoContent Trends 2016: Tendências do Marketing de Conteúdo
Content Trends 2016: Tendências do Marketing de Conteúdo
Rock Content
 
PT BR Guilherme Zanoni
PT BR Guilherme ZanoniPT BR Guilherme Zanoni
PT BR Guilherme Zanoni
Gui Zanoni
 
Guia boas praticas de social media
Guia boas praticas de social mediaGuia boas praticas de social media
Guia boas praticas de social media
Planno
 
Aula 8 - Planejamento Estratégico de Marketing Digital - Disciplina Planejame...
Aula 8 - Planejamento Estratégico de Marketing Digital - Disciplina Planejame...Aula 8 - Planejamento Estratégico de Marketing Digital - Disciplina Planejame...
Aula 8 - Planejamento Estratégico de Marketing Digital - Disciplina Planejame...
Pedro Cordier
 
Apresentação Metodologias Novo Marketing O Fim da Desgovernança DOM Strategy...
 Apresentação Metodologias Novo Marketing O Fim da Desgovernança DOM Strategy... Apresentação Metodologias Novo Marketing O Fim da Desgovernança DOM Strategy...
Apresentação Metodologias Novo Marketing O Fim da Desgovernança DOM Strategy...
DOM Strategy Partners
 
digitaliza ai | digi turbo
digitaliza ai | digi turbodigitaliza ai | digi turbo
digitaliza ai | digi turbo
João Teixeira de Carvalho
 

Semelhante a Online magazine wireframe (Lisandra Maioli)) (20)

[Chebante] Conceitos de Inteligência de Mercado e Branding
[Chebante] Conceitos de Inteligência de Mercado e Branding[Chebante] Conceitos de Inteligência de Mercado e Branding
[Chebante] Conceitos de Inteligência de Mercado e Branding
 
ESTRATÉGIA E NEGÓCIOS PARA PRODUTOS DIGITAIS — PRODUTOS PARA HUMANOS.pdf
ESTRATÉGIA E NEGÓCIOS PARA PRODUTOS DIGITAIS — PRODUTOS PARA HUMANOS.pdfESTRATÉGIA E NEGÓCIOS PARA PRODUTOS DIGITAIS — PRODUTOS PARA HUMANOS.pdf
ESTRATÉGIA E NEGÓCIOS PARA PRODUTOS DIGITAIS — PRODUTOS PARA HUMANOS.pdf
 
Apresentação institucional
Apresentação institucionalApresentação institucional
Apresentação institucional
 
Ok118 slids como planejar projeto logístico pelo modelo canvas
Ok118 slids  como planejar projeto logístico pelo modelo canvasOk118 slids  como planejar projeto logístico pelo modelo canvas
Ok118 slids como planejar projeto logístico pelo modelo canvas
 
Aula 03 empreendedorismo
Aula 03 empreendedorismoAula 03 empreendedorismo
Aula 03 empreendedorismo
 
Como turbinar a expansão de franquias, por Erick Vils, fundador Solutto
Como turbinar a expansão de franquias, por Erick Vils, fundador SoluttoComo turbinar a expansão de franquias, por Erick Vils, fundador Solutto
Como turbinar a expansão de franquias, por Erick Vils, fundador Solutto
 
Biz miz o1 m6_u6.2_r6_pt
Biz miz o1 m6_u6.2_r6_ptBiz miz o1 m6_u6.2_r6_pt
Biz miz o1 m6_u6.2_r6_pt
 
Marketing e empreendedorismo digital
Marketing e empreendedorismo digitalMarketing e empreendedorismo digital
Marketing e empreendedorismo digital
 
Indústrias e marcas: Como tornar seu site imbatível
Indústrias e marcas: Como tornar seu site imbatívelIndústrias e marcas: Como tornar seu site imbatível
Indústrias e marcas: Como tornar seu site imbatível
 
Guia de Boas Práticas Social Media
Guia de Boas Práticas Social MediaGuia de Boas Práticas Social Media
Guia de Boas Práticas Social Media
 
Apostila Marketing de Projetos
Apostila Marketing de ProjetosApostila Marketing de Projetos
Apostila Marketing de Projetos
 
Como você, CIO, gerencia a TI de sua empresa ?
Como você, CIO, gerencia a TI de sua empresa ?Como você, CIO, gerencia a TI de sua empresa ?
Como você, CIO, gerencia a TI de sua empresa ?
 
Open Maker Industrial Challenge - Chamada Aberta
Open Maker Industrial Challenge - Chamada AbertaOpen Maker Industrial Challenge - Chamada Aberta
Open Maker Industrial Challenge - Chamada Aberta
 
Apostila plano de marketingmkt001.v1.2
Apostila plano de marketingmkt001.v1.2Apostila plano de marketingmkt001.v1.2
Apostila plano de marketingmkt001.v1.2
 
Content Trends 2016: Tendências do Marketing de Conteúdo
Content Trends 2016: Tendências do Marketing de ConteúdoContent Trends 2016: Tendências do Marketing de Conteúdo
Content Trends 2016: Tendências do Marketing de Conteúdo
 
PT BR Guilherme Zanoni
PT BR Guilherme ZanoniPT BR Guilherme Zanoni
PT BR Guilherme Zanoni
 
Guia boas praticas de social media
Guia boas praticas de social mediaGuia boas praticas de social media
Guia boas praticas de social media
 
Aula 8 - Planejamento Estratégico de Marketing Digital - Disciplina Planejame...
Aula 8 - Planejamento Estratégico de Marketing Digital - Disciplina Planejame...Aula 8 - Planejamento Estratégico de Marketing Digital - Disciplina Planejame...
Aula 8 - Planejamento Estratégico de Marketing Digital - Disciplina Planejame...
 
Apresentação Metodologias Novo Marketing O Fim da Desgovernança DOM Strategy...
 Apresentação Metodologias Novo Marketing O Fim da Desgovernança DOM Strategy... Apresentação Metodologias Novo Marketing O Fim da Desgovernança DOM Strategy...
Apresentação Metodologias Novo Marketing O Fim da Desgovernança DOM Strategy...
 
digitaliza ai | digi turbo
digitaliza ai | digi turbodigitaliza ai | digi turbo
digitaliza ai | digi turbo
 

Mais de Lisandra Maioli

Hero's Journey para UX - EN (Lisandra Maioli).pptx
Hero's Journey para UX - EN (Lisandra Maioli).pptxHero's Journey para UX - EN (Lisandra Maioli).pptx
Hero's Journey para UX - EN (Lisandra Maioli).pptx
Lisandra Maioli
 
Hero's Journey para UX.pptx
Hero's Journey para UX.pptxHero's Journey para UX.pptx
Hero's Journey para UX.pptx
Lisandra Maioli
 
Don't let ux ui be a block_ embedding development on product design process _
 Don't let ux ui be a block_ embedding development on product design process _ Don't let ux ui be a block_ embedding development on product design process _
Don't let ux ui be a block_ embedding development on product design process _
Lisandra Maioli
 
UX Research by Lisandra Maioli
UX Research by Lisandra MaioliUX Research by Lisandra Maioli
UX Research by Lisandra Maioli
Lisandra Maioli
 
Intrax - Social Media Strategy
Intrax - Social Media StrategyIntrax - Social Media Strategy
Intrax - Social Media Strategy
Lisandra Maioli
 
UX e dicas práticas
UX e dicas práticasUX e dicas práticas
UX e dicas práticas
Lisandra Maioli
 
Diagnóstico para Mídias Sociais
Diagnóstico para Mídias SociaisDiagnóstico para Mídias Sociais
Diagnóstico para Mídias Sociais
Lisandra Maioli
 
Social Media Strategy (2013)
Social Media Strategy (2013)Social Media Strategy (2013)
Social Media Strategy (2013)
Lisandra Maioli
 
UX - Online Classify wireframe
UX - Online Classify wireframeUX - Online Classify wireframe
UX - Online Classify wireframe
Lisandra Maioli
 
Consumer Research
Consumer ResearchConsumer Research
Consumer Research
Lisandra Maioli
 
UX - Experiência do Usuário com foco em Alta Performance
UX - Experiência do Usuário com foco em Alta PerformanceUX - Experiência do Usuário com foco em Alta Performance
UX - Experiência do Usuário com foco em Alta Performance
Lisandra Maioli
 
New Website Architecture (by Lisandra Maioli)
New Website Architecture (by Lisandra Maioli)New Website Architecture (by Lisandra Maioli)
New Website Architecture (by Lisandra Maioli)
Lisandra Maioli
 
Gestão de Conteudo para Midias Sociais
Gestão de Conteudo para Midias SociaisGestão de Conteudo para Midias Sociais
Gestão de Conteudo para Midias Sociais
Lisandra Maioli
 
UX App Design - MeuCarroNovo App
UX App Design - MeuCarroNovo AppUX App Design - MeuCarroNovo App
UX App Design - MeuCarroNovo App
Lisandra Maioli
 
UX Project for LACMA Online Store
UX Project for LACMA Online StoreUX Project for LACMA Online Store
UX Project for LACMA Online Store
Lisandra Maioli
 
James Bond App
James Bond AppJames Bond App
James Bond App
Lisandra Maioli
 
Who is who in UX: Alan Cooper
Who is who in UX: Alan CooperWho is who in UX: Alan Cooper
Who is who in UX: Alan Cooper
Lisandra Maioli
 
GoPro - UCLA project
GoPro - UCLA projectGoPro - UCLA project
GoPro - UCLA project
Lisandra Maioli
 
Talenthouse - Ad Campaign
Talenthouse - Ad CampaignTalenthouse - Ad Campaign
Talenthouse - Ad Campaign
Lisandra Maioli
 
UX Design - Talenthouse Redesign (UCLA)
UX Design - Talenthouse Redesign (UCLA)UX Design - Talenthouse Redesign (UCLA)
UX Design - Talenthouse Redesign (UCLA)
Lisandra Maioli
 

Mais de Lisandra Maioli (20)

Hero's Journey para UX - EN (Lisandra Maioli).pptx
Hero's Journey para UX - EN (Lisandra Maioli).pptxHero's Journey para UX - EN (Lisandra Maioli).pptx
Hero's Journey para UX - EN (Lisandra Maioli).pptx
 
Hero's Journey para UX.pptx
Hero's Journey para UX.pptxHero's Journey para UX.pptx
Hero's Journey para UX.pptx
 
Don't let ux ui be a block_ embedding development on product design process _
 Don't let ux ui be a block_ embedding development on product design process _ Don't let ux ui be a block_ embedding development on product design process _
Don't let ux ui be a block_ embedding development on product design process _
 
UX Research by Lisandra Maioli
UX Research by Lisandra MaioliUX Research by Lisandra Maioli
UX Research by Lisandra Maioli
 
Intrax - Social Media Strategy
Intrax - Social Media StrategyIntrax - Social Media Strategy
Intrax - Social Media Strategy
 
UX e dicas práticas
UX e dicas práticasUX e dicas práticas
UX e dicas práticas
 
Diagnóstico para Mídias Sociais
Diagnóstico para Mídias SociaisDiagnóstico para Mídias Sociais
Diagnóstico para Mídias Sociais
 
Social Media Strategy (2013)
Social Media Strategy (2013)Social Media Strategy (2013)
Social Media Strategy (2013)
 
UX - Online Classify wireframe
UX - Online Classify wireframeUX - Online Classify wireframe
UX - Online Classify wireframe
 
Consumer Research
Consumer ResearchConsumer Research
Consumer Research
 
UX - Experiência do Usuário com foco em Alta Performance
UX - Experiência do Usuário com foco em Alta PerformanceUX - Experiência do Usuário com foco em Alta Performance
UX - Experiência do Usuário com foco em Alta Performance
 
New Website Architecture (by Lisandra Maioli)
New Website Architecture (by Lisandra Maioli)New Website Architecture (by Lisandra Maioli)
New Website Architecture (by Lisandra Maioli)
 
Gestão de Conteudo para Midias Sociais
Gestão de Conteudo para Midias SociaisGestão de Conteudo para Midias Sociais
Gestão de Conteudo para Midias Sociais
 
UX App Design - MeuCarroNovo App
UX App Design - MeuCarroNovo AppUX App Design - MeuCarroNovo App
UX App Design - MeuCarroNovo App
 
UX Project for LACMA Online Store
UX Project for LACMA Online StoreUX Project for LACMA Online Store
UX Project for LACMA Online Store
 
James Bond App
James Bond AppJames Bond App
James Bond App
 
Who is who in UX: Alan Cooper
Who is who in UX: Alan CooperWho is who in UX: Alan Cooper
Who is who in UX: Alan Cooper
 
GoPro - UCLA project
GoPro - UCLA projectGoPro - UCLA project
GoPro - UCLA project
 
Talenthouse - Ad Campaign
Talenthouse - Ad CampaignTalenthouse - Ad Campaign
Talenthouse - Ad Campaign
 
UX Design - Talenthouse Redesign (UCLA)
UX Design - Talenthouse Redesign (UCLA)UX Design - Talenthouse Redesign (UCLA)
UX Design - Talenthouse Redesign (UCLA)
 

Online magazine wireframe (Lisandra Maioli))

  • 1. TRENDS - Stefanini Personas, Cenário e User Journey Website - Revista Trends
  • 2. Personas, Cenário e User Journey
  • 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. 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. 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. 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. 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. Personas, Cenário e User JourneyBenchmarking (Card-based design)
  • 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. 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. 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. 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. - “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. - “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. 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. 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. 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
  • 20. –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"
  • 21. Home - list - default Visualização por lista
  • 22. Home - cards - selecionados Editorias e formatos selecionados
  • 23. Interna - Tech - Artigo Chamadas para site Institucional Plugin de Mídias Sociais (floating) Comentários (expandíveis)
 + abertos
 - fechados Conteúdos relacionados Rodapé
  • 24. Outros exemplos de card-based design Prototype
  • 26. Outros exemplos de card-based design Site Responsivo (live)
  • 28. Outros exemplos de card-based design ANEXO
 Mais exemplos de Card-based design
  • 45. 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
  • 46. Organizar por Pode-se selecionar a opção de organizar o conteúdo por grid ou, neste caso, por lista
  • 47. 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
  • 48. 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.
  • 49. Ao se clicar em uma das seleções, todo o conteúdo replicado daquela edição será exibido Edições das Revistas
  • 50. Será possível selecionar mais de uma revista Edições das Revistas
  • 51. Edições das Revistas Ao se clicar novamente na edição selecionada, o conteúdo daquela opção não será mais exibido
  • 52. Edições das Revistas Assim como ao se clicar em “Todos”, será exibido novamente todo o conteúdo
  • 53. Busca O usuário pode fazer uma busca em todo o conteúdo do site
  • 54. Busca O texto buscado é destacado no texto onde foi encontrado O conteúdo também pode ser exibido/filtrado por tag
  • 55. Busca por tag Ao se clicar na tag selecionada, é exibido novamente todo o conetúdo
  • 56. 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
  • 58. Exibição de vídeo Possibilidade de ver os próximos videos Ao se fechar o popup, é exibido a página anterior
  • 59. Ao se clicar novamente na opção do menu selecionada, o mesmo é “desligado” e o conteúdo é reorganizado Menu-filtro
  • 60. Organizar por Pode-se selecionar a opção de organizar o conteúdo por grid para voltar a organização original
  • 61. 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
  • 62. Não logado Fazer login/ cadastro Pode-se também fechar o popup para se voltar para a página anterior.
  • 63. 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
  • 64. 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
  • 66. Login/Cadastro Ou se cadastrar caso não tenha seja assinante Trends
  • 67. 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)
  • 68. Logado Ao estar logado, é possível navegar pelas edições Logado, poderá acessar todo o conteúdo logado
  • 70. 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
  • 71. 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
  • 72. Menu-filtro Ao se clicar novamente na opção do menu que estava selecionada, o filtro para aquela opção é "desligado"
  • 73. Menu-filtro Ao se selecionar novamente a opção “desligada”, os cards da opção selecionada são exibidos novamente
  • 74. 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
  • 78. Menu-filtro E mais categorias… O usuário poderá clicar a qualquer momento para visualizar o conteúdo
  • 79. 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
  • 80. Exibição cards Ao fechar o pop up que exibe o conteúdo, o usuário volta a visualizar a navegação anterior
  • 92. Organizar por: Todos, Online, Revista
  • 93. Organizar por: Todos, Online, Revista
  • 94. Organizar por: Todos, Online, Revista Selecionar Revista
  • 95. Organizar por: Todos, Online, Revista Selecionar Revista
  • 96. Organizar por: Todos, Online, Revista Selecionar Revista