Redesign do portal ouvidoria de fortaleza

Identidade Visual &
Redesign do Portal
Portal Ouvidoria de Fortaleza
RESPONSÁVEIS PELO PROJETO: Daniela Fontinele - Laura Gris Mota - Patrick Nobre
1Escopo do
Trabalho
Processo de
trabalho
Redesenho
do Portal
Soluções
propostas
Entregas para
implantação
2 3 4 5

1
Escopo
do
trabalho
CRIAÇÃO DE NOVA IDENTIDADE VISUAL
DO PORTAL DA OUVIDORIA DE FORTALEZA
Objetivos
Criar nova identidade visual (IDV)
Redesenhar as telas do portal - na visão cidadão
Entregas
Wireframe do portal em alta de nição
Pacote de arquivo com assets (imagens e outros elementos)

acesso às telas
e kickoff
13 de outubro
apresentação
da idv
3 de novembro
aprovação da
idv
6 de novembro
entrega
parcial
16 de novembro
entrega dos
pacotes finais
3 de dezembro
Percurso temporal

Processo
de
trabalho
04 REDESIGN OUVIDORIA DE FORTALEZA
Exploração
Etapas percorridas
Familiaridade com o ambiente a ser trabalhado - 28 telas enviadas
Experimentação
Conhecimento das interações entre as páginas.
Entendimento
Compreensão das funções necessárias para o desenho dos elementos.
Criação estética
Aplicação dos elementos estéticos (cores e formas) às páginas funcionais.
2

Explorando
A primeira etapa do trabalho foi
explorar o escopo - as telas
enviadas.
Nesse processo, primeiro
identi camos os elementos
presentes nas páginas e suas
características.
05 OUVIDORIA DE FORTALEZA
Botões >> con rmação,
cancelamento, submissão, login
Menus de navegação >> na página,
nas ações do per l
campos de formulário >> texto curto,
número (telefone, CPF...)
Botões, menus de navegação, campos
de formulário, hierarquia de texto
O segundo momento foi
compreender as funções dos
elementos identi cados.

Experimentando
Foi realizada a navegação no
portal, desde a criação de um
cadastro até a conclusão de uma
Manifestação.
Dessa forma, foi possível entender
os mecanismos de interação entre
as páginas.
Nesse processo, foi identi cada a
necessidade de repensar algumas
interações para o redesenho.
Alguns fluxos de página e
interações apresentaram
comportamentos que contrariam
conceitos de usabilidade em web.
A avaliação de usabilidade foi baseada na
percepção e experiência dos responsáveis por
esse projeto e ainda carece de pesquisa de
usabilidade estruturada para con rmação das
percepções.

Entendendo
Com o conhecimento dos
elementos das páginas e da
experiência de navegação, foi
possível de nir as necessidades de
redesenho.
O redesenho iniciou com a
concepção do wireframe - o
esqueleto da nova organização dos
elementos em cada página e os
estudos de interação entre eles.

Criando
A criação estética é a escolha ideal
de cores, formas e imagens que
tornam os ambientes digitais
agradáveis e otimizam a
experiência do usuário.
COR PRIMÁRIA
#005E62
COR SECUNDÁRIA
#58B39C
COR DE DESTAQUE
#FFB229
Paleta de cores
As cores são determinantes para a
identidade e padrão visual do
ambiente online.
A escolha das cores foi feita com
base naquelas da identidade visual
da Prefeitura de Fortaleza. Assim,
garante-se a consistência e ser
relaciona, visualmente, o portal da
Ouvidoria, como parte integrante
dos serviços da Prefeitura.
COR DE FUNDO
#F1F1F1

Redesenho REDESENHO BASEADO EM AÇÕES X REDUNDÂNCIA.
MANTIDA APENAS A AÇÃO DE CADASTRO

Soluções
propostas
Para otimizar o usabilidade e a experiência do cidadão no Portal da Ouvidoria de Fortaleza, foram
adotadas estratégias atuais e consolidadas no campo de UX.
A impossibilidade de realização de testes de usabilidade foi um limitador para escolhas de
soluções inovadoras. Mesmo assim, a expertise da equipe permitiu escolhas testadas em
contextos e/ou ambientes semelhantes.
Na sequência, listamos algumas dessas escolhas.
Algumas estratégias
4

Grid
As distâncias de referência para
distribuição dos elementos no
ambiente online se chama grid.
O grid do portal foi atualizado para
o padrão de 12 colunas.
Sistema de 12 colunas

A escolha da fonte garante
legibilidade. O melhor fluxo de
comunicação é otimizado com a
hierarquia de importância refletida
no texto.
O portal foi redesenhado usando a
fonte Roboto. Essa fonte foi
concebida pelo Google e é a
referência para os seus dispositivos
mobile.
A família de fontes Roboto é de uso
livre.
H1 - Título de abertura - 58 pt Regular
Fontes e texto
H2 - Título das páginas - 32 pt Regular
H3 - Títulos dos formulários - 24 pt Regular
Parágrafo - 16 pt Regular
Texto de apoio - 14 pt Regular
Roboto

Imagens harmonizam o design e
também contribuem para
comunicação e interação no porta.
Foi escolhido o estilo flat, uma
tendência atual nos ambiente web.
Foram desenhados ícones
especí cos para representar os
tipos de manifestação.
A iconogra a de comunicação e
interação geral foi escolhida de
forma a facilitar a implementação
por meio de bancos de ícones e
imagens, como Bootstrap.
Imagens

Os textos são a conversa entre o
cidadão e o sistema. O tom e a
forma contribuem para
ambientação, acolhimento e
comunicação com o usuário.
Foi realizada reescrita dos
principais textos de interação
cidadão-portal. O tom escolhido foi
mais descontraído e a forma de
conversa direta foi implantada.
Botões e ações principais
ganharam novos textos, para
facilitar o entendimento do
cidadão.
Copyright

5
Entregas
para
implantação
24 REDESIGN OUVIDORIA DE FORTALEZA
Arquivo em Figma - acesse o arquivo
Entregas para implantação
Layout de todas as páginas correspondentes ao fluxo de uso do cidadão.
Fluxo de uso simulado.
Assets - acesse os componentes
Componentes em imagens nos formatos *.sgv *.png *.ai
Apoio
Email de contato para dúvidas sobre implantação: lauragris@antbuzz.org

Design e UX
Daniela Fontinele
Responsáveis pelo projeto
UX e Comunicação
Laura Gris
UI e UX
Patrick Nobre

Redesign do portal ouvidoria de fortaleza

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Redesign do portal ouvidoria de fortaleza

Semelhante a Redesign do portal ouvidoria de fortaleza (20)

Redesign do portal ouvidoria de fortaleza