O que é Transport for London? Transport for London ou TfL é o departamento do governo responsável por coordenar a maioria dos aspectos do sistema de transporte da cidade de Londres na Inglaterra.

É estimado que pelo menos 75% dos habitantes de Londres usam frequentemente o site da TfL, seja para planejar como chegar de um lugar ao outro na cidade ou para pagar multas, comprar tickets de transporte, e outros. Temos cerca de oito milhões de visitantes únicos por mês e a cada ano recebemos uma média de 250 milhões de visitas.

Trabalho há cinco anos na TfL e há mais ou menos um ano fui escolhido para liderar o time de desenvolvimento de web do nosso novo website (temos times exclusivos cuidando das partes de API/data, design, conteúdo etc). No dia 25 de junho, lançamos a versão beta do nosso site, e é um pouquinho sobre o processo usado na criação desse site que vou falar abaixo.

Desafios

Site atual da Transport for London

O site atual da TfL foi criado em 2007 e desde então mudou muito pouco. Com o aumento da quantidade de visitantes, o surgimento de vários meios de acesso à Internet, o aumento da velocidade de acesso e a possibilidade de uso de várias novas tecnologias, o nosso site precisava mudar. A Transport for London dá extrema importância às necessidades dos usuários, seja em estações de metrô, mídia impressa ou na experiência online.

Entre nossos maiores desafios estavam:

• O site deve funcionar perfeitamente em todos os tipos de dispositivos disponíveis para acesso à Internet.
• Deve lembrar jornadas, locais e preferências dos usuários.
• Deve entender a localização do visitante.
• Tem que tornar mais rápida e fácil a navegação dos usuários, principalmente aqueles que estiverem em dispositivos móveis.
• Aumento de performance.
• Integração com mais de 150 diferentes websites e serviços.

Após muita conversa com o público, fóruns e questionários, ficou estabelecido que os nossos usuários precisavam de um website mais simples, rápido e acessível (e quem não precisa?). Precisavam também de um sistema mais integrado que não desperdiçasse seu tempo com a necessidade de utilização de diferentes ferramentas e sites.

Solução

Para tornar tudo isso realidade, nós começamos um projeto totalmente novo. Não foi um redesign. Mudamos tudo, desde a forma como as pastas eram organizadas no servidor, passando pela linguagem de programação, integração com CMS até o processo de deployment.

Em cada etapa, foi dada extrema atenção às necessidades, aspirações e limitações dos usuários finais do nosso site. Um processo chamado user-centred design ou UCD. Para tanto, a TfL contratou empresas especializadas em UX, desenvolvimento e teste, e trouxemos mais de uma centena de profissionais para trabalhar com a gente dentro de nosso escritório no centro de Londres.

A cada etapa, o design foi testado com pessoas reais para ter certeza de que a nossa criação estava funcionando.

Bem cedo no projeto, o nosso time de UX mostrou desenhos simples (em papel mesmo) para os usuários, para poder rapidamente explorar ideias diferentes. Só depois criaram wireframes (ainda simples, sem cor ou imagens), e apenas mais um tempo depois foram apresentados e testados os layouts mais próximos das versões finais usadas no site.

Alguns testes foram feitos em salas dedicadas à usabilidade, onde os participantes eram observados enquanto utilizavam os dispositivos. Muitas vezes, desenvolvedores e designers também assistiam aos testes para saber exatamente como o que eles estavam criando era recebido pelos usuários. Um processo extremamente útil dentro do nosso time de desenvolvimento, além de ser uma experiência nova para muitos deles.

Guerrilla testing

Outros testes foram feitos nas ruas e estações de metrô, onde os usuários tentavam resolver problemas reais. Esse tipo de teste é rápido e barato; uma forma de coletar insights de pessoas em situações reais. Pode ser usado em qualquer fase do projeto e nos deu um feedback geral, além de responder a algumas questões específicas vindas de desenvolvedores e designers.

Um time de pesquisadores passou o dia em uma estação movimentada de metrô no centro de Londres, onde testaram algumas funcionalidades do site, como o nosso “quadro de chegadas e partidas dos trens em tempo real”, a ferramenta “perto de mim” (que é usada para mostrar outras estações, bicicletas de aluguel, pontos de ônibus, lugares de interesse e outras informações, tudo baseado na localização do usuário), a ferramenta “journey planner” – entre outros. O design de algumas funcionalidades foi totalmente modificado com base nos resultados dessa pesquisa.

O local do teste foi perfeito, pois nosso time conseguiu falar com pessoas do público com diferentes conhecimentos de transporte em Londres, de diferentes níveis de conhecimento tecnológico e diferentes experiências anteriores com nosso website.

User testing e iterações design

Fizemos vários testes com usuários a cada iteração de nosso design. No final, pelos comentários de nossos usuários, nós acreditamos que a homepage está limpa e bem estruturada com os serviços principais com devido destaque. As imagens de fundo dão balanço e são sempre baseadas no icônico estilo do London Transport. Informação para segmentos menores foram movidas para o rodapé da página, mas ainda têm fácil acesso.

Acessibilidade

Como a TfL é parte do governo britânico, nós damos muita importância à acessibilidade do site, não só porque é requerimento do projeto, mas também porque é requerido por lei. O site foi testado com usuários com várias deficiências, e o feedback desses testes também moldou muito o nosso resultado até agora.

Resultados

Ainda estamos em fase beta, mas já podemos ver alguns resultados até agora.

• O site é mais rápido que o atual, mesmo com mais assets e imagens com maior definição.
• Não importa qual dispositivo esteja utilizando, o usuário tem acesso a todas as funcionalidades do site.
• A geolocalização possibilita que o usuário possa planejar sua jornada partindo de sua localização precisa, mostrando ainda informações como possíveis problemas nas rotas escolhidas.
• O número de passos requeridos para planejar uma rota foi diminuído para que os usuários tenham uma experiência mais rápida quando estão em transito.
• O site mostra quando chega o próximo meio de transporte (ônibus, trem, metrô) no ponto onde o usuário está.

E ainda:

• Novo design para dar uma excelente experiência para o usuário, seja em mobile, tablet, desktop, smartTv e virtualmente qualquer outro dispositivo.
• Um Journey Planner mais simples, rápido e fácil de usar.
• Mapas integrados com Journey Planner.
• Updates mais rápidos dos serviços.
• Novo conteúdo e navegação.

TfL atual vs. TfL beta

Homepage atual – Homepage nova

 

Journey Planner atual – Journey Planner novo

Journey Results atual – Journey Results novo

Apesar de o site ser maior em peso, ele é mais rápido em performance. A expectativa é uma melhora ainda maior de performance, já que o site ainda está em beta e não utiliza toda nossa infraestrutura. As imagens grandes não são carregadas quando o site é utilizado em devices com telas menores, o que faz o site ser mais rápido quando você precisa disso.

Aprendizado

Apesar de trabalhar na TfL por mais de cinco anos, começar um projeto desse tamanho do zero, sem reaproveitar nada do site anterior (nem mesmo a infraestrutura) está sendo um desafio enorme. E não há nada melhor para o nosso tipo de trabalho que vencer desafios.

Junto ao time de Web (designers e developers), aprendemos muito trabalhando todos juntos com o time de UX, vendo como cada experiência do usuário é igualmente importante para nós e como UX foi importante nas decisões tomadas no design e no desenvolvimento do projeto. Fizemos o máximo para equilibrar modernidade, interatividade com acessibilidade e facilidades de uso.

Próximos passos

Ainda há muito por fazer. O nosso próximo passo a curtíssimo prazo é habilitar o login para dar uma experiência personalizada para o usuário (no momento, informações como jornadas, buscas recentes, estações de metrô, pontos e rotas de ônibus favoritas são salvos sem login, somente no dispositivo usado pelo usuário). Temos funcionalidades com datas definidas já pelos próximos três anos.

Se conseguiu chegar aqui no final, obrigado. Se ainda não está satisfeito e quer mais informações (então você se parece muito comigo), entre em contato no Twitter, LinkedIn ou deixe um comentário abaixo. Você também pode acompanhar mais sobre o projeto no endereço blog.tfl.gov.uk.