Alternatripr Web App — Case Study
Uma aplicação web feita para viajantes solitários e fartos de destinos convencionais
Introdução
Este artigo trata-se do estudo de caso de todo o processo de desenvolvimento da aplicação web Alternatripr, o qual foi desenvolvido como projeto acadêmico da cadeira de Design de Interfaces do curso Pós-graduado em Digital Experience Design da Universidade de Lisboa.
O que é o produto?
Alternatripr é uma aplicação web que funciona de forma colaborativa e permite aos utilizadores viajantes uma efetiva interação através de trocas de informações e localização via GPS.
Qual o objetivo da aplicação?
O principal objetivo desta aplicação consiste em realizar a conexão entre viajantes solitários, que buscam viver a mesma experiência de viagem.
Quem usará a aplicação?
O produto foi desenvolvido para viajantes que farão a mesma rota de viagem nos mesmos locais e datas e que partilham dos mesmos objetivos, sempre focado em roteiros alternativos, alheios ao turismo convencional.
Fase 1 — Brief
A primeira fase do projeto consistiu em definir o Brief. Um documento com todas as informações relativas ao projeto foi desenvolvido com o máximo de informações possíveis para que podesse dar corpo a aplicação que estava a se construir, como: Nome do projeto, Scope, os principais objetivos da aplicação, público-alvo e o look and feel pretendido.
Fase 2 — Arquitetura de informação (Site map e User flow)
Após a definição do Brief, iniciou-se o processo de desenvolvimento do Site map da aplicação. Todas as seções e processos do site devem estar contidos neste documento para que mostre com clareza toda a arquitetura de informação. Levando-se em consideração a interação na plataforma por First time users, o processo de busca pelo usuário e o procedimento de registro foi representado através dos esquemas de User flow apresentado abaixo.
Fase 3— Wireframes
Com base no Site map, o desenvolvimento dos Wireframes de baixa fidelidade iniciou-se com o objetivo de apenas ilustrar a distribuição dos elementos servindo como um tipo de marcação. Os Wireframes definem também a estrutura de navegação, o conteúdo presente em cada seção e os principais call-to-actions da página. Nesta fase, elabora-se apenas um esboço para que se tenha ideia de como a aplicação deverá se comportar quanto a navegabilidade do produto digital.
Fase 4 — Style Tiles e Mockups
Com os wireframes definidos, o próximo passo foi partir para a parte visual da aplicação. Um guia visual chamado Style Tile foi o primeiro a ser desenvolvido pois com ele é definido os estilos tipográficos, cores, look and feel e todos os elementos que serão adotados e tem como principal função, auxiliar na criação dos mockups de alta fidelidade seguindo sempre o mesmo padrão visual.
Os Mockups de alta fidelidade por sua vez, dão uma ideia geral de como serão os layouts pretendidos antes da fase final de desenvolvimento da aplicação web.
Fase 5 — Protótipo
Após os mockups de alta fidelidade serem definidos, a fase final do projeto se inicia ao realizar o protótipo. Nesta fase, todos os elementos que ali constam serão exatamente como se apresentarão ao usuário final em termos de usabilidade, links e interações na plataforma. Para conferir o resultado final do protótipo feito no Invision, clique aqui.
Abaixo, um vídeo com o principal flow e usabilidades da aplicação Alternatripr.