Rebuilding the Information Architecture of the Philippines’ Biggest Entertainment Brand

ABS-CBN (Channel 2) – 2013

Linking to the old Tayong Dalawa website

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)
Tasks and Workflow on TV2
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.
Auditing Site Content

3. Design Pattern-hunt and Initial round of wireframing

We used the content audit and objectives to wireframe each page in the userflow, as a team.  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).
Hunting for calendar UI patterns, among other digital properties
Hunting for calendar UI patterns, among other digital properties
Stack of wireframes
Stack of wireframes

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 launch.
Usability Testing the coded prototype
Usability Testing the coded prototype
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.
Flow of Content Publishing
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.
The Previous Design (Since 2007), and the Latest Iteration I worked on (2012)
The Previous Design (Since 2007), and the Latest Iteration I worked on (2012)