Capítulo 4: Outros Trabalhos 30
4.2. Auto-‐propostos 31
Mockup de site "Irmandade do Natão" (fig. 51, p. xx)
Nas primeiras semanas do estágio percebi que, de vez em quando, aparecia no refeitório uma caixa de pastéis de nata de acesso restrito a apenas alguns funcionários. Informei-‐me e fiquei a saber que se tratava da dinâmica de um grupo chamado “Irmandade do Natão”. Na sequência desta descoberta, e sendo eu apreciador da iguaria, quis fazer parte no grupo.
Sendo que a dinâmica era regida por regras próprias e havia informações partilhadas exclusivamente dentro do grupo, propus fazer o design de um site que apresentasse a referida Irmandade. Assim, num dos Dias Criativos apresentados no capítulo de
caracterização da empresa (p. xx), fiz uma entrevista aos fundadores do grupo de modo a gerar conteúdo, organizei esse conteúdo por várias secções e esbocei o layout da página
web. Escolhi dois tipos de letra e um esquema de cores e projectei uma identidade gráfica
para a Irmandade. Seleccionei uma imagem apropriada para o topo do site e, com todos estes elementos no “Sketch”, fiz vários ajustes de design de comunicação (como a posição e escala dos elementos), até produzir o resultado final. O mockup foi entregue a um front-‐end
developer para ser implementado na web.
Logótipos "Premium Ideas" e "Eureka" (fig. 52, p. xx)
Sendo que uma das áreas da minha formação base é a criação de identidades gráficas, um dos meus Dias Criativos começou por perceber se esse serviço não poderia ser útil a algum dos projectos em curso na empresa. Marquei uma curta reunião com os colegas que me reponderam ao email que enviei a colocar essa questão e, com eles, produzi briefings para
cada um dos logótipos que eram necessários, um dos quais foi por mim executado: um logo para a plataforma de inovação da Premium Minds.
Com o projecto principal, o Pictty, estava a perceber que por vezes as primeiras ideias que surgiam no brainstorming eram as melhores. Para além disso, ao longo das várias iterações iam-‐se abandonando boas soluções que voltavam a ser trazidas de volta mais tarde. Tendo isto em consideração, decidi que não ia perder mais do que cinco minutos no
brainstorming e, também, que ia levar a ideia escolhida até à sua concretização, sem perder
tempo a vaguear por inúmeras possibilidades.
Para a plataforma de inovação da Premium criei então um logótipo que consiste na representação de uma cabeça cheia de ideias acompanhada pelo nome “Premium Ideas”. A administração da empresa não gostou e pediu-‐me para fazer um outro logótipo a partir da palavra “Eureka”. Então, criei um símbolo que representa, simultaneamente, uma lâmpada e uma planta a germinar. Esta última proposta foi aprovada e adoptada.
Conclusão e Considerações Finais
Foi um grande privilégio ter podido estagiado na Premium Minds. Não só por ser uma
Software House reconhecida no mercado pela sua excelência, como especialmente pela
cultura empresarial e pelas pessoas com quem me relacionei. Fui recebido por todos com hospitalidade e aprendi bastante com a sua experiência. Trabalhei com colegas das
disciplinas mais variadas num ambiente informal e propício à criatividade. Verifiquei que os valores da empresa (a honestidade, o respeito, a responsabilidade e o brio profissional) eram de facto postos em prática e pude participar numa série de eventos onde criei laços de amizade com vários colaboradores.
Tive também o grande privilégio de trabalhar com um cliente experiente e aberto à inovação. Na relação com o cliente e com o product manager, para meu benefício, integrei alguns dos princípios da filosofia Agile (fig. 53 , p. xx). Compreendi o quão importante é evitar despender tempo de trabalho em aspectos que não sejam prioritários, e percebi que é desejável ser acompanhado com frequência, mesmo que os avanços no projecto, entre reuniões, não sejam visivelmente significativos. Aprendi ainda que é mais importante criar o produto em si do que acessórios que o documentem e, sobretudo, constatei que a correcta e eficaz comunicação oral das decisões de design é tão importante como essas mesmas decisões.
Foi-‐me confiado o trabalho de UX e UI design de uma aplicação web ambiciosa e tive que estudar e aprender bastante para estar à altura do desafio. Tive que pensar e desenhar soluções para uma plataforma com vertentes tão diversas como rede social, dinâmicas de votação, gamification, gambling e upload de imagens. O projecto passou por fases de UX
research, nas quais fiz benchmarking e fluxos de utilizador. Desenhei wireframes para
inúmeras páginas, secções e componentes e apresentei walktroughs. Fiz um protótipo em papel e realizei um teste de usabilidade numa fase inicial do projecto. Fiz mockups e procurei ser coerente nos componentes desenhados. Passei o meu trabalho ao front-‐end
developer e a plataforma foi realmente implementada.
O estágio teve também alguns aspectos mais difíceis. No entanto, reconheço agora, depois desta experiência e do muito que com ela aprendi, que grande parte dos problemas por que passei se deveram à minha (ainda) pouca capacidade de comunicação em
ambientes empresariais. As fases de research —análise da concorrência, criação de
personas e desenho de fluxos de utilizador— e mesmo os testes de usabilidade, não eram, à
data, muito valorizadas pelo cliente; foi-‐me indicado, portanto, que não realizasse algumas etapas importantes no processo de design que acredito que podiam ter enriquecido o produto final. Também na fase de wireframes acabei por entrar em demasiados detalhes visuais, enquanto que, na verdade, deveria ter focado esse momento no aspecto funcional da aplicação. Despendi ainda demasiado tempo em sucessivas iterações de criação de textos, o que seria solucionado se existisse na equipa uma pessoa especializada em escrever conteúdo.
No que se refere às metodologias de design que tentei implementar —Design Responsivo e Design Atómico— reconheço que posso não ter conseguido explicá-‐las com os argumentos mais apropriados e no momento certo; tendo o cliente optado por
metodologias mais antigas, antevejo que podem surgir vários obstáculos quando se quiser apostar em tornar o Pictty numa aplicação responsiva. Por outro lado, como não segui devidamente a metodologia de design atómico, o trabalho do front-‐end developer ficou também mais dificultado e demorado do que se lhe tivesse sido entregue um documento com um sistema coerente de web components. A metodologia de design e front-‐end seguida na concepção do Pictty esteve muito próxima do modelo waterfall e, deste modo, alguns recursos não foram optimizados.
Outro aspecto no qual surgiram algumas dificuldades foi a escolha e articulação das diferentes ferramentas usadas. Embora não tenha chegado a utilizar nenhuma ferramenta de criação de mind maps, em projectos desta natureza e com esta complexidade parece-‐me que a utilização de softwares para o efeito pode ser uma ajuda importante, especialmente para a concepção de fluxos de utilizador.
A passagem do Balsamiq para o Sketch foi outro dos momentos que poderia ter sido optimizado com o auxílio de uma ferramenta adequada; considero que teria sido mais ágil desenhar os wireframes de baixa fidelidade no Sketch e, na fase de design visual, aumentar a fidelidade dos componentes, ou seja, usar o Sketch para ambos os momentos.
A minha necessidade de compreender tudo, até ao mais ínfimo pormenor, num estádio inicial do trabalho, foi outro aspecto que me levou a despender demasiada energia. Nesse contexto, desenhei todos os detalhes para assim os compreender. Esta abordagem não só consumiu muito tempo como, por vezes, me deixou mentalmente exausto. Aprendi, com esta experiência, que no início do projecto se deve desenhar apenas os aspectos cruciais, que permitam ter a noção do todo, deixando os pormenores para depois.
Quanto aos testes de usabilidade, constatei que é preferível serem realizados várias vezes ao longo do projecto, mesmo que de modos muito simples. O ideal é testar o
protótipo com utilizadores finais mas, independentemente do perfil do utilizador, os testes de usabilidade trazem sempre indicações valiosas, e é de extrema importância que o cliente e o designer participem nos testes como observadores. Estes devem ir anotando os
problemas encontrados e, no final do teste, organizá-‐los e priorizar as alterações. Deste modo, poupam-‐se várias horas a ver gravações e possibilita-‐se que os resultados dos testes sejam accionáveis.
Outra dimensão geradora de ansiedade foi o facto de ter que ir a reuniões onde sentia que era impossível levar concluído o que ia ser discutido. Aprendi que é muito importante gerir as espectativas do cliente e ir mostrando avanços ao projecto, ainda que pequenos, com maior frequência. Deste modo, os clientes ficam mais satisfeitos e existe mais espaço para uma comunicação genuína. No entanto, este acompanhamento constante do cliente pode também propiciar que surjam demasiadas mudanças de plano, novos requisitos e iterações infindáveis. Se houver um prazo final para a entrega da totalidade do projecto, este número exagerado de iterações vai retirar tempo de trabalho a fases
posteriores igualmente importantes. Neste sentido, é indispensável limitar o número de iterações consoante os prazos e o orçamento disponíveis.
Com toda esta aprendizagem, retomo a questão que despoletou todo este estudo:
como integrar as metodologias de User Centered Design, Atomic Design e Agile Software Development?
Se voltasse a fazer um projecto semelhante no futuro idealizaria o workflow de outro modo (fig. 54, p. xx):
1. Inspirado nas metodologias Agile organizaria as fases do projecto pela entrega de
deliveries mais leves;
2. Desenharia, quer os wireframes, quer os protótipos, numa abordagem de design responsivo;
3. Começaria pelos ecrãs pequenos tendo em conta que as condicionantes do espaço iriam obrigar a equipa a priorizar os conteúdos e funcionalidades mais importantes; 4. Seriam agendados, desde o início, vários testes de usabilidade. Os testes deveriam ser
simples e, de preferência, o cliente seria observador, de modo a que os resultados fossem accionáveis. Caso a parte do projecto a ser testada não estivesse acabada quando chegasse o dia do teste, testar-‐se-‐ia o que estivesse feito.
5. O mesmo devia acontecer nas reuniões com o cliente: ser apresentado o que estivesse feito e manter um acompanhamento regular. É claro que teriam de ser limitadas as alterações de requisitos e número de iterações consoante os prazos gerais do projecto; 6. A primeira entrega ao cliente seriam walktroughs com pouco detalhe de fluxo, feitos
em papel;
7. Depois de discutida a primeira entrega, usando o Sketch e o Flinto, seria feito um protótipo interactivo de baixa fidelidade que contemplasse apenas os fluxos principais; 8. De seguida, seria decidido o aspecto visual genérico da interface, seria desenhado um
sistema coerente de componentes, mas poucos mockups. Entretanto, o front-‐end
developer já estaria bastante avançado no protótipo de HTML e, depois de algumas
iterações, a interface estaria pronta;
9. Faltaria agora ligar o front-‐end ao back-‐end da aplicação e, seguidamente, a aplicação seria posta online;
10. Daqui em diante seriam feitos testes de usabilidade remotos, análises do tráfego e
heatmaps no sentido de encontrar e resolver problemas de usabilidade na interação
dos utilizadores finais com o sistema.
Fazendo uma retrospectiva, considero que toda a minha dedicação a este projecto e ao estágio na Premium Minds foi muito bem empregue. Foi uma experiência que me
possibilitou um grande amadurecimento em termos profissionais e humanos. Considero também que obtive bons resultados, mas, quanto a isso, convido o leitor a julgar por si mesmo em pictty.com.
Bibliografia
AA.VV. (n.d.) User Interface Design Basics [Versão electrónica]. Disponível em https://www.usability.gov/what-‐and-‐why/user-‐interface-‐design.html
Anderson, Jonathan; John McRee, (2010): Effective UI. Beijing: O'Reilly;
Allen, Jesmond; Chudley, James (2012): Smashing UX Design Foundations for Designing
Online User Experiences. Chichester: Wiley;
Archer, James (n.d.): Agile design: what we’ve learned [Versão electrónica]. Disponível em http://forty.co/agile-‐design-‐what-‐weve-‐learned
Beck, Kent et al. (2001): Manifesto para o Desenvolvimento Ágil de Software. [Versão electrónica]. Disponível em
http://agilemanifesto.org/iso/ptpt/manifesto.html
Cao, Jerry (2016): The Top 10 Product Design Lessons for 2016 [Versão electrónica]. Disponível em https://studio.uxpin.com/blog/top-‐10-‐product-‐design-‐lessons-‐for-‐2016/
Colborne, Giles (2011): Simple and Usable: Web, Mobile, and Interaction Design. Berkeley, CA: New Riders;
Frost, Brad (2016): Atomic Design [Versão electrónica]. Disponível em http://bradfrost.com/blog/post/atomic-‐web-‐design/
Hay, Stephen (2013): Responsive Design Workflow. San Francisco, New Riders;
Kandy, A. J. (2016): "Y" Fidelity: Adaptive Design for Agile Workflows [Versão electrónica]. Disponível em http://blog.invisionapp.com/adapting-‐design-‐agile-‐workflows/
Krug, Steve (2014): Don't Make Me Think, Revisited a Common Sense Approach to Web
Usability. Berkeley, Calif.: New Riders;
Marcotte, Ethan (2011): Responsive Web Design. New York, Book Apart;
Morville, Peter (2004): User Experience Design [Versão electrónica]. Disponível em https://www.nngroup.com/articles/usability-‐101-‐introduction-‐to-‐usability/
http://semanticstudios.com/user_experience_design/
Nielsen, Jakob; Budiu, Raluca (2013): Mobile Usability. Berkeley, CA: New Riders;
Nielsen, Jakob (2012): Usability 101: Introduction to Usability [Versão electrónica].
Disponível em https://www.nngroup.com/articles/usability-‐101-‐introduction-‐to-‐usability/
Norman, Donald A. (2011): Living with Complexity. Cambridge, Mass.: MIT Press;
Peterson, Clarissa (2014): Learning Responsive Web Design: A Beginner’s Guide. Sebastopol, O’Reilly Media;
Premium Minds (2016): About-‐us.
Diponível em http://www.premium-‐minds.com/about-‐us/
Spencer, Donna (2010): A Practical Guide to Information Architecture. Penarth: Five Simple Steps;
Weinschenk, Susan (2011): 100 Things Every Designer Needs to Know about People.
Lista de Figuras
Figura 1 -‐ Processo do user-‐centered design ... 41 Figura 2 -‐ Ilustração sobre o design responsivo ... 41 Figura 3 -‐ Modelo do Atomic Design ... 41 Figura 4 -‐ Modelo Waterfall ... 42 Figura 5 -‐ Processo do Agile Software Development ... 42 Figura 6 -‐ Diagrama representativo dos colaboradores e equipas da Premium Minds ... 43 Figura 7 -‐ Colaboradores da Premium Mind ... 43 Figura 8 -‐ Diagrama representativo do fluxo de uma imagem no Pictty ... 44 Figura 9 -‐ Diagrama com estrutura de duelos e de votadores por cada competição do Pictty ... 45 Figura 10 -‐ Diagrama representativo dos resultados de competição de uma imagem no Pictty ... 45 Figura 11 -‐ Diagrama representativo das fases de trabalho planeadas inicialmente ... 46 Figura 12 -‐ Alguns dos mindmaps das tarefas principais da aplicação e fluxos de utilizador ... 47 Figura 13 -‐ Mapa do site na fase inicial do projecto ... 47 Figura 14 -‐ Wireframe dos dois estados da barra de navegação numa fase inicial do projecto ... 47 Figura 15 -‐ Frames de um dos walktroughs apresentados de forma linear ... 48 Figura 16 -‐ Frames da gravação de um dos testes de usabilidade ao protótipo de papel ... 49 Figura 17 -‐ Alguns dos elementos e componentes do guia de estilos do Pictty ... 50 Figura 18 -‐ Primeiro wireframe da homepage do Pictty ... 51 Figura 19 -‐ Outros wireframes da homepage do Pictty ... 51 Figura 20 -‐ Mockups da homepage do Pictty ... 51 Figura 21 -‐ Wireframe da página “my votes” ... 52 Figura 22 -‐ Wireframe de momento e modal de aquisição de “badge de votador” ... 52 Figura 23 -‐ Mockup da página “my votes” ... 52 Figura 24 -‐ Primeiros wireframes da página “my pictures” e modals de resultados de competição .. 53 Figura 25 -‐ Wireframes da página “my pictures” e sistema de cartas ... 53 Figura 26 -‐ Wireframes do separador “portfolio” da página “my pictty” e sistema de cartas ... 54 Figura 27 -‐ Mockups do separador “portfolio” da página “my pictty” e sistema de cartas ... 54 Figura 28 -‐ Wireframes e mockups da “picture page” e sistema de painéis ... 54 Figura 29 -‐ Wireframes do primeiro momento da modal “add pictures” ... 55 Figura 30 -‐ Wireframes do segundo momento da modal “add pictures” ... 55 Figura 31 -‐ Wireframes da secção superior da modal “add pictures” ... 55 Figura 32 -‐ Mockups do primeiro momento da modal “add pictures” ... 56 Figura 33 -‐ Mockups do segundo momento da modal “add pictures” ... 56 Figura 34 -‐ Primeiro wireframe da “wallet” ... 57 Figura 35 -‐ Wireframe da “wallet” na barra lateral à esquerda ... 57 Figura 36 -‐ Wireframe da “wallet” na barra de navegação ... 57 Figura 37 -‐ Mockup da “wallet” ... 57 Figura 38 -‐ Primeiros wireframes da modal “deposit funds” ... 58 Figura 39 -‐ Wireframes da modal “deposit funds” ... 58 Figura 40 -‐ Mockup da modal “deposit funds” ... 58
Figura 41 -‐ Social sharing de resultados de duelo e competição e “badges de votador” ... 59 Figura 42 -‐ Botões de “Like”, “Tweet” e “G+1” e “Follow Us” presentes no “footer” ... 59 Figura 43 -‐ Mockup da modal “sign in” com botões de social login ... 59 Figura 44 -‐ Botões de importação de imagens de outras redes sociais na modal “add pictures” ... 59 Figura 45 -‐ Mockup da página “gallery” ... 60 Figura 46 -‐ Barra de perfil na página “my pictty” ... 60 Figura 47 -‐ Histórico de competição de uma imagem na “picture page” ... 60 Figura 48 -‐ Diagrama representativo do fluxo de trabalho que realmente se sucedeu ... 61 Figura 49 -‐ Cartaz “Intenções 2016” ... 62 Figura 50 -‐ Painéis e autocolantes “ORCS” ... 62 Figura 51 -‐ Mockup de site “Irmandade do Natão” ... 63 Figura 52 -‐ Logótipos “Premium Ideas” e “Eureka” ... 63 Figura 53 -‐ Ilustração de Henrik Kniberg sobre o Agile Software Development ... 64 Figura 54 -‐ Workflow para um projecto semelhante a realizar no futuro ... 65
ANEXOS
fig. 1 - Processo do user-centered design
fig. 2 - Ilustração sobre o design responsivo
Específicar Planear Implementar Testar Entregar Específicar Planear Implementar Testar Começar Entregar
fig.4 - Modelo Waterfall
Product Managers Agile Coachs Sistemas Designers Arquitectos Developers Data Scientists Qualidade Cliente
fig.6 - Diagrama representativo dos colaboradores e equipas da Premium Minds
fig. 8 - Diagrama representativo do fluxo de uma imagem no Pictty Nível 2 Nível 1 Playground Vale ainda mais dinheiro Vale ainda mais dinheiro Vale ainda mais dinheiro Vale ainda mais dinheiro Vale dinheiro Não vale dinheiro Fora do Pictty ganhar adicionar ao Pictty competir competir competir competir competir competir empatar empatar empatar empatar empatar ganhar ganhar ganhar sair de jogo perder e sair de jogo perder e sair de jogo perder e sair de jogo perder e sair de jogo recolher dinheiro e sair de jogo recolher dinheiro e sair de jogo recolher dinheiro e sair de jogo recolher dinheiro e sair de jogo recolher dinheiro e sair de jogo
carregar dinheiro, entrar no jogo e competir
ganhar, perder ou empatar Nível 3
Nível 4 Nível 5
VS Votador 5 VS Votador 3 VS Votador 6 VS Votador 2
vence y duelos
vence y duelos
vence z duelos
vence x duelos
ganha competição
empata competição
perde competição
empata competição
e nenhuma imagem rival vence x duelos
mas uma imagem rival vence x duelos
fig. 10 - Diagrama representativo dos resultados de competição de uma fig. 9 - Diagrama com estrutura de duelos e de
Protótipo Interactivo (baixa fidelidade) Protótipo Interactivo (alta fidelidade) Entrega Final Protótipo de HTML Arquitectura de informação;
Wireframes (design responsivo);
Interactividade;
UX Benchmarking; Personas;
Fluxos de utilizador;
Testes de Usabilidade (com utilizadores finais);
UI Benchmarking;
Apresentação ao cliente, PM,
front-end developer e colegas
(markteer e designer);
Testes de usabilidade remotos de larga escala;
Heatmaps e user recordings; Web Analytics;
Apresentação ao cliente; Componentes UI (atomic design);
Mockups (design responsivo);
Interactividade e motion design;
Acompanhar front-end no browser; Sugerir melhorias de design;
Iterar fase anterior com base no
feedback recolhido
Iterar fase anterior com base no
feedback recolhido
Iterar fase anterior com base no
feedback recolhido
fig. 13 - Mapa do site na fase inicial do projecto
Join Contest 1$
Join Contest 1$
Join Contest 1$
Competing…
Over empty input
Filling input again Over Filled input
Over Filled input
Over Filled input
Over Filled input
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Messages Files Activities To-do Settings
Unselected Unselected Over Over Active Active Selected Selected
Over Highest Achievement
Default Highest Achievement
Default None Highest Achievement Highest Achievement Highest Achievement Highest Achievement Focus Focus Highest Achievement Highest Achievement ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ;:_^|`!”#$%&/()=?*-.,+´\~ Proxima nova Tweet Like
Pictty, uma aplicação web para de fotografia
Ready for processing between Thu, 24 Mar 2016
Competing in Level 1
Competing… Compete in Level 2
Won Level 1 Worth 3$
Compete in Level 2
Drew Level 1 Worth 1$
Connect with Facebook
Create Account with Email Connect with Twitter
Connect with Google
Compete in Level 2
Won Level 1 Worth 3$
Leave Contest
Delete
Compete in Playground
Picture Page
Compete in Level 2
Won Level 1 Worth 3$
If you win this level your picture will worth 11$. If you lose, it will go out of contest. If you tie it will continue to worth 3$.
OK Compete in Level 2
Call to action or explanatory copy My Results Against Rivals
Picture Status: Won Level 1 Picture Value: 3$
Leave Contest Delete Picture
Compete in Playground (Free)
Share Picture
Call to action or explanatory copy My Results Against Rivals
Join Contest 1$
Picture Status: New Picture Value: 1$