fran
A new look for iMídia TV, without changing the paths people know
IMÍDIA TV · CASE STUDY
Pix Mídia needed a more attractive TV system, but its users already knew the existing flows by heart. I redesigned the layout and kept the original flowchart intact, so nobody had to learn new paths.
At a glace
COMPANY
Pix Mídia
PLATAFORM
Web
STATUS
In implementation, not yet published
PROJECT TYPE
Redesign of the company's current TV system
TOOLS
Figma
ROLE
Product Design
DURATION
3 months
Context
iMídia TV is a corporate TV and digital signage platform developed by Pix Mídia.
The product already worked and people used it every day. The goal of this project was to redesign the interface, not to rebuild the product.
The challenge
The current layout looked dated next to other products in the category. But a full redesign carried a real risk: changing the paths that users already knew.
The constraint
Update the layout without changing the existing flowchart. Every screen, step and decision had to stay where users expected it.
The goal
A more attractive interface that still matches the original flowchart, so users don't have to learn new paths.
References
Before designing, I looked at the two closest competitors in corporate TV and digital signage as references, to see how they organize their layouts and what could improve the current TV layout.
Screencorp
The most direct competitor in Brazil: corporate TV plus a mobile app, managed from one panel. It lets users preview exactly what will show on the TV, and it reports the status of each player in real time.
4YouSee
A robust digital signage platform for corporate networks, franchises, retail and out-of-home media. A reference for managing large networks of screens from one place.
The flowchart was the foundation of the whole project. I worked in three steps:
1. FLOWCHART
2. IDEATION
3. DECISIONS
I mapped the whole system: 17 modules, every screen and the main paths between them.
I explored new layouts for each screen, always on top of the same flowchart.
I chose the solutions that improved the look without moving any step of the flow.
System map: 17 modules, grouped by theme only for this case. In the product, the menu keeps its original order.
Main flow: how a client puts content on air. The redesign kept every step in the same place.
Process
Key decisions
SAME FLOW, NEW LAYOUT
Each screen keeps its place in the flowchart. Only the visual layer changed, so the learning curve is close to zero.
COLOR TO GUIDE THE EYE
Primary 600 (#1A4B69) marks navigation and main actions. Semantic colors for success, warning and error show the status of players and content at a glance.
A CLEARER VISUAL HIERARCHY
A new content grid and a full type scale in Roboto make each screen easier to scan, from page titles to table data.
Design system
I created the design system from scratch, based on the existing layout of iMidia App 8. It documents the foundations (color, typography and spacing) and 30 components, so the new look stays consistent across every module.
COLORS
Five color categories: Primary, Success, Warning, Error and Gray. Each one has a 10-tone scale. Primary 600 (#1A4B69) is the brand color of the system.
Primary Scale
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
Secundary Scale
Success 800
#0A8054
Warning 600
#FFD921
Error 800
#8F0000
Gray 100
#EFF0F2
Gray 500
#797B80
Text
#2F3033
TYPOGRAPHY · ROBOTO
One typeface for the whole system. Weights from 600 up are bold, 500 is medium, 400 and below are regular.
Heading xxxl
Bold · 64px · line height 80px
Heading xxl
Bold · 48px · line height 60px
Heading xl
Bold · 40px · line height 48px
Heading lg
Bold · 32px · line height 40px
Heading md
Bold · 24px · line height 32px
Heading sm
Bold · 20px · line height 24px
Subtitle 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
COMPONENTS
The design system documents 30 components, each with its states, variations and usage guidelines. These are some of them, shown as they appear in the product:
BUTTONS
ALERTS
Three types: primary, secondary and tertiary, in medium and large sizes, with an icon on the left or right. The main action always sits on the right.
Four types: info, success, warning and error, with an optional close button.
INPUT
TAGS
Three states: rest, focus and disabled. Labels sit above the field.
Status always comes as a word plus a color, so it does not depend on color alone.
TOGGLE
Three states: rest, focus and disabled. Labels sit above the field.
Final screens
The four screens below follow the main flow, with the new layout and the design system applied.
MY PLAYERS
Each TV is a card with its schedule, status, version and last communication. Users can switch between card and list view, and group players.
Status always uses a word and a color: Online, Offline, Updated, Outdated.
MY MEDIA
Every way to create content in one place
-
The eight ways to add content (upload, streaming, PDF, TV dashboard, editors, media creator and Canva) stay in the same order as the old system, now as clear buttons at the top.
-
The library shows thumbnails and a file type icon, so users find media without opening it.
-
Storage and upload rules are visible before the upload, which helps avoid errors.
PROGRAM SCHEDULE
Build the schedule and see the result
-
Content types (media, news, weather, social media and more) are buttons at the top, in the same order as before.
-
The timeline shows each item with its duration. Charts show the balance between advertising and public service content.
-
The page also shows which players use this schedule, which connects to the next step. The main action, Save, sits on the right, following the design system.
PLAYER SETTINGS
Everything about one TV on one screen
-
The schedule in use sits at the top of the settings: this is where the schedule meets the TV.
-
Big numbers show memory, storage, CPU and temperature at a glance.
-
Toggles are used for settings with an immediate effect. Restart is red and separate from the other actions, because it interrupts the TV.
Toggles for settings that apply right away, as defined in the design system.