Case Study — Oficina de Olaria e Azulejaria de Tomar

5 min readJun 15, 2021

Cenário

Devido à pandemia, o governo português decidiu apoiar pequenas e médias empresas a se tornarem digitais. O governo está a disponibilizar um programa orçamental para que as empresas possam criar uma plataforma digital de modo a agilizar os seus negócios. Cada pequena e média empresa decidiu contratar diferentes designers para se considerarem várias propostas em experiências de UX/UI.

A Oficina

Situada no Convento de São Francisco em Tomar, a Oficina de Olaria e Azulejaria conta com a colaboração de sete artesãs, as quais trabalham de forma independente nas áreas da olaria e da azulejaria.

A Oficina tem uma característica muito própria. Derivado do facto de ser um espaço aberto aos visitantes, é-lhes possível ver como os trabalhos são executados, o que permite aos visitantes a possibilidade de comprarem uma recordação, feita ou não na hora, caso assim o desejarem.

A preservação da arte e tradição, bem como a promoção da cidade de Tomar são os valores pelos quais a Oficina se rege.

Devido à pandemia, a Oficina foi severamente afetada ao nível financeiro, uma vez que o negócio é suportado pelo turismo e pela venda de artigos. Além disso, a Oficina apresenta uma comunicação digital fraca, dificultando assim a divulgação dos seus produtos.

O projeto

Com o objetivo de se maximizar o negócio propôs-se a criação de um website, uma vez que é através dos websites que na maioria das vezes os clientes têm o primeiro contacto com as marcas.

O website tem como objetivo principal oferecer aos seus utilizadores um canal de comunicação dedicado, permitindo, de uma forma rápida e dinâmica:

A divulgação e promoção dos bens e serviços oferecidos pela Oficina (workshops, forno comunitário e a venda de artigos);
Facilitar os procedimentos para a inscrição nos workshops;
A comercialização dos produtos comercializados pela Oficina;
Apoiar o comércio local.

Happy Path

Antes de se começar a desenvolver o protótipo do website, começou-se por se criar um happy path, o qual consiste num cenário onde toda a experiência do utilizador corre como planeado, ou seja, não ocorrem erros durante o seu percurso e o utilizador tem uma boa experiência na utilização da interface.

O happy path é constituído pela descrição dos passos mais importantes que o utilizador tem de fazer até completar o seu percurso, apresentando ainda as funcionalidades de cada passo.

Desta forma, optou-se por se fazer o happy path dos workshops, sendo que o protótipo que se desenvolveu foi baseado neste flow.

Sketches

No papel, começou-se por se idealizar a estrutura do website, bem como o user flow definido no happy path.

Mood board

De seguida, procedeu-se a uma pesquisa visual a fim de se delinear a estética mais indicada para a Oficina.

O objetivo de uma mood board consiste em conseguir-se captar a essência da marca através de imagens.

Style Tiles

Para complementar a mood board, conceberam-se os style tiles.

Foi neste passo que se definiu a estética a adotar, incorporando elementos de design como a tipografia, a iconografia, as cores e os botões.

Wireframes · Mid-Fidelity

Depois de se definirem os style tiles, o website começou a ganhar forma.

Na imagem abaixo é possível observarmos alguns ecrãs dos wireframes, sendo que a ação principal é a de encontrarmos um workshop.

É de notar que alguns dos ecrãs apresentados na imagem sofreram alterações.

**Wireframes em Mid-Fidelity** (alguns ecrãs)

Wireframes · High-Fidelity

Tendo como base os wireframes já elaborados bem como os style tiles, desenvolveram-se os wireframes em high-fidelity, como é possível observar na imagem abaixo.

**Wireframes em High-Fidelity** (alguns ecrãs)

Foi com base nestes wireframes que se partiu para a realização do protótipo com interações. Sendo que a user flow testada foi a seguinte:

1) **Encontrar a Lista dos Workshops**— 2) **Escolher um Workshop** — 3) **Fazer a inscrição no Workshop**

Testes de Usabilidade

Para testar o protótipo desenvolvido a partir dos wireframes em high-fidelity, contou-se com a participação de seis utilizadores.

Os testes tiveram como como objetivos:

Testar a forma como é que o utilizador encontra a lista de workshops;
Testar os filtros da página dos workshops;
Testar o processo de inscrição de um workshop.

De forma a conseguir atingir os objetivos definidos, dividiu-se o teste em duas áreas para serem testadas, sendo que se deram aos utilizadores duas tarefas para serem cumpridas, designadamente, na primeira área a ser testada a lista dos workshops e os filtros, e na segunda área o processo de inscrição num workshop.

Resultados dos testes

As opiniões dos participantes foram no geral positivas.

Acolheram-se diversos comentários positivos em relação à paleta de cores escolhida, e por todo o processo ter sido rápido e intuitivo.

Aspectos Positivos:

Todos os utilizadores afirmaram que foi muito fácil encontrar a lista dos workshops e que os filtros rápidos foram uma grande ajuda na sua experiência. Também referiram que o botão de inscrição no workshop foi intuitivo

Aspectos Negativos:

O botão dos filtros não foi perceptível para todos os utilizadores, sendo que um deles afirmou que não percebeu que podia clicar no botão.
No processo de inscrição do workshop um dos utilizadores referiu ter sentido a falta do botão de retroceder quando se encontrava na página para o início da sessão, como no momento do check out.

Embora os resultados dos testes se tenham revelado de um modo geral positivos, procurou-se considerar os aspectos menos positivos e que atrás foram mencionados, pelo que alguns desses elementos foram sujeitos a alterações.

Alterações que foram feitas

A categoria “crianças” foi adicionada aos filtros rápidos;
O botão dos filtros passou a ter um hover;
Um botão de retroceder foi adicionado nas páginas de iniciar sessão e no check out;
O botão — voltar para a lista dos workshops — passou a ter mais destaque.