WALL TRICKS APP: Aplicativo para registro e compartilhamento de manobras de skate na internet

FACULDADE DE DESIGN
BRUNO SARTORI QUADROS
WALL TRICKS APP:
Aplicativo para registro e
compartilhamento de manobras
de skate na internet
Porto Alegre
2015

BRUNO SARTORI QUADROS
WALL TRICKS APP:
Aplicativo para registro e
compartilhamento de manobras
de skate na internet
Trabalho de Conclusão de Curso apresen-
tado à Faculdade de Design da Uniritter
Laureate International Universities, como
requisito parcial para obtenção do título de
Bacharel em Design.
Orientador(a): Prof. Ms. Andréa Capra
Porto Alegre
2015

Dados Internacionais de Catalogação na Publicação (CIP)
Q1w Quadros, Bruno Sartori.
Wall Tricks App: aplicativo para registro e compartilhamento de
manobras de skate na internet / Bruno Sartori Quadros. – 2015.
78 f.: il ; 30 cm.
Monografia (graduação) – Centro Universitário Ritter dos Reis,
Faculdade de Design, Porto Alegre, 2015.
Orientador: Profa. Dra. Andréa Capra.
1. Design de Interação. 2. Aplicativos. 3. Redes Sociais. I. Título. II.
Capra, Andréa.
CDU 7.05
Ficha catalográfica elaborada no Setor de Processamento Técnico da Biblioteca
Dr. Romeu Ritter dos Reis

AGRADECIMENTOS
Primeiramente agradeço aos meus pais, Antonio e Maria Inês, que me deram
suporte durante toda a minha jornada acadêmica e profissional, com muito amor e
afeto. À minha irmã Bianca, minha eterna companheira que, mesmo do outro lado do
oceano, sempre está presente nos nossos corações (e também pelo Skype). A mi-
nha namorada Katherine, que me apoiou ao longo de toda essa caminhada e me
mostrou o real valor da vida acadêmica, e por ser uma pessoa que admiro muito e
que pude me espelhar para minha formação acadêmica. Vocês são a minha base e
têm todo meu amor e minha eterna gratidão.
Ao Superplayer, empresa que fez parte de praticamente toda minha formação
acadêmica, por ser mais que um ambiente profissional, mas principalmente um am-
biente de aprendizado diário. Agradeço em especial ao Pedro Loureiro por ter me
acolhido e estar sempre disposto a compartilhar seu vasto conhecimento e ao Gus-
tavo Goldschmidt por sempre me incentivar a superar desafios e a “sonhar grande”.
À todos os professores da Uniritter Laureate Universities que tive o privilégio
de aprender, trabalhar e conhecer. Em especial minha orientadora Andréa Capra e
aos professores Jaire Passos, Heli Meurer, Claudio Salvalaio e Daniel Quintana
Sperb. Vocês têm extrema importância na minha formação acadêmica e sou muito
grato por isso.
Agradeço também aos meus colegas da Uniritter e à todos aqueles que esti-
veram comigo durante esta trajetória, direta ou indiretamente, contribuindo de algu-
ma forma.
Muito obrigado!

“Se enxerguei mais longe, foi porque me
apoiei nos ombros de gigantes.”
(Isaac Newton)

RESUMO
Este trabalho de conclusão de curso tem como objetivo propor um aplicativo para
smartphone direcionado ao segmento esportivo do skate que auxilie o usuário a re-
gistrar e a compartilhar vídeos que revelam a realização de manobras, fazendo des-
te conteúdo matéria-prima para uma rede social organizada em forma de aplicativo.
O trabalho foi desenvolvido com base em uma metodologia específica para produtos
digitais – o Projeto E.
Palavras-chave: Aplicativo; rede social; skate; interface gráfica; design de interação.

ABSTRACT
The Final Assignment consists of a smartphone application directed to
the skateboard sports segment, which helps the user to record and share videos of
their tricks, making this content primordial for a social network App. The work was
developed based on a specific methodology for digital products - "Projeto E".
Keywords: App; social media; skateboard; interface design; interaction design.

8
LISTA DE FIGURAS
Figura 1 - Metodologia Projetual - Projeto E ...........................................................16
Figura 2 – Publicação feita pelo autor em grupos do Facebook................................21
Figura 3 - Publicação da pesquisa feita pela FGSKT ................................................22
Figura 4 – Infográfico feito com as resultados da pesquisa.......................................23
Figura 5 – Condição atual do compartilhamento de manobras..................................24
Figura 6 – Condição pretendida para o compartilhamento de manobras. .................25
Figura 7 – Taxonomia do projeto. ..............................................................................26
Figura 8 – Aplicativo Nike SB App. ............................................................................28
Figura 9 – Aplicativo OnFlow. ....................................................................................29
Figura 10 – Aplicativo Riders. ....................................................................................30
Figura 11 – Aplicativo Skatespots..............................................................................31
Figura 12 – Aplicativo Instagram................................................................................32
Figura 13 – Aplicativo Vine.........................................................................................33
Figura 14 – Aplicativo Youtube. .................................................................................34
Figura 15 – Comparativo de funcionalidades.............................................................36
Figura 16 – Análise estrutural e mofológica (Nike SB App). ......................................38
Figura 17 – Análise funcional (Nike SB App). ............................................................39
Figura 18 – Resultado da análise de usabilidade (Nike SB)......................................40
Figura 19 – Identidade visual do aplicativo Nike SB ..................................................40
Figura 20 – Paleta cromática do aplicativo Nike SB ..................................................41
Figura 21 – Análise estrutural e mofológica (Riders). ................................................41
Figura 22 – Análise funcional (Riders). ......................................................................42
Figura 23 – Resultado da análise de usabilidade (Riders).........................................43
Figura 24 Identidade visual do aplicativo Riders........................................................43
Figura 25 – Paleta cromática do aplicativo Riders.....................................................44
Figura 26 – Lista de verificação. ................................................................................44
Figura 27 - Card sorting para publicações. ................................................................46
Figura 28 - Card sorting do aplicativo. .......................................................................47
Figura 29 - Wireframe do cartão de publicação de vídeo. .........................................48
Figura 30 - Wireframe do menu principal do aplicativo..............................................49
Figura 31 – Wireframe da área de publicações do aplicativo. ...................................50

Figura 32 – Tarefa 1: Captura e publicação de vídeo no aplicativo...........................51
Figura 33 - Tarefa 2: Curtir uma publicação e comentá-la.........................................52
Figura 34 – Definição do nome do produto...............................................................53
Figura 35 – Resultado final da assinatura visual do produto. ....................................54
Figura 36 – Malha diagramacional do aplicativo........................................................55
Figura 37 – Fonte tipográfica definida para o aplicativo.............................................56
Figura 38 – Estágios criativos para o ícone “não gostei”. ..........................................57
Figura 39 – Família iconográfica do aplicativo...........................................................58
Figura 40 – Matriz cromática do aplicativo.................................................................59
Figura 41 – Mapeamento de expressões...................................................................60
Figura 42 – Principais telas do aplicativo Wall tricks..................................................61
Figura 43 – Criação de conta: pop-up de conversão..................................................62
Figura 44 – Captura em vídeo e publicação de uma manobra...................................63

SUMÁRIO
1 INTRODUÇÃO....................................................................................................... 12
2 JUSTIFICATIVA..................................................................................................... 13
3 OBJETIVOS........................................................................................................... 15
3.1 OBJETIVO GERAL ...........................................................................................15
3.2 OBJETIVOS ESPECÍFICOS.............................................................................15
4 METODOLOGIA .................................................................................................... 16
5 DESENVOLVIMENTO PROJETUAL .................................................................... 19
5.1 CONTEXTUALIZAÇÃO ....................................................................................19
5.1.1 Questões projetuais.................................................................................19
5.1.2 Identificação dos usuários......................................................................20
5.1.3 Condição atual e condição pretendida ..................................................24
5.1.4 Situação inicial bem e situação final bem definida ..............................25
5.1.5 Taxonomia ................................................................................................25
5.2 DESCONSTRUÇÃO .........................................................................................27
5.2.1 Análise de similares e referencias .........................................................27
5.2.2 Comparativo de funcionalidades............................................................35
5.2.3 Estruturais, morfológicas, funcionais e heurísticas.............................37
5.2.3.1 Nike SB App ....................................................................................................38
5.2.3.2 Riders ..............................................................................................................41
5.3 VERIFICAÇÃO..................................................................................................44
5.4 RECONSTRUÇÃO ...........................................................................................45
5.4.1 Definição das ferramentas, funcionalidades e conteúdos...................45
5.4.2 Wireframe, wireflows e caso de uso. .....................................................47
5.5 IDENTIDADE ....................................................................................................52
5.5.1 Definição da assinatura visual................................................................53
5.5.2 Editoração e diagramação ......................................................................55
5.5.3 Definição das fontes tipográficas...........................................................56
5.5.4 Definição da imagética ............................................................................56
5.5.5 Definição da matriz cromática ................................................................58
5.6 DIFERENCIAÇÃO ............................................................................................59
5.7 DESENVOLVIMENTO ......................................................................................60
6 CONSIDERAÇÕES FINAIS................................................................................... 64

REFERÊNCIAS......................................................................................................... 66
APÊNDICE – GERAÇÃO DE ALTERNATIVAS....................................................... 67
ANEXO A – MATCH – CHECKLIST PARA AVALIAÇÃO DA USABILIDADE DE
APLICATIVOS PARA CELULAR TOUCHSCREEN................................................ 70

12
1 INTRODUÇÃO
Este trabalho apresenta uma proposta de aplicativo para smartphone direcio-
nado ao segmento esportivo do skate. Assim, este projeto buscou responder o se-
guinte problema de pesquisa: como projetar um aplicativo para smartphone direcio-
nado à prática do skate que auxilie o usuário a registrar e a compartilhar suas
manobras, consolidando este conteúdo como central para uma rede social? Para
tanto, o presente trabalho baseou-se no Projeto E como metodologia norteadora e
foi organizado em sete “macro-etapas”.
As três primeiras etapas da metodologia foram responsáveis por identificar e
entender o problema, assim como investigar e analisar soluções já existentes no
mercado. Com isso, foi elaborado um escopo com requisitos, restrições e possibili-
dades para o projeto. A etapa seguinte foi responsável por definir toda a arquitetura
da informação do produto. Já para quinta etapa ficou o encargo de definir a parte
estética seguido da etapa de diferenciação do produto perante seus concorrentes no
mercado. Na sétima e última etapa finalizou-se o projeto apresentando as principais
telas do produto.

13
2 JUSTIFICATIVA
A popularização das redes sociais online atende a um grande número de pes-
soas, tribos, com diferentes objetivos, em um contexto livre para a vivência de expe-
riências em grupo com a possibilidade de compartilhar e encontrar conteúdos de
interesse. Existem muitas redes sociais focadas em determinados nichos.
Entre tantas pode-se citar como exemplo o Behance1
. A empresa define-se
como uma plataforma centralizadora de conteúdo do mundo criativo, na qual o pro-
fissional se mantém atualizado, acha inspirações para seus trabalhos a partir de pro-
jetos encontrados na plataforma e também divulga seu portfólio (BEHANCE,
ca.[2015]). Ao mesmo tempo o Behance também é utilizado por muitas empresas
referências na indústria criativa em busca de novos talentos.
Se tratando de redes sociais focadas em esporte, mais precisamente em ska-
te, há uma carência muito grande para este seguimento. Segundo o site Cem Por-
cento Skate2
(2012), conceituada revista da área, foram encomendadas à Datafolha
pela Confederação Brasileira de Skate (CBSK) informações a respeito da presença
de skatistas na população brasileira, bem como o perfil dos praticantes do esporte.
Os resultados da pesquisa feita no ano de 2010 mostram que existe cerca de
3.800.000 (três milhões e oitocentos mil) skatistas no país, revelando um crescimen-
to de 20% comparado à última pesquisa de 2006. Outro aspecto positivo é a presen-
ça cada vez mais relevante de praticantes do esporte em variadas classes sociais. O
crescimento elevado na classe C (9%) e a manutenção do número entre as classes
A e B (42%, somadas) é prova eminente da aproximação do universo do skate com
as diversas realidades socioeconômicas do país. O skate posiciona-se democrati-
camente distribuído entre as camadas econômicas, ficando cada vez mais errôneo
rotulá-lo como um esporte somente da elite ou de classes menos favorecidas.
O aumento do número de praticantes de skate tem um reflexo direto na eco-
nomia, segundo o site Estadão PME3
(2012), o setor fatura em torno de R$ 500 mi-
lhões por ano. O site Pequenas Empresas Grandes Negócios (PEGN)4
(2010)
1
Disponível em: <http://www.behance.net/about>. Acesso em 30 de abr. de 2015
2
Disponível em: < http://cemporcento.uol.com.br/fiksperto/o-skate-cresce-no-brasil>. Acesso em 30
de abr. de 2015
3
Disponível em: < http://pme.estadao.com.br/noticias/noticias,skate-vira-negocio-na-mao-de-
praticantes,2157,0.htm>. Acesso em 30 de abr. de 2015
4
Disponível em: < http://pegntv.globo.com/Jornalismo/PEGN/0,,MUL1607206-17958,00-
CRESCE+MERCADO+DE+SKATE+NO+BRASIL.html>. Acesso em 30 de abr. de 2015

14
acrescenta ainda que o Brasil é o país com a segunda maior indústria mundial do
seguimento: só fica atrás dos Estados Unidos.
Portanto, a proposta deste projeto centrou-se em desenvolver um aplicativo
de rede social focado no segmento esportivo do skate, que proporcione aos usuários
gravar vídeos que mostrem a realização de manobras diretamente da plataforma e,
em seguida, compartilhar o conteúdo com suas conexões da rede. Assim, como a
plataforma Behance, o usuário poderá, através do aplicativo, encontrar inspirações
para novas manobras além de divulgar suas próprias manobras. A plataforma ainda
abre a possibilidade para grandes empresas de agregar publicidade focada no seu
público-alvo, encontrar novos talentos e divulgação de marcas, utilidades que podem
auxiliar a economia do esporte e crescer ainda mais.

15
3 OBJETIVOS
3.1 OBJETIVO GERAL
Projetar um aplicativo para smartphone direcionado à prática do skate que
auxilie o usuário a registrar e a compartilhar vídeos que mostram a realização de
manobras, sob a configuração de uma rede social.
3.2 OBJETIVOS ESPECÍFICOS
a) Desenvolver uma pesquisa para definir as diretrizes do projeto;
b) Analisar aplicativos do mesmo segmento;
c) Validação de heurísticas adaptada para smartphone pelo GQS (Grupo
de Qualidade de Software) da UFSC (Universidade Federal de Santa
Catari-na).
d) Projetar o aplicativo a partir de uma guideline.

16
4 METODOLOGIA
Para nortear o projeto utilizou-se o método projetual “Projeto E”, desenvolvido
por Heli Meurer (2015) e aproveitado desde 2008 em disciplinas sobre projetos de
dígitos virtuais do curso de Design Gráfico na Uniritter Laureate International Univer-
sities.
O Projeto E caracteriza-se por ser uma metodologia que auxilia no desenvol-
vimento de projetos de dígitos virtuais e engloba as seguintes fases: Contextualiza-
ção (identificar, definir e delimitar o problema), Desconstrução (investigação, análi-
ses e avaliação de conteúdo, conceitos e contextos), Verificação (restrições,
requisitos e possibilidades), Reconstrução (escopo, esqueleto e estrutura do proje-
to), Identidade (definição da identidade visual), Diferenciação (avaliação da persona-
lidade visual), Desenvolvimento (modelo funcional navegável) e Validação (identifi-
cação e correção de possíveis erros). A Figura 1 representa graficamente as oito
etapas da metodologia, que serão detalhadas em seguida.
Figura 1 - Metodologia Projetual - Projeto E
Fonte: Projeto E
5
.
5
Disponível em: <http://www.projetoe.com>. Acesso em 30 de abr. de 2015.

17
Contextualização: Está é a etapa inicial da metodologia projetual, que con-
siste levantar todo o contexto envolvido no projeto, desde o seu público-alvo até a
tecnologia que será usada no seu desenvolvimento.
Desconstrução: O objetivo desta fase é excussão de pesquisas e uma análi-
se sincrônica de produtos relevantes ao projeto. Os resultados serão analisados e
apontados os pontos fortes e fracos encontrados, que servirão de referência no de-
senvolvimento do projeto.
Verificação: A partir dos resultados obtidos nas duas últimas etapas, na fase
de verificação será elaborado uma lista de restrições, requisitos e possibilidades,
sintetizados em forma de listas de verificação que nortearão o projeto.
Reconstrução: Esta fase é definida por sucessiva geração de alternativas a
partir de rascunhos, esboços, esquemas, fluxogramas entre outras técnicas e méto-
dos. A partir de então começam a ser definidas as funcionalidades e ferramentas
que existirão no produto proposto. Todas as definições deverão ser apresentadas
através de casos de uso, workflows e wireframes detalhados.
Identidade: Esta etapa tem como finalidade o desenvolvimento da identidade
visual do projeto, alinhado com elementos gráfico-visuais que irão fazer parte do
produto, como os grids utilizados para a diagramação do conteúdo, padrão cromáti-
co, tipografia, ícones e botões.
Diferenciação: Para esta etapa o objetivo é avaliar a personalidade visual de-
finida e desenvolvida na etapa de identidade. Através de uma análise feita pelos
usuários, de caráter principalmente mercadológico, é possível identificar se o posici-
onamento gráfico-visual está dentro do planejado ou se precisará ser revisado.
Desenvolvimento: Ao ter toda a arquitetura da informação e a definição de
todas as telas do projeto, inicia-se o seu desenvolvimento. Com isso é recomendável
construir um modelo navegável funcional, onde simule as funcionalidades e intera-
ções do produto. A partir de um modelo navegável é possível realizar avaliações
heurísticas por parte de testes de interação junto com os usuários.

18
Validação: Está etapa diz respeito a avaliações e testes técnico-funcionais e
com usuários. Geralmente, inicia-se logo após os primeiros resultados da etapa de
reconstrução e prossegue no decorrer do planejamento do produto. Basicamente,
ela visa identificar e corrigir possíveis erros de programação e de usabilidade.
No presente projeto esta etapa não será aplicada. Para isso teria que ser de-
senvolvida a partir de um profissional da área de programação, o que não é o foco
do projeto.
O Projeto E tem como base a metodologia proposta por Garrett (2003) e
agrupa processos, métodos e conceitos extraídos de diversos pensadores clássicos
e contemporâneos do design que contemplam Archer (1966), Bonsiepe (1984), Bür-
dek (2006), Löbach (2007) e Gomes (2011), a fim de satisfazer as necessidades de
projetos focados em ambientes digitais.

19
5 DESENVOLVIMENTO PROJETUAL
Neste capítulo será apresentado todo o desenvolvimento projetual. Sua divi-
são foi organizada a partir das etapas propostas pelo método Projeto E.
5.1 CONTEXTUALIZAÇÃO
Para Meurer (2015), a contextualização, etapa inicial do projeto, consiste em
identificar, definir e delimitar o problema. Para auxiliar o desenvolvimento desta eta-
pa os autores indicam uma gama de ferramentas que devem ser escolhidas levando
em conta a natureza de cada projeto.
Tendo em vista tais informações, para o projeto aqui proposto foram definidas
as ferramentas: questões projetuais, identificação dos usuários, condição atual e
condição pretendida, Situação inicial bem e situação final bem definida e taxonomia
que serão introduzidas e desenvolvidas no decorrer deste capítulo.
5.1.1 Questões projetuais
No método de questões projetuais, Meurer (2015) realiza uma adaptação das
questões projetuais desenvolvidas pelo Bonsiepe (1984) para o contexto de projetos
digital.
O que projetar?
Projetar um aplicativo para smartphone direcionado a prática do skate que
auxilie o usuário a registrar e compartilhar vídeos que mostram a realização de suas
manobras esportivas, consolidando o conteúdo em uma rede social.
Por que projetar?
É muito comum os praticantes do esporte realizarem registros em vídeos de
manobras que tenham executado. Muitos desses registros são compartilhados em
diversas redes sociais online como Facebook, Instagram, Youtube, Vimeo, entre ou-
tras. Levando isso em consideração, o foco desse projeto é ser uma plataforma cen-
tralizadora de registros de manobras realizadas pelos praticantes do skate, assim

20
como estimular a interação do usuário com a plataforma e com outros usuários da
rede.
Como projetar?
A partir do auxílio da metodologia projetual "Projeto E", que em suas
etapas contemplam: Contextualização, Desconstrução, Validação, Reconstrução,
Identida-de, Diferenciação e Desenvolvimento .
Para quem se destina o projeto?
Praticantes ou simpatizantes da prática do skate que possuem um smartpho-
ne com acesso à internet.
Com qual tecnologia?
A plataforma de desenvolvimento será para smartphone e inicialmente será
desenvolvida uma versão para Android, escrita em Java. Posteriormente será lança-
da uma versão iOS, escrita em Objective C.
A aplicação acessará dados remotos, por meio de uma API REST, esta API
será escrita em javascript sobre o framework Node.js. O armazenamento de dados
será no banco de dados documental MongoDB. A API será servida pelo container
Nginx e será hospedada inicialmente no Heroku.com.
Os vídeos serão hospedados no Youtube, onde os uploads serão feito por
sua API. O stream dos vídeos será usando os componentes de vídeo dos SDKs do
Google, tanto para Android quanto para iOS.
5.1.2 Identificação dos usuários
Para melhor entender o público-alvo e com a finalidade de captar informações
relevantes para o projeto, foi realizada uma pesquisa quali-quantitativa. Para tanto,
elaborou-se um questionário com 5 perguntas de múltipla escolha e 5 dissertativas,
totalizando 10 questões. As questões podem ser divididas em 3 grupos. O primeiro
tem o intuito de coletar informações básicas do usuário, como sexo e idade. Já se-
gundo grupo tem o objetivo de compreender melhor como é a relação do entrevista-
do com a prática do esporte. O terceiro e último grupo tem o proposito de descobrir

21
como o entrevistado consome e interage no âmbito digital com conteúdos relaciona-
do ao tema central do projeto.
A pesquisa foi desenvolvida com o auxílio da ferramenta TypeForm6
. O ques-
tionário da pesquisa foi realizada entre os dias 7 e 29 de abril de 2015 em grupos do
Facebook que abordam o tema central do projeto, a prática do skate. Foi publicado
na página pessoal do autor e ainda enviado mensagens privadas para federações,
atletas e marcas do esporte (Figura 2).
Figura 2 – Publicação feita pelo autor em grupos do Facebook.
Fonte: Facebook.
Toda estratégia de divulgação resultou em uma publicação feita pela Federa-
ção Gaúcha de Skate (FGSKT) na sua página no Facebook (Figura 3) que, junto
com outras publicações paralelas, ajudou a pesquisa alcançar 100 respostas em
menos de um mês de aplicação.
6
Disponível em: <http://www.typeform.com>. Acesso em 30 de abr. de 2015

22
Figura 3 - Publicação da pesquisa feita pela FGSKT
Fonte: Facebook
7
.
Ao término da coleta de dados foi montado um infográfico com as informa-
ções mais relevantes para o projeto que está representado na Figura 4.
7
Disponível em: < https://www.facebook.com/FGSKT/posts/832337866802252>. Acesso em 30 de
abr. de 2015.

23
Figura 4 – Infográfico feito com as resultados da pesquisa.
Fonte: Figura elaborada pelo autor.
Com infográfico montado contendo as informações mais relevantes extraídas
da pesquisa, é possível mapear o perfil dos prováveis usuários do aplicativo:
Jovens com idades entre 16 a 30 anos (68%), do sexo masculino (94%)
que andam de skate pelo menos três vezes na semana (60%). Possuem smar-
tphone (95%) e o utilizam para registrar vídeos de manobras (73%) e comparti-
lhá-las em redes sociais (61%).
Estas informações são extremamente relevantes e servirão como base para
desenvolver todas outras ferramentas da etapa de Contextualização.

24
5.1.3 Condição atual e condição pretendida
Meurer (2015) aconselha para essa etapa investigar em que estado se encon-
tram os produtos similares ao projeto, quais funcionalidades e suas características
de uso. Com isso, é possível considerar sua condição atual em refletir sobre melho-
rias e novos recursos que diferenciarão o projeto no mercado, definindo a condição
pretendida para o projeto.
Condição atual
Como pode-se perceber com o suporte da pesquisa apresentada anterior-
mente muitos vídeos de manobras são gerados por praticantes. Porém, dos poucos
aplicativos existentes focados no seguimento, nenhum conseguiu se firmar no Brasil.
O conteúdo acaba ficando fragmentado em diversas redes sociais, o que pode aca-
bar deixando o usuário confuso a respeito de onde seria o melhor lugar para ele
compartilhar suas manobras (Figura 5).
Outro ponto importante que deve ser ressaltado é que não existe nenhum
aplicativo focado no segmento que tenha uma versão em língua portuguesa o que
pode ajudar no distanciamento dos usuários brasileiros.
Figura 5 – Condição atual do compartilhamento de manobras.
Condição pretendida
Pretende-se desenvolver um aplicativo que centralize em uma só rede social
todo o conteúdo de manobras de skate, que atualmente encontra-se fragmentado
em diversas redes sociais. Com isso, o usuário poderá registrar e compartilhar suas

25
manobras na rede social para que sejam visualizadas, avaliadas e comentadas.
Além disso, destaca-se que o produto possuirá uma versão em português (Figura
6).
Figura 6 – Condição pretendida para o compartilhamento de manobras.
5.1.4 Situação inicial bem e situação final bem definida
A situação inicial bem definida, tem como objetivo definir o produto, seu públi-
co e seus possíveis cenários de uso. Já na situação final bem definida serve para
definir de que forma será feito o produto para satisfazer as expectativas do público
(MEURER, 2015).
Situação inicial bem definida
Projetar um aplicativo para smartphone direcionado a prática do skate que
auxilie o usuário a registrar e compartilhar suas manobras, consolidando o conteúdo
em uma rede social.
Situação final bem definida
Interface gráfica amigável de fácil uso que atenda as necessidades dos prati-
cantes de skate e cumpra os objetivos proposto no presente projeto.
5.1.5 Taxonomia
Para Brod (2009), a taxonomia nada mais é que uma classificação criada pelo
homem para definir qualificações para todas as coisas, seres vivo e fenômenos. A

26
taxonomia pode ser aplicada em 5 aspectos diferentes, são eles: Saber, contínua,
alfabética, temporal, locacional e categorial.
No presente projeto foi utilizado a taxonomia categorial (Figura 7), que foi ins-
pirada na classificação feita por Carl Von Lineu, em seu livro Systema Naturae (apud
BROD, 2009) propôs uma classificação simplificada. Sua classificação segue a se-
guinte estrutura: Reino, conjunto de todos os Filos; Filos, conjunto das Classes;
Classes, conjunto das Ordens; Ordens, conjunto das Famílias; Famílias, conjunto de
Gêneros; Gêneros, conjunto de Espécies; Espécies, conjunto de indivíduos com se-
melhanças anatômicas e funcionais, com capacidade de reprodução entre
si (BROD, 2009).
Figura 7 – Taxonomia do projeto.
Na finalização da etapa de Contextualização é possível entender melhor o
problema proposto e como agem os futuros usuários da solução do projeto, até
mesmo propor um escopo preliminar para o projeto. Com essa informações registra-
das será mais fácil analisar os concorrentes do mercado e saber enxergar quais são
seus pontos fortes e fracos que servirão de informação para o projeto aqui proposto.
Estas análises de concorrentes é o assunto do capítulo a seguir, Desconstrução.

27
5.2 DESCONSTRUÇÃO
A etapa de desconstrução tem o objetivo de analisar e avaliar conteúdos,
conceitos e contexto, com o fim de auxiliar o desenvolvimento de projetos. Para
Meurer (2010) a etapa de desconstrução é relevante para levantar informações e
conhecimento que possam ajudar nas futuras tomadas de decisões necessárias pa-
ra o projeto.
Para a Desconstrução foram definidas três ferramentas de apoio, são elas:
Similares e Referências, Comparativos de Funcionalidades e Estruturais, morfológi-
cas, funcionais e heurísticas.
5.2.1 Análise de similares e referências
A Análise de similares e referências é feita através da avaliação de produtos
existentes no mercado que sirvam de subsídios para o projeto, por sua similaridade
com o tema ou por ser referência para um determinado fim. Com isso, são levanta-
dos os pontos positivos e negativos de cada projeto analisado (MEURER, 2015).
O critério da escolha dos projetos que seriam analisados foi definir aplicativos
que atinjam o mesmo público-alvo do projeto aqui proposto. Para tanto, foram esco-
lhidos para análise o aplicativos Nike SB, OnFlow, Riders e SkateSpots. Outro obje-
tivo foi analisar aplicativos que tenham o foco social de compartilhamento de mídias
(fotos/vídeos). Para esta etapa foram selecionados os aplicativos Instagram, Vine e
Youtube.
Nike SB App: O aplicativo pertence a Nike (Figura 8), gigantesca marca do
segmento esportivo. A empresa descreve o produto como uma comunidade virtual
de skate, onde a principal função do aplicativo é usuário poder filmar suas manobras
diretamente pela plataforma e compartilhar com seus contatos. O Nike Sb App é gra-
tuito e tem possibilidade de comprar mercadorias da Nike dentro do próprio produto.
Atualmente só está disponível para plataforma iOS e sua nota na loja é 4,5.

28
Figura 8 – Aplicativo Nike SB App.
Pontos positivos:
• Ao instalar, é possível conhecer o serviço sem obrigatoriedade de criar
uma conta.
• Possui uma família de ícones personalizada e contextualizada com o tema
do skate.
• Layout bem organizado e com bastante área de respiro entre os elementos
apresentados na tela.
• Há possibilidade de editar o vídeo logo após ser gravando e selecionar um
trecho para deixar em câmera lenta.
• Possui jogos interativos para engajar os usuários entre si.
Pontos negativos
• Alguns momentos os ícones ficam muito pequenos ruim de clicar. Ex.: ícone
de cancelar ao gravar um vídeo ou sair da exibição tela cheia.
OnFlow: O aplicativo OnFlow (Figura 9) é semelhante ao do Nike SB, porém
possui menos funcionalidades e tem um diferencial da geolocalização onde o usuá-
rio pode publicar junto com o vídeo o local onde a manobra foi executada. O serviço
só é disponível para plataforma iOS, que tem nota 4 na loja da Apple.

29
Figura 9 – Aplicativo OnFlow.
Pontos positivos
• Ao publicar um vídeo de uma manobra o usuário pode cadastrar também
o local onde a manobra foi realizada. Com isso os outros usuários que
visua-lizarem tem acesso as coordenadas para chegar no local.
• É possível cadastrar junto ao vídeo o perfil do usuário que filmou a mano-
bras (caso ele também esteja cadastrado na rede).
Pontos negativos
• É obrigado a criar conta para conhecer o produto.
• Diagramação confusa, elementos muito próximos.
• Padrão cromático não é muito eficaz. O contraste de verde no fundo escuro
fica cansativo para os olhos.
Riders: Fundado em 2013, a empresa se define como uma comunidade de
esportes radicais onde os usuários podem aprender, aperfeiçoar e compartilhar suas
manobras. Ao contrário dos outros aplicativos analisados, o Riders (Figura 10) não é
exclusivamente voltado para o público do skate, o aplicativo também contempla con-

30
teúdos para BMX, Longboard, Kiteboard, Snowboard, Surf, Mountain Bike, Scooter,
Aggressive Inline, Ski, Wakeboard, Wakeskate, Motocross, Windsurf e Parkour.
Apesar de o aplicativos ter uma área social para compartilhamento de vídeos
criados pelo usuário, seu maior foco são nos vídeos gravados com profissionais que
ensinam como executar determinadas manobras. O aplicativo é gratuito e está dis-
ponível para dispositivos iOS (avaliado com 5 estrelas), Android (avaliado com 4,5
estrelas) e Windows Phone (avaliado com 5 estrelas).
Figura 10 – Aplicativo Riders.
Pontos positivos
• Possui um grande acervo de tutoriais em vídeos de manobras.
• Existe no aplicativo uma espécie de glossário com termos utilizados no es-
porte, muito bom para praticantes iniciantes.
Pontos negativos
• Falta de personalidade. Padrão de ícones muito similar a utilizada no apli-
cativo Nike SB.
• Não é possível visualizar os vídeos em tela cheia.
• De uma forma geral o aplicativo é muito lento, mesmo com conexão WI-FI.

31
• Os vídeos são muito pesados o que acarreta em demora e travamento du-
rante a execução.
• aplicativo apresentou mais de uma vez falhas que foi necessário reiniciá-lo.
SkateSpots: O skateSpots (Figura 11) é uma espécie de um catálogo de pis-
tas e obstáculos bons para andar de skate. É uma plataforma colaborativa em que
os usuário podem contribuir e cadastrar com fotos e descrições seus locais favoritos
para andar de skate. O aplicativo é gratuito e está disponível para dispositivos iOS
(avaliado com 4,5 estrelas) e Android (avaliado com 3,5 estrelas)
Figura 11 – Aplicativo Skatespots.
Pontos positivos
• Por não possuir nenhum local cadastrado no Brasil não foi possível usar o
aplicativo. Portanto, não tem nenhum ponto relevante para ser destacado
como positivo.
Pontos negativos
• É obrigado a criar conta para conhecer o produto.
• Não possui locais brasileiros cadastrados.
• Falta de personalidade. O layout lembra muito o usado pelo Instagram.

32
• aplicativo é bem lento e trava bastante.
• Apesar de ser uma plataforma colaborativa, o aplicativo não tem nenhum
funcionalidade de interação entre os usuários da rede.
Instagram: Lançado em 2010, o Instagram (Figura 12) descreve-se como
uma ferramenta simples para capturar e compartilhar momentos do mundo a partir
de fotos e vídeos. O aplicativo é gratuito e está disponível para dispositivos iOS
(avaliado com 4,5 estrelas) e Android (avaliado com 4,5 estrelas) onde juntos já con-
ta com 300 milhões de usuários ativos por mês.
Figura 12 – Aplicativo Instagram.
Pontos positivos
• Atalho "Double Tapping" deixa a forma de amar uma foto muito mais sim-
ples e convidativa para usuário se expressar.
• Diagramação que valoriza a imagem.
• Interface limpa e com icones leves.
Pontos negativos
• Na tela de atualizações "seguindo" o histórico é muito pequeno e não tem
como ter acesso arquivos publicados após 24h.

33
• Período de postagem é contabilizado por semana, ao invés, de me-
ses/anos. Com isso é difícil do usuário rapidamente saber há quanto tempo
foi feita a postagem. É apresentado, por exemplo "12 semanas" e nesse
caso para o usuário seria mais fácil se fosse apresentado "3 meses".
• Não aparece a data exata de quando foi feita a publicação da foto.
Vine: Lançado pelo Twitter em 2012, o Vine (Figura 13) é serviço de compar-
tilhamento de vídeos com no máximo 6 segundos de duração. Com ele, usuário po-
de gravar e editar o vídeo pelo próprio aplicativo e divulgar na rede. No aplicativo
também possível navegar através de vídeos publicado por outros usuários, além de
grupos de vídeos classificados por tema e vídeos de tendências.
Figura 13 – Aplicativo Vine.
Pontos positivos
• Ao instalar o aplicativo, o primeiro contato após criar a conta ele convida o
usuário a personalizar o serviço com seus gostos.
• Tanto o padrão cromático quanto o iconográfico apresentam uma lingua-
gem divertida nos seus traços e nas suas cores. Contextualizada com o
público-alvo do produto.

34
• aplicativo possui pop-ups que são exibidos quando o app é aberto, convi-
dando o usuário a experimentar funcionalidades que ele ainda não tenha
usado.
Pontos negativos
É obrigado a criar conta para conhecer o produto.
Youtube: Lançado em maio de 2005, o Youtube (Figura 14) é uma plataforma
colaborativa focada no compartilhamento de vídeos. Contando todas plataformas
(web e mobile) o serviço possui mais de um bilhão de usuários, onde são enviadas
300 horas de vídeo ao YouTube a cada minuto. Segundo o site da empresa, metade
dos acessos são feitas através de dispositivos móveis.
O serviço possui aplicativos para as plataformas Android (avaliado com 4 es-
trelas), iOS (avaliado com 2,5 estrelas) e Windows Phone (avaliado com 3 estrelas).
Figura 14 – Aplicativo Youtube.
Pontos positivos
• É possível utilizar o produto sem necessidade de criar conta.
• Diagramação bem limpa e organizada.

35
• Caso o aplicativo seja fechado no meio da execução de um vídeo, ao abrir
o vídeo novamente ele inicia exatamente no ponto onde estava sendo exe-
cutado.
Pontos negativos
• Nenhum ponto negativo relevante para ser registrado.
5.2.2 Comparativo de funcionalidades
O objetivo desta etapa é levantar funcionalidades que sejam pertinentes ao
projeto aqui proposto e investigar entre os aplicativos analisados quais possuem ou
não estes recursos, fazendo assim um comparativo entre os serviços (MEURER,
2015). O resultado desta análise pode ser visto na Figura 15.

36
Figura 15 – Comparativo de funcionalidades.
A partir dos resultados pode-se perceber que a maioria dos aplicativos possu-
em, no que se trata de funcionalidades, um comportamento similar de uso. Além dis-
so, foram identificadas duas oportunidades bem claras que podem ser exploradas no
projeto aqui proposto.
A primeira é que o usuário possa ter acesso ao conteúdo sem a necessidade
de criar uma conta. Com isso o usuário terá uma experiência mais rápida e prazero-
sa, sem a necessidade de passar por formulário de cadastro antes de usar o produto
e avaliar se vale a pena ou não se cadastrar. Entre os quatro aplicativos do segmen-
to analisados somente o Nike SB utiliza esse recurso.

37
A segunda oportunidade seria projetar o aplicativo na língua portuguesa, le-
vando em consideração que nenhum aplicativo do segmento analisado tenha uma
versão em português. Esta é uma ótima oportunidade de conquistar o mercado bra-
sileiro para o segmento.
5.2.3 Estruturais, morfológicas, funcionais e heurísticas
Assim como a análise de similares e referências, Meurer (2015) sugere a utili-
zação de mais quatro análises com intuito de entender melhor as características téc-
nicas dos aplicativos, são elas:
Análise estrutural: Tem como objetivo entender aprofundadamente a forma
estrutural do produto, conhecer seus componentes e analisar seus funcionamentos
(MEURER, 2015).
Análise morfológica: É responsável por identificar e classificar estruturas
formais do produto a partir de padrões que surgem em seu uso. Estes padrões po-
dem ser com base de princípios geométricos, transições, concordâncias, acabamen-
to cromático ou tratamento de superfície (MEURER, 2015).
Análise funcional: Sua meta é analisar as características de uso do produto,
estruturando suas características técnicas e funcionais.
Heurísticas de usabilidade: São um conjunto de regras gerais que apresen-
tam características comuns em interfaces usáveis que levam em conta aspectos psi-
cológicos, computacionais e sociológicos que ajudam a avaliar a usabilidade do pro-
duto (NIELSEN, 1995).
Para a análise do presente projeto, optou-se em utilizar as heurísticas adap-
tadas para smartphones desenvolvidas pelo Grupo de Qualidade de Software (GQS)
da UFSC (WANGENHEIM & BORGATTO, 2012). Isso será feito com o auxílio de um
checklist criado pelo grupo. O checklist completo, assim como as legendas explicati-
vas para cada nível classificativo de usabilidade são apresentadas no Anexo A.
.

38
Análise da identidade gráfico-visual: A identidade gráfico-visual contempla
as funções estéticas e simbólicas do produto. Mais precisamente, Löbach (apud
MEURER, 2015) define-a em quatro elementos institucionais: os principais (logotipo
e símbolo) e os secundários (cores padrão e tipografia ou alfabeto padrão).
Análise cromática: Sua finalidade é identificar quais são as cores predomi-
nantes no projeto. Com isso analisar se existe um cuidado no contraste entre elas
para não existir ruídos na comunicação com os usuários e se elas possuem algum
significado específico para o produto (MEURER & SZABLUK, 2010)
5.2.3.1 Nike SB App
Análise estrutural e morfológica: Para a presenta análise foi seleciona a te-
la considerada mais relevante no aplicativo, a tela de publicações. A análise deta-
lhada é apresentada na Figura 16.
Figura 16 – Análise estrutural e morfológica (Nike SB App).
Análise funcional: Já para analisar o funcionamento do aplicativo foi selecio-
nada a tarefa chave no aplicativo, a gravação seguida de publicação de uma mano-
bra na rede. A análise detalhada é apresentada na Figura 17.

39
Figura 17 – Análise funcional (Nike SB App).
Heurísticas de usabilidade: O resultado da análise para o aplicativo da Nike
SB foi 50.4 pontos (Figura 18), o que é considerado como usabilidade alta pelo
GQS.

40
Figura 18 – Resultado da análise de usabilidade (Nike SB).
Análise da identidade gráfico-visual: Para a assinatura visual do aplicativo,
a Nike utiliza a identidade visual da submarca focada no skate que é chamada de
Nike Skateboarding ou Nike SB. A identidade consiste do logotipo e o símbolo con-
sagrado da marca junto as letras SB (abreviatura para skateboarding) que utiliza a
mesma tipografia itálica usada no logotipo oficial da marca, na maioria dos casos a
identidade visual é aplicada na cor preta. Na Figura 19 é apresentada a identidade
visual correspondente assim como a sua aplicação no ícone do aplicativo.
Figura 19 – Identidade visual do aplicativo Nike SB
Análise Cromática: O aplicativo tem em sua paleta cromática somente três
cores: azul, branco e preto (Figura 20). A cor predominante é o preto, que está pre-
sente no background de todo aplicativo, além disso as cores preto e branco também
estão bastante presentes nas fotos apresentadas no produto, a única coisa que real-
ça fora do padrão cromático são os vídeos que são publicados pelos usuários.

41
Figura 20 – Paleta cromática do aplicativo Nike SB.
5.2.3.2 Riders
Análise estrutural e morfológica: Assim como para o aplicativo da Nike Sb,
foi mantido mesmo critério para escolha da tela a ser analisada, a tela de publica-
ções. A análise detalhada é apresentada na Figura 21.
Figura 21 – Análise estrutural e mofológica (Riders).

42
Análise funcional: O mesmo acontece para a análise de funcionalidades a
tarefa escolhida é a gravação seguida de publicação de uma manobra na rede. A
análise detalhada é apresentada na Figura 22.
Figura 22 – Análise funcional (Riders).
Heurísticas de usabilidade: O aplicativo Riders recebeu a nota 45.4 pontos
(Figura 23) na avaliação. O GQS define esta pontuação como um aplicativo com
usabilidade razoável. Esta classificação significa que o aplicativo responde aos que-
sitos de consistência de padrões e apresentar boa visibilidade de status.

43
Figura 23 – Resultado da análise de usabilidade (Riders).
Análise da identidade gráfico-visual: No aplicativo Riders a sua assinatura
visual (Figura 24) é composta somente de um logotipo onde a letra R é itálica, o que
passa um sensação de movimento, contrastando-se das demais que são regulares e
rígidas. A letra R também é utilizada como símbolo da marca em aplicações como o
ícone do aplicativo.
Figura 24 Identidade visual do aplicativo Riders
Análise Cromática: Assim como o aplicativo Nike SB, o backgroud do Riders
é predominantemente preto, porém sua paleta cromática é mais extensa (Figura 25).
O padrão cromático é constituído por seis cores, são elas: branco, preto, laranja,
azul, amarelo e verde.
As cores vivas (laranja, azul, amarelo e verde) estão presentes tanto na inter-
face do aplicativo quando na comunicação da marca.

44
Figura 25 – Paleta cromática do aplicativo Riders
5.3 VERIFICAÇÃO
Ao finalizar da etapa de Desconstrução, Meurer (2015) sugere que seja feita
uma lista de restrições, de requisitos e de possibilidades para o projeto. Para fazer a
lista de verificação, deve ser feita baseando-se em todos os dados adquiridos nas
etapas anteriores. Na Figura 26 é apresentado a lista de verificação completa para o
projeto.
Figura 26 – Lista de verificação.

45
Requisitos: Os requisitos determinados para o projeto podem ser divididos
em dois tipos. O primeiro refere-se aos princípios básicos que devem existir no apli-
cativo para que seja lançado no mercado, como: poder gravar vídeos diretamente da
plataforma e possuir uma comunicação alinhada com o público que irá utilizar o pro-
duto. Já o segundo refere-se ao conjunto de informações coletadas a partir de análi-
ses dos produtos similares disponíveis no mercado e pesquisas com o público-alvo
do produto.
Para o presente estudo foram determinados os requisitos mínimos a partir de
análise dos produtos similares no mercado e pesquisa direcionada ao público-alvo.
Foi possível constatar a inexistência de aplicativo deste segmento na língua portu-
guesa, bem como informações a respeito do público-alvo, as quais revelam que 57%
dos participantes possuem smartphones com sistema Android e, entre os aplicativos
similares analisados, existe somente um para este sistema.
Restrições: Conforme definição dos requisitos, o aplicativo a ser projetado
será voltado ao sistema Android. Como restrição para o aplicativo pode-se assinalar
que será baseado nas guidelines determinadas pelo Google.
Oportunidades: Foram ressaltados algumas oportunidades que ajudarão a
melhorar a experiências dos usuários no aplicativo, como: não existir a necessidade
de criar uma conta para poder conhecer o produto e a possibilidade do usuário po-
der compartilhar o conteúdo publicado. Com isso, os usuários ajudariam o aplicativo
a se propagar de uma forma orgânica, onde os próprios usuários estariam divulgan-
do o produto em outra redes sociais.
Ao finalizar a lista de verificação o projeto encontra-se com o escopo delimita-
do e pronto para a fase seguinte da metodologia, a Reconstrução.
5.4 RECONSTRUÇÃO
5.4.1 Definição das ferramentas, funcionalidades e conteúdos.
Esta etapa consiste basicamente em definir o escopo do projeto e tem como
objetivo estipular uma estrutura hierárquica e inter-relações entre conteúdos. Para

46
isso, Meurer (2015) indica o uso do card sorting (cartões sortidos). Segundo Martin e
Hanington (2012) o método que, para projetos digitais, auxilia a organizar a navega-
ção, menus, taxonomia e ainda ajuda a desenvolver quadros que potencializam a
autonomia dos usuários para encontrar a informação que necessita.
Para execução da tarefa foi necessário dividi-la em duas etapas: a primeira foi
definir como seria a experiência do objetivo central do aplicativo, visualização e inte-
ração com vídeos publicados. A solução foi levantar todas as funcionalidades que
contemplarão a interação dos usuários da rede com as publicações, o resultado é
apresentado na Figura 27.
Figura 27 - Card sorting para publicações.
A partir das funcionalidades e interações dos vídeos definidas foi aplicado no-
vamente o método com o intuito de organizar a forma que os vídeos serão apresen-
tados no aplicativo. Na Figura 28 é apresentado o resultado final da estrutura do
aplicativo.

47
Figura 28 - Card sorting do aplicativo.
5.4.2 Wireframe, wireflows e caso de uso.
Esta etapa consiste em colocar em prática o escopo definido para o projeto.
De acordo com Meurer (2015), aconselha-se o desenvolvimento de wireframes (es-
boços iniciais do produto), wireflows (fluxos de telas) e casos de uso (aplicação de
determinadas tarefas do aplicativo).
Como o objetivo do projeto é fazer um aplicativo voltado para sistema An-
droid, foi estipulado que toda apresentação gráfica e estrutural do projeto seguirá as
diretrizes definidas pelo próprio Google, chamada Material Design8
.
O Google descreve que o Material Design tem como objetivo criar um padrão
visual que valoriza princípios clássicos de um bom design. Com isso a empresa dis-
ponibiliza um site completo de boas práticas para produção de interfaces gráficas.
8
Disponível em: <http://www.google.com/design/spec/material-design/introduction.html>. Acesso em
3 de mai. de 2015

48
A seguir será apresentado os desenvolvimentos das etapas de wireframes,
wireflows e casos de uso tendo como norteador as diretrizes do Material Design.
Wireframes: Assim como para definição das ferramentas, funcionalidades e
conteúdos do produto; o primeiro desenvolvimento gráfico foi definir como será a
apresentação dos conteúdos postados no aplicativo.
No Material design existe uma forma particular para apresentação de informa-
ções multimídias denominado "Cartões". O guia define os cartões como uma forma
eficaz de apresentar o conteúdo na tela composto por diferentes elementos. Uma
das principais vantagens dos cartões são suas adaptações para elementos com di-
mensões e ações variadas. Para o aplicativo aqui proposto serão utilizados cartões
para publicações de vídeos no aplicativo entre outras informações inseridas pelos
usuários.
Na Figura 29 apresenta-se a estruturação de cartão padrão de publicação
adaptado para o projeto aqui proposto.
Figura 29 - Wireframe do cartão de publicação de vídeo.
A partir da conclusão do cartão de publicação dos vídeos, é hora de estruturar
a forma de navegação entre as área do aplicativo. Para esse fim foi estipulado que
as principais navegações do sistema serão feita pelo menu lateral, como apresenta-
do na Figura 30.

49
Figura 30 - Wireframe do menu principal do aplicativo.
Um ponto bem importante para o aplicativo é que, quando aberto a primeira
vez, não seja obrigatório a criação de conta. Isso é um diferencial perante a os con-
correntes analisados, nos quais só é possível conhecer o produto após a criação de
uma conta. Na sessão número 1 apresentada na imagem 30, onde existe a "Área do
usuário", mudará o layout para uma chamada convidativa para criar uma conta ou
fazer o login se for a primeira abertura do aplicativo ou se não estiver ”logado” com
nenhuma conta no momento.
Definida a forma básica de navegação, o próximo passo foi especificar as te-
las internas do aplicativo. Na Figura 31 apresenta-se o modo como ficará a tela da
área "Descobrir", local onde o usuário poderá ter acesso aos vídeos que estão em
destaque em toda a rede. O quando o aplicativo for aberto pela primeira vez ou
quando não estiver ”logado” com nenhuma conta, essa será a tela inicial da aplica-
ção.

50
Figura 31 – Wireframe da área de publicações do aplicativo.
Nesta sessão foram apresentados os wireframes principais do sistema, tendo
como o principal objetivo demonstrar como será a distribuição dos elementos na tela
do aplicativo. Na próxima sessão será possível visualizar o funcionamento dos wire-
frames através dos wireflows e caso de uso.
Wireflows e casos de uso: Com a finalidade testar o funcionamento dos
wireframes foi realizado um teste dos wireflows a partir de casos de uso do aplicati-
vo.
Para isso, foram determinadas duas tarefas básicas do sistema. A Tarefa 1
consistem em o usuário alimentar a rede publicando um vídeo de uma manobra, já a
Tarefa 2 tem como objetivo demonstrar o usuário interagindo com o conteúdo da
rede a partir de uma avalição de “gostei” e um comentário realizado em uma mano-
bra publicada por outro usuário.
Tarefa 1: Na Figura 32 é apresentado o passo a passo de como será a publi-
cação de um vídeo no aplicativo.

51
Figura 32 – Tarefa 1: Captura e publicação de vídeo no aplicativo.

52
Tarefa 2: A Figura 33 representa os passos para realizar uma avalição de
“gostei” e um comentário em uma publicação feita por outro usuários da rede.
Figura 33 - Tarefa 2: Curtir uma publicação e comentá-la.
5.5 IDENTIDADE
A etapa da identidade tem a incumbência de refinar os wireframes estruturais
em um produto que transmita empatia, credibilidade e confiabilidade (MEURER,
2015). Para chegar neste objetivo foram selecionadas as ferramentas: definição da
assinatura visual, editoração e diagramação, definição das fontes tipográficas, defi-
nição imagética e definição cromática. Suas resoluções serão demonstradas no de-
correr do deste capítulo.

53
5.5.1 Definição da assinatura visual
Quando o produto não possui nome, tampouco uma identidade visual, é ne-
cessário criar a partir do zero. Meurer (2015) aconselha o uso de métodos de auto-
res especializados no desenvolvimento de identidade visual de marcas. Para tanto
lançou-se mão das ferramentas definidas por Alina Wheeler (2009) com a finalidade
de desenvolver um nome e uma identidade visual para o aplicativo.
Nome: Wheeler (2009) utiliza uma frase de Danny Altman, criador e diretor
criativo da A Hundred Monkeys para sintetiza a importância da ligação do nome de
um produto com o consumidor: "O nome certo cativa a imaginação e conecta-se com
as pessoas que você deseja atingir"9
(Wheeler, 2009, p.20). Levando isso em consi-
deração, recorreu-se a ferramenta de brainstorming para auxiliar a descobrir solu-
ções de nomes que tivessem algum vínculo entre o produto e os futuros usuários. O
ponto forte da ferramenta afirma-se, num primeiro momento, na quantidade de alter-
nativas, mais do que a qualidade delas, sendo que estranhezas são bem-vindas
(MARTIN & HANINGTON, 2012). Tendo um bom número de alternativas de nomes
geradas foi realizada uma etapa de eliminações, seguida por vários testes de fusões
até chegar em uma alternativa satisfatória. A solução final é apresentado na Figura
34.
Figura 34 – Definição do nome do produto.
9
“The right name captures the imagination and connects with the people want to reach” (Weeler,
2009, p.20, tradução nossa)

54
Identidade visual: Tendo em vista que o projeto será um aplicativo para
smartphone, entende-se que a maior parte da comunicação visual será feita em dis-
positivos digitais, porem é possível que os praticantes do esporte colem adesivos de
marcas que se identificam em seus skate. Pensando nisto, foi desenvolvido uma
identidade visual em forma de emblema que, segundo Wheeler (2009), é quando o
nome da empresa está intrissecamente vinculado a um elemento pictórico. Na Figu-
ra 35 é apresentado a proposta final para a identidade visual do produto.
Figura 35 – Resultado final da assinatura visual do produto.
A cultura do skate está muito ligada com a linguagem visual do grafite10
. Le-
vando essa informação em consideração para o logotipo, foi feito um lettering a par-
tir de um esboço feito à mão e após finalizado em um programa vetorial.
A partir da conclusão do logotipo definiu-se o elemento de apoio que ajudaria
a construir o emblema para a identidade visual. O elemento escolhido foi o círculo,
por ser uma forma geométrica básica de fácil reconhecimento e boa aplicação, tanto
para o ícone do aplicativo quanto para adesivos de divulgação da marca a serem
colados no skate dos usuários.
10
“[...] Nome dado às inscrições feitas em paredes, desde o Império Romano. Considera-
se grafite uma inscrição caligrafada ou um desenho pintado ou gravado sobre um suporte que não é
normalmente previsto para esta finalidade (WIKIPÉDIA, 2015). Disponível em:
<http://pt.wikipedia.org/wiki/Grafito>. Acesso em 14 de jun. de 2015
“

55
A cor definida para identidade visual foi o roxo, por ser uma cor jovial que está
associada à criatividade (CORTES, 2003), aspecto que relaciona-se fortemente com
a prática do skate, a qual demanda criatividade, tanto para realizar manobras assim
como para encontrar e transpor obstáculos.
5.5.2 Editoração e diagramação
Para a distribuição dos elementos na tela foram utilizadas as diretrizes deter-
minadas pelo Google, a partir das quais se configura uma malha de um módulo qua-
drado de 8px, tendo como base a resolução de 640x320px assim como representa-
do na Figura 36.
Figura 36 – Malha diagramacional do aplicativo.

56
5.5.3 Definição das fontes tipográficas
A fonte escolhida foi a família Roboto (Figura 37) por ser padrão do sistema
Android, como é sugerido na guideline11
especifico para sobre tipografia no site do
Material Design. Seus pontos fortes são que a fonte possui uma família completa e
foi projetada para ser usada em ambientes digitais com diferentes resoluções de te-
las.
Figura 37 – Fonte tipográfica definida para o aplicativo.
5.5.4 Definição da imagética
Além dos conteúdos em vídeo gerados pelos usuários, foi definida para o
aplicativo uma família iconográfica, que são elementos auxiliam na comunicação
do produto com os usuários. Na guideline do Material Design existe uma família de
íco-nes padrões do Android, porém para o presente projeto definiu-se criar
determina-dos ícones onde suas percepções fossem contextualizadas com o
público-alvo do produto, os skatistas. Um exemplo de ícone criado especialmente
para o projeto foi para funcionalidade classificação.
11
Disponível em: < http://www.google.com/design/spec/style/typography.html#typography-language-
categorization>. Acesso em 5 mai. 2015.

57
Segundo Crumlish e Malone (2009) os usuários estão sempre consumindo,
lendo e experimentando conteúdos que lhes são apresentados. Com isso, os usuá-
rios possuem vontade de contribuir e expressar sua opinião perante a rede. Os auto-
res complementam que este comportamento deve ser explorado quando:
• O usuário quiser ter rapidamente a opinião de um usuário para um deter-
minado conteúdo.
• O usuário quiser estimular o envolvimento dos usuário na comunidade.
• As opiniões polarizadas são mais recomendadas para a classificação geral
do objeto.
Umas das formas mais populares de aplicar essa funcionalidade é dividir a
classificação por positiva ou negativa. Em alguns exemplos já utilizados no mercado
os usuários podem classificar desta forma: gostei (não gostei), polegar para cima
(polegar para baixo), coração (coração partido). Para o presente projeto optou-se em
definir os termos para classificação com conteúdos que tenham sinergia com o pú-
blico-alvo do aplicativo. Assim, estabeleceu-se que para classificação positiva será
utilizado um pictograma representativo de uma mão com o dedo indicador e o míni-
mo para cima, este gesto é muito utilizado pelos skatistas para expressar felicidade
e aprovação. No vocabulário utilizado pelos praticantes do esporte, aquele skatista
que não é muito habilidoso é chamado de "prego". A partir dessa informação definiu-
se que o pictograma que irá representar a classificação "não gostei" será um prego.
O processo criativo para a definição do ícone representativo da funcionalidade
"não gostei" é demonstrado na Figura 38.
Figura 38 – Estágios criativos para o ícone “não gostei”.

58
Já na Figura 39, é possível visualizar a família iconográfica completa.
Figura 39 – Família iconográfica do aplicativo.
5.5.5 Definição da matriz cromática
A matriz cromática do aplicativo terá como base o padrão definido para a
identidade visual da marca, o roxo. Para ajudar na comunicação do aplicativo foram
definidas cores auxiliares. A matriz cromática do produto é apresentado na Figura
40.

59
Figura 40 - Matriz cromática do aplicativo.
5.6 DIFERENCIAÇÃO
A etapa de diferenciação tem como objetivo medir a eficiência das caracterís-
ticas gráficas projetadas para o produto na etapa de identidade. Meurer (2015) suge-
re o uso do método chamado “mapeamento de expressões”. O método consiste em
dividir um quadro em quadrantes a partir do cruzamento de um linha vertical (X) e
outra horizontal (Y). Com isso, são estipulados pares de palavras com diferentes
valores e inseridas nas extremidades dos eixos. Para o projeto aqui proposto foram
definidas as palavras formal/divertido para o eixo X e minimalista/complexo para o
eixo Y.
Mais um vez recorreu-se a ferramenta do Typeform para criar um formulário12
com questões sobre o projeto aqui proposto e mais três similares (Riders, OnFlow e
Nike SB). A partir dos resultados obtidos com a pesquisa montou-se a matriz apre-
sentada na Figura 41.
12
Link para o fomulário: https://brunobquadros.typeform.com/to/cRdX56

60
Figura 41- Mapeamento de expressões
Pôde-se perceber que o projeto aqui proposto ficou nivelado com os aplicati-
vos Nike Sb e Riders no quesito de minimalismo e destacou-se no como o aplicativo
com a linguagem gráfica mais divertida. Essa informação ganha extrema relevância
ao considerar que o tema do aplicativo está ligado ao lazer de seus usuários que,
em sua maioria, são jovens entre 16 a 30 anos de idade.
5.7 DESENVOLVIMENTO
A etapa de desenvolvimento consiste na execução de todas telas do produto
levando em consideração a demanda de requisitos, restrições e possibilidades defi-
nidas na etapa de Verificação. Além da demanda de Verificação, o designer deve
ser seguir as diretrizes de layout definidas na etapa de Reconstrução (MEURER,
2015).
A seguir apresenta-se as principais telas do aplicativo (Figura 42). Logo após
algumas das funcionalidades mais relevantes do aplicativo são detalhadas.

61
Figura 42 – Principais telas do aplicativo Wall tricks
Criação de conta: Não será necessário criar conta para usar o aplicativo. Po-
rém, é importante para produto que o usuário possua uma conta para conseguir sa-
ber quais são suas preferências e hábitos. Com isso, é possível realizar uma entrega
de conteúdo inteligente e personalizada para cada usuário.
A estratégia utilizada para converter um visitante em um usuário registrado foi
deixar visíveis todas as funcionalidades do aplicativo, mas algumas destas funciona-

62
lidades são bloqueadas. Quando o usuário tentar utilizar alguma funcionalidade blo-
queada o sistema apresentará um pop-up convidando-o a criar uma conta (Figura
43).
Figura 43 – Criação de conta: pop-up de conversão.
Captura de vídeos: Na Figura 44 é apresentado o fluxo de telas desde o re-
gistro de uma manobras realizada até a sua publicação na rede.

63
Figura 44 - Captura em vídeo e publicação de uma manobra

64
6 CONSIDERAÇÕES FINAIS
O presente estudo buscou o desenvolvimento de uma proposta de um aplica-
tivo para smartphone direcionado ao segmento esportivo do skate para viabilizar o
registro e o compartilhamento de vídeos de manobras de praticantes do esporte no
formato de rede social. A partir de pesquisa realizada com 100 praticantes de skate
para caracterização do público-alvo pôde-se identificar que o perfil de usuários com-
preende especialmente jovens com idades entre 16 a 30 anos (68%), do sexo mas-
culino (94%), que andam de skate pelo menos três vezes na semana (60%). Ainda
foi possível levantar as informações de que a maioria possui smartphone (95%, sen-
do 57% deles dispositivos Android) e o utilizam para registrar vídeos de manobras
(73%) e compartilhá-las em redes sociais (61%). Tal caracterização oportunizou,
além de delimitar o público do projeto, a constatação de que o conteúdo gerado pe-
los praticantes encontra-se fragmentado em diversas redes sociais. Desta forma,
configura-se um cenário de dúvida aos usuários a respeito de qual o melhor lugar
para compartilhar esse tipo de conteúdo e, portanto, uma demanda concentrada.
Para entender melhor o cenário atual, foi realizada uma análise de similares e
referências já atuantes no mercado. Com isso, foram levantadas informações pri-
mordiais para definir o escopo do projeto. Desde o seu início, o desenvolvimento do
produto foi pensado a partir da função de interação mais básica proposta, o registro
do vídeo de manobras, seguido da forma que o usuário poderá compartilhar o con-
teúdo com outros usuários da rede. Isto tudo resultou em um produto mínimo viável
(MVP).
Eric Ries (2011) defende que o objetivo de um MVP é testar hipóteses rele-
vantes relacionadas ao negócio do produto. Trata-se da uma forma ágil de gerar um
ciclo de desenvolvimento, no qual se constrói uma versão enxuta do produto, colo-
cando-o no mercado pra mensurar seu impacto e aprender com os feedbacks dos
usuários o mais rápido possível e, assim, reiniciar o ciclo.
Deste modo, entende-se que o presente estudo apresenta um produto com
potencialidades para o mercado, apresentando os requisitos mínimos para sua fun-
cionalidade, entendendo que seu próprio teste com o público-alvo poderá auxiliar em
seu aprimoramento. Sugere-se que sejam desenvolvidas novas etapas a fim de tes-
tar a validade das propostas e ressalta-se a importância de colocar o MVP à prova
no mercado para verificar a aceitação do produto perante seu público-alvo. Ainda,

65
faz-se importante coletar feedbacks para aprimorar o produto em um processo con-
tínuo, assim como a testagem de formas de monetização para o serviço, a partir da
inserção de formatos de publicidade de marcas do segmento dentro do produto.
Deste modo, destaca-se a necessidade de continuidade de esforços para tornar viá-
vel a consolidação do produto, apresentando soluções atrativas para suprir as de-
mandas do mercado.

66
REFERÊNCIAS
BONSIEPE, G. (Coord.). Metodologia experimental: desenho industrial. Brasília:
CNPq, 1984.
BROD J., M.. Engenharia de Produção Inclusiva: A Linguagem Gráfico-Verbal,
Gráfico-Visual e Gesto-Visual para Atividades de Produção. Tese (Doutorado em
Engenharia de Produção) – Programa de Pós-Graduação em Engenharia de
Produção, Universidade Federal do Rio Grande do Sul, Porto Alegre, 2009.
CORTES, C. Color in Motion Thesis for the Master of Fine Arts Computer Graphics
Design Rochester Institute of Technology, 2003 Disponível em: <
http://www.mariaclaudiacortes.com/colors/Colors.html>. Acesso em 15 de jun de
2015.
CRUMLISH, C. & MALONE, E. Designing Social Interfaces. 1nd ed. Sebastopol:
O’Reilly Media, 2009.
GARRETT, J. J.. The Elements of User Experience. New York, NY – USA: AIGA –
American Institute of Graphic Arts, 2003.
GOMES, L. A. V. N.. Criatividade e design: um livro de desenho industrial para projeto
de produto. Porto Alegre: sCHDs, 2011.
LÖBACH, B. Desgin Industrial. Bases para a configuração dos produtos
industriais. São Paulo: Editora Blucher, 2007.
MARTIN, B & HANINGTON, B Universal Methods of Design: 100 ways to
Research Complex Problems, Develop Innovative Ideas, and Design Efferctive
Solutions. Rio de Janeiro: Rockport Publisher, 2012.
MEURER, H. Ferramenta de Gerenciamento e Recomendação como Recurso na
Aprendizagem Baseada em Projetos em Design. Porto Alegre RS: Tese
(Doutorado) - UFRGS - CEINTEC PPGIE, 2015.
NIELSEN, J. Ten Usability Heuristics for Interface Design. 1995. Disponível em:
<http://www.nngroup.com/articles/ten-usability-heuristics/ >. Acesso em: 3 mai. 2015.
RIES, E. The Lean Startup. New York: Crown Business, 2011.
WANGENHEIM, G. V. C & BORGATTO, F. A. MATCH – Measuring Usability of
Touchscreen Phone Applications. Disponível em: < http://www.gqs.ufsc.br/match-
measuring-usability-of-touchscreen-phone-applications/>. Acesso em 30 de abr. de
2015.
WHEELER, A. Design brand identity: an essential guide for the entire branding team.
3. Ed. Hoboken: John Wiley & Sons, 2009

67
APÊNDICE – GERAÇÃO DE ALTERNATIVAS
Estudo do cartão de vídeo.

69
Estudos para identidade visual

70
ANEXO A – MATCH – CHECKLIST PARA AVALIAÇÃO DA USABILIDADE DE
APLICATIVOS PARA CELULAR TOUCHSCREEN

WALL TRICKS APP: Aplicativo para registro e compartilhamento de manobras de skate na internet

Recommended

Recommended

More Related Content

Similar to WALL TRICKS APP: Aplicativo para registro e compartilhamento de manobras de skate na internet

Similar to WALL TRICKS APP: Aplicativo para registro e compartilhamento de manobras de skate na internet (20)

Recently uploaded

Recently uploaded (9)

WALL TRICKS APP: Aplicativo para registro e compartilhamento de manobras de skate na internet