iMídia TV | My Site

Um visual novo para a iMídia TV, sem mudar os caminhos que as pessoas já conhecem

IMIÍDIA TV · ESTUDO DE CASO

A Pix Mídia precisava de um sistema de TV mais atraente, mas os usuários já sabiam os fluxos de cor. Redesenhei o layout e mantive o fluxograma original, para que ninguém precisasse aprender caminhos novos.

Resumo

EMPRESA

Pix Mídia

PLATAFORMA

Web

STATUS

Em implementação, ainda não publicado.

TIPO DE PROJETO

Reformulação do sistema de TV atual da empresa.

FERRAMENTAS

Figma

PAPEL

Design de produto

DURAÇÃO

3 meses

Contexto

iMídia TV é uma plataforma corporativa de TV e sinalização digital desenvolvida pela Pix Mídia.

O produto já funcionava e era usado diariamente. O objetivo deste projeto era redesenhar a interface, não reconstruir o produto.

O desafio

O layout atual parecia ultrapassado em comparação com outros produtos da categoria. Mas uma reformulação completa acarretava um risco real: alterar os caminhos que os usuários já conheciam.

A restrição

Atualize o layout sem alterar o fluxograma existente. Cada tela, etapa e decisão deve permanecer onde os usuários esperam encontrá-las.

O objetivo

Uma interface mais atraente que ainda corresponde ao fluxograma original, para que os usuários não precisem aprender novos caminhos.

Referências

ntes de desenhar, olhei os dois concorrentes mais próximos em TV corporativa e sinalização digital como referência, para ver como eles organizam seus layouts e o que podia melhorar o layout atual da TV.

Screencorp

O concorrente mais direto no Brasil: TV corporativa e aplicativo, gerenciados num só painel. Permite pré-visualizar exatamente o que vai aparecer na TV e mostra o status de cada player em tempo real.

4YouSee

Plataforma robusta de sinalização digital para redes corporativas, franquias, varejo e mídia out-of-home. Uma referência de como gerenciar grandes redes de telas num só lugar.

O fluxograma foi a base de todo o projeto. Trabalhei em três etapas:

1. FLUXOGRAMA

2. IDEIAÇÃO

3. DECISÕES

Mapeei todo o sistema: 17 módulos, cada tela e os principais caminhos entre elas.

Explorei novos layouts para cada tela, sempre partindo do mesmo fluxograma.

Escolhi as soluções que melhoraram a aparência sem alterar nenhuma etapa do fluxo de trabalho.

Mapa do sistema: 17 módulos, agrupados por tema apenas neste caso. No produto, o menu mantém sua ordem original.

Fluxo principal: como um cliente coloca conteúdo no ar. A reformulação manteve cada etapa no mesmo lugar.

Processo

Decisões principais

MESMO FLUXO, NOVO LAYOUT

Cada tela mantém seu lugar no fluxograma. Apenas a camada visual mudou, portanto a curva de aprendizado é próxima de zero.

A COR PARA GUIAR O OLHAR

O símbolo primário 600 (#1A4B69) indica a navegação e as ações principais. Cores semânticas para sucesso, aviso e erro mostram o status dos players e do conteúdo rapidamente.

UMA HIERARQUIA VISUAL MAIS CLARA

Uma nova grade de conteúdo e uma escala tipográfica completa na fonte Roboto tornam cada tela mais fácil de visualizar, desde os títulos das páginas até os dados das tabelas.

Design System

Criei o design system do zero, baseado no layout existente do iMidia App 8. Ele documenta os fundamentos (cor, tipografia e espaçamento) e 30 componentes, para que o novo visual permaneça consistente em todos os módulos.

CORES

Cinco categorias de cores: Primária, Sucesso, Aviso, Erro e Cinza. Cada uma possui uma escala de 10 tons. Primária 600 (#1A4B69) é a cor da marca do sistema.

Paleta primária

Primary 50

#B9CFFC

Primary 100

#A3C4F8

Primary 200

#7BAAF2

Primary 300

#3E94DA

Primary 400

#007DC2

Primary 500

#0D6495

Primary 600

#1A4B69

Primary 700

#0B2C40

Primary 800

#071E29

Primary 900

#05171E

Paleta Secundária

Sucesso 800

#0A8054

Aviso 600

#FFD921

Erro 800

#8F0000

Cinza 100

#EFF0F2

Cinza 500

#797B80

Texto

#2F3033

TIPOGRAFIA · ROBOTO

Uma única fonte para todo o sistema. Os pesos a partir de 600 são negrito, 500 é médio e 400 e inferiores são regulares.

Título XXXL

Negrito · 64px · line height 80px

Título XXL

Negrito · 48px · line height 60px

Título XL

Bold · 40px · line height 48px

Título grande

Bold · 32px · line height 40px

Título md

Bold · 24px · line height 32px

Título sm

Bold · 20px · line height 24px

Legenda lg/sm

Regular · 32px · line height 40px · 24px · line height 32px

Body lg/sm

Regular · 16px · line height 24px · 14px · line height 22px

Action lg/sm

Bold · 16px · line height 24px · Regular · 14px · line height 16px

Interaction lg/md/sm

Bold · 16px · line height 24px · 14px · line height 16px · 12px · line height 14px

Caption

Regular · 12px · line height 14px

Overline

Bold · 12px · line height 14px

COMPONENTES

O sistema de projeto documenta 30 componentes, cada um com seus estados, variações e diretrizes de uso. A seguir, alguns exemplos, apresentados como aparecem no produto:

BOTÕES

ALERTAS

Três tipos: primário, secundário e terciário, em tamanhos médio e grande, com um ícone à esquerda ou à direita. A ação principal fica sempre à direita.

Quatro tipos: informação, sucesso, aviso e erro, com um botão de fechar opcional.

ENTRADA

Telas finais

As quatro telas abaixo seguem o fluxo principal, com o novo layout e o sistema de design aplicados.

PLAYER

Cada TV é um cartão com sua programação, status, versão e última comunicação. Os usuários podem alternar entre a visualização em cartão e em lista, e agrupar os players.

O status sempre utiliza uma palavra e uma cor: Online, Offline, Atualizado, Desatualizado.

MÍDIAS

Todas as formas de criar conteúdo em um só lugar.

As oito maneiras de adicionar conteúdo (upload, streaming, PDF, painel de TV, editores, criador de mídia e Canva) permanecem na mesma ordem do sistema antigo, agora como botões visíveis na parte superior.

A biblioteca exibe miniaturas e um ícone do tipo de arquivo, para que os usuários encontrem mídias sem precisar abri-las.

As regras de armazenamento e upload ficam visíveis antes do upload, o que ajuda a evitar erros.

GRADE DE PROGRAMAÇÃO

Crie o cronograma e veja o resultado.

Os tipos de conteúdo (mídia, notícias, previsão do tempo, redes sociais e outros) são botões na parte superior, na mesma ordem de antes.

A linha do tempo mostra cada item com sua duração. Os gráficos mostram o equilíbrio entre conteúdo publicitário e conteúdo de serviço público.

A página também mostra quais usuários usam essa programação, o que nos leva à próxima etapa. A ação principal, Salvar, fica à direita, seguindo o sistema de design.

CONFIGURAÇÕES DE PLAYERS

Tudo sobre uma única TV em uma única tela.

A programação em uso fica no topo das configurações: é aqui que a programação se encontra com a TV.

Números grandes mostram memória, armazenamento, CPU e temperatura de forma clara e concisa.

Os botões de alternância são usados para configurações com efeito imediato. Reiniciar é indicado pela cor vermelha e fica separado das outras ações, pois interrompe o funcionamento da TV.

Alternam as configurações que se aplicam imediatamente, conforme definido no sistema de design.

PROTÓTIPO INTERATIVO

Experimente o fluxo você mesmo

Abre em uma nova aba · Melhor no computador

Protótipo aberto