Rebuilding the Information Architecture of the Philippines’ Biggest Entertainment Brand
--
ABS-CBN (Channel 2) — 2012
ABS-CBN (Channel 2, in Metro Manila; 3, in Cebu and 4, in Davao) is widely known in the Philippines as the oldest, most established TV channel in the country.
A locally-owned and much loved (and loved-to-hate) brand that is legitimately a “household name” — followed by at least half of the nation on TV, on ay given evening. A number of its offerings, such as Pangako Sa ‘Yo, Kay Tagal Kitang Hinintay and Tayong Dalawa, are translated to other languages and viewed in other Southeast Asian and African countries.
The One-Liner Brief
Redesign the ABS-CBN website to grow pageviews and revenue
I was tasked to lead the user experience and interaction design, working with our brand strategist, designers and developers.
Redesigns are typically thought of as shuffling aesthetic elements, to make a product “look more beautiful”.
What people often don’t realize, is that a redesign doesn’t matter without sound content.
I was fortunate to work with brand owners who had mature design needs. They were tired of spending money on websites that weren’t achieving objectives, and wanted to work towards an objectives-driven design.
The Approach
What I Did, At Different Stages of the Project
(The project, having extended over many quarters — changed hands often, requiring team members to adopt different roles in the process)
I did work that spanned both content strategy (content audits, metrics analysis, and facilitating a content strategy workshop) and design (contributing to finding optimum design patterns, wireframing and usability testing the initial designs).
How did we redesign?
After a Client discovery phase, or fleshing out the business needs and context, these were the tasks that I needed to do:
1. Metrics Analysis (looking for current usage patterns based on website stats)
Through the site analytics, I looked at how behavior flowed across the pages (This was even before Google Analytics launched the Visitors Flow feature :) Which is such a godsend).
2. Content Auditing (Examining everything on the current website)
I created a content audit, personally combing through every page of the current website (all 46 dynamic pages of it), and collating every ad, title and timestamp I could find.
3. Design Pattern-hunting and Wireframing
We used the content audit and objectives to wireframe each page in the userflow, as a team. We also looked at design patterns for similar functions (a few of which you can read about here).
It was important to us to have an alignment between strategy and design as we built out the pages (we weren’t even designing for mobile-responsive then).
4. Initial Design Testing
We launched a first stage of the design — but after a couple of months, we observed that traffic wasn’t growing at all, even if we had done a round of usability testing before the public launch.
This encouraged us to go into a second phase: Content Optimization
5. Content Workshops
I worked hand-in-hand with the Editor-in-Chief, the digital Business Unit head and the Design lead to conduct a content optimization workshop series.
You can’t help solve what you don’t understand.
To kick this off, we interviewed members of the editorial team — to understand their workflow and see how much each person was being made to handle.
The goal was to help the content creators understand the value of their role — as day-to-day guardians of the mother brand. It was broadening and deepening their scope from writing press releases to upholding ABS-CBN’s brand vision and personality through digital content.
I led two phases of the workshop series:
– A walkthrough all the necessary metadata for the back-end (content management) system, and its consequences if it wasn’t followed.
– Hands-on session, applying headline-writing best practices from Buzzfeed and Upworthy with the strategy and interaction design team, to challenge everyone — from the writers to the brand owner. We helped the editorial team practice creating catchy, meaty headlines that met usability best practices (i.e. maximum characters)
Results
A Self-sustaining Platform, with Objectives-led features
After the content recommendations were applied, the website gained more than double the traffic in less than a year (without digital placements) — overshooting initial growth projections, because of everyone’s hard work.
The ultimate goal was to have enough revenue for the platform to support its own cost, which would manage company resources. So, we pared down features to fulfill the most critical business objectives (i.e. Remove trendy or fun, but ornamental features).
Prioritized a usable and understandable interface
There were many beautiful design elements that the design team wanted to try in early iterations, but with initial wireframes and usability testing, we prioritized a usable and understandable interface. The site needed to support 20+ ongoing television shows at any one time — where articles and posts would compete for users’ attention.
Clear and easy for both readers and editors to find new content
We created the architecture to enable the editorial team to take greater care in appending helpful data about each article (e.g. Edited, Tags, Related Show, Timeslot).
The tags and microcopy were important to the site architecture. We wanted a clearer flow of content, and minimal ad spaces (but with an equal number of advertising options).
The current website then became cleaner, allowing for a clear focus on getting to inner (and dynamic, reusable) pages, over previous cluttered interface with a greater focus on static content.
Originally published at www.angelaobias.com.
