Astro Awani
Overview
Astro Awani, a leading Malaysian news network, needed a comprehensive election platform that could power both its live broadcast coverage and its public-facing website, providing real-time results, regional data, and seamless newsroom operations.
As the UI/UX Designer, I designed an integrated system that balanced speed, clarity, and scalability, empowering new data entry staff, the editorial team, and millions of voters to navigate complex election data confidently and efficiently.
My Role
- Led the UI/UX design for both the public platform and internal CMS
- Worked with broadcast producers, data ops, and editorial leads
- Created modular components adaptable across screen sizes and platforms
- Designed region-based color coding that balanced political identity with on-air accessibility
- Conducted rapid validation with internal stakeholders under tight timelines
Tools:
- Figma
- Adobe Illustrator
- Adobe After Effect
- Visual Studio Code
The Challenge
Malaysia’s election data is complex:
- Dozens of political parties with overlapping regional contests
- Real-time data inflow from hundreds of constituencies
- A wide range of users, from casual viewers to broadcast producers
- New backend team members unfamiliar with electoral systems
The challenge was to design a scalable platform that could:
- Handle real-time updates
- Clearly present data regardless of complexity
- Maintain brand integrity and clarity across TV and web
- Be usable by non-technical data entry teams
Objectives
- Create a one-stop platform for live election tracking on both TV and web
- Design a user-friendly CMS for fast, error-free data input
- Visualize results by region, party, and seat type, without overwhelming users
- Ensure smooth collaboration between editorial, design, and dev teams
- Build in flexibility for future elections and potential UI reuse
Design Approach
1. Dual-Purpose Design
- The platform needed to work for on-air broadcasting (TV overlays) and for the public-facing website
- Designed a clean, high-contrast UI that reads well on both screens and stage lighting conditions
2. Map-First Navigation
- Developed an interactive Malaysian map that allows users to drill into states, regions, and constituencies
- Each region dynamically updates with results and uses customizable color coding per political party
3. Flexible CMS Design
- Built an admin backend tailored for first-time election staff
- Designed data entry flows with smart validation and redundancy warnings to avoid misreporting
4. Party Color Complexity
- Managed a landscape of dozens of political parties with often-similar color palettes
- Created a contrast-based visual system: solid tones for major parties, muted variants for minor ones
5. Broadcast-Ready Components
- Designed UI elements to scale for live TV, ensuring legibility, consistency, and pacing
- Provided TV-specific guidelines for placement, color timing, and data reveal choreography
What This Solved
- Unified system for newsroom, CMS, and broadcast, eliminating fragmented workflows
- Improved accuracy and speed of data entry with structured backend flows
- Enabled millions of viewers to follow real-time results confidently
- Provided visual clarity despite the political and regional complexity of Malaysian elections
- Created a reusable framework for future elections or national events
Results
- Successfully launched during Malaysia’s General Election, supporting millions of live users
- Reduced data entry training time for new staff by over 60%
- Improved error detection during live updates, ensuring on-air data integrity
- Became the primary source of results for both internal teams and national broadcast
Design
Awani designer already have something in mind, so I continue to design while giving consultation on what works and what will not in the technical aspect. I finish up the design and did a weekly review meeting to finalized the design before we proceed towards development. The Malaysia map design also need to adapt so it can be interactive, so I am the one responsible on the design and tweaking the codes to follow the developer requirements so it can work when uploaded.
.png)
Development
Once the design is finalized, I communicate with the developer to ensure a smooth design handover. Any features that needs visualization, the developer will highlight and I deliver it accordingly after a review session with Awani. After a part of the development is completed, we proceed with the user testing to gain feedback and fix it in the process.
Training
We went ahead to give training on the new CMS to the user in Awani's data input team on-site. On the election day, our team were on standby on-site as to first, help manage the high traffic and second, resolve any sudden issues with the CMS, should it happen.
What I Learned
- Designing for broadcast and web simultaneously is an exercise in constraint management, balancing fidelity, legibility, and real-time performance
- Even simple interactions (like color highlights) become critical for trust in high-stakes platforms like election results
- Building for users under pressure (e.g., data entry during live broadcast) taught me to prioritize redundancy, error prevention, and pace
Reflection
This project reminded me that UX isn’t just about interfaces, it’s about coordination.
Working with producers, devs, and editorial teams across multiple channels (TV + web) required not just design thinking, but operational empathy. Everyone had different stakes, and our job was to make sure the platform worked for all of them, under pressure, in real time.
It pushed me to become more than just a designer, to become a connector, and a system builder that brings teams together under one shared source of truth.
.jpg)
