Case Study: The task of redesigning the digital home of the Philippines’ most loved films

Angela Obias-Tuban
9 min readMar 20, 2015

Star Cinema (2013)

The biggest Philippine rom-coms and family dramas. John Lloyd Cruz. Kris Aquino’s horror movie reactions. The highest-grossing Pinoy comedy films.

We worked with the producer (and distributor) of the Philippines’ most popular and highest-grossing movies to redesign their official online portal.

Google Image Search results for Star Cinema movies

The One-liner Brief

Star Cinema wanted their website to be the top-of-mind destination for anything and everything about their brand.

The Approach

Elements to consider

In our desire to apply design thinking, we needed to study and optimize three elements: Consumer needs, Client vision and Capabilities (Resources: Manpower and workflow, time constraints, technological feasibility).

Ideo’s Design Thinking model

The Process

For Star Cinema, I worked on 5 main phases of product development.

1) Objectives-setting

A website is an expensive thing to make and manage. Any additional features to be developed mean additional cost. This means you have to be very clear about the site objectives, and the features integral to the objective, for any website to be worth Client’s money.

The first thing we did was get a clear picture of what Client wants (I’ll talk about the detailed lessons and tips on Stakeholder Interviews in another post).

From my interviews with our key Client, the digital head of Star Cinema, we distilled the idea and direction of the site into a brief (and, of course, for Client purposes — a presentation deck).

2) Listening to consumers

A product is only as strong as its consumers’ relationship to it.

Spreadsheet for creating personas for the Star Cinema website

To find the perfect role for the website, we needed to find: what people loved about the brand, and their current behavior regarding the category (and the current website).

Photo from the Star Cinema contextual inquiries

Because we needed to find digital opportunities and validate potential ideas, we conducted field interviews with a range of consumers — from a super fan (who would follow her favorite stars during their shooting dates) to a minimally engaged dad (who only really watches movies if and when they are shown on TV).

We also conducted usability tests with the current website and the first design iteration.

After the user research, we did a story-sharing session (a process outline can be seen in the Ideo website), where we distilled the most engaging opportunities for our consumers.

The next step was balancing this with Client objectives and resources.

3) Content Strategy Using what we learned from consumers, we conducted a workshop with our Clients to see how the consumer needs could be satisfied through the website, while fulfilling business objectives.

We drew out what kinds of content and features would bring the objectives to life.

Part of the workshop was prioritizing which features were crucial and nice-to-haves, given the typical budget, time and editorial realities.

4) Editorial Workflow Digital properties are dynamic — they’re platforms for real-time, adaptive interaction, which translates to real-time, always-on content publishing and editorial management.

This puts is a lot of pressure on any team managing a digital property expected to be a “one-stop shop” or a “go-to site for first-to-break information”.

Ideal Editorial Calendar — from content workshop

To make sure the website fulfills objectives, we needed to help the editorial team, by facilitating what they need for populating and maintaining the site.

We, then, drew out the main pain points in workflow and the ideal scenario, and presented solutions to top executives to get support for the editorial team.

5) Building the Design and Architecture

We audited the digital properties of various foreign movie outfits, and analyzed the potential business benefits and consumer behavior of each.

As I collaborated with the editors and Clients, we also worked with interface designers — on the content priorities and the branding requests to create wireframes and look-and-feel studies for the Client. With the developers, we also laid out the groundwork for a category and tagging system, for the editors to neatly section where their content goes.

Putting it together: How we used digital to help solve the business problem

Uncovering the True Challenges

The primary business challenge is diminishing ticket revenue, because of:

1. Piracy

First, pirated DVDs encroached on the business, and later on, Torrent files and streaming video copies.

2. Growing free options for entertainment.

Also because of the Internet, consumers now have many more entertainment options. We’re no longer just confined to TV and radio as mainstream media sources, unlike in the 80’s and early 90’s.

More free options = higher competition for eyeballs, and higher barrier to payment.

Aside from theater revenue, there was also a revenue issue, specifically for digital:

3. Brand dilution and inefficient digital production.

The former scenario was that each movie’s producers and marketers commissioned their own website, whenever a movie would come out. That’s at least 12 movies a year, or 12 separate website production cost calculations. Due to fragmented online platforms, cost, revenue and fan involvement are also “scattered”.

The Bottom-line

Star Cinema is a corporate entity, which means, like any business, its primary motivation for any substantial expense, is some form of ROI.

For the Star Cinema website, we aimed to measure its ROI through 4 objectives: Legitimacy (being recognized as the official information source), Drive-to-purchase, or at the very least, driving to official channels of movie viewing (critical to business health, but applies to a more forward-looking scenario), Online revenue and Engagement.

Product Strategy: From a la carte development, to a one-stop library

For the product to work, we had to streamline the goals and plans, according to the vision of the digital head of the brand*.

*After overseeing both tactical and strategic digital projects over many years, I learned that this is the ideal depth of understanding of the Client’s needs when creating platforms or long-term digital strategy. The conversation has to go beyond just the “pageviews” or expected technological features. You have to have a conversation about what kind of role digital plays in his or her dreams for the brand.

His vision was for the Star Cinema brand to be locally popular, globally unique, reliable and in-touch with what its countrymen look for in a film. I loved that it was about Star Cinema staying true to its local roots.

The following are my favorite lessons from the project, that we learned and applied in making the website:

Consumer Behavior: Fan love

I loved seeing extreme fan love in action — hearing a story about how one can revolve her schedule and budget around the stars that loves to follow. This validated the Client’s vision of creating content around the planning of a film, and not just uploading content after its launch.

Feature Prioritization: How the hierarchy of objectives can kill a feature

The initial brief contained user-generated content (UGC) features. During our content strategy workshops, we had to go back to the hierarchy of our business objectives to check whether this would be included in our “minimum viable (or delightful) product”.

In the end, we found that the legitimacy objective was more urgent and critical than the “engagement” objective, so that the UGC features would only be given resources AFTER the official editorial content was already established.

Content Prioritization

Persistent Calls-to-action (CTAs)

Because drive-to-platform is the top business-critical objective of the website (the top objective — legitimacy — is more of a branding and content guideline), we drew out that the key measure for that would be clicked links referring users to the official viewing channels of the brand.

Because of this, we made sure that each page’s main feature linked to a call-to-action prompting a user one step closer to viewing the movie on an official platform (whether it’s a movie theater, the official global viewing website or a DVD retailer.

As close to real-time as possible

The Livestream and Events pages were also critical, as these were main touchpoints for interfacing with fans, and would help build the living, breathing, updated quality of the website.

The Facebook timeline and calendar mobile apps were our inspiration for the wireframes. The goal was for fans to easily find what Events they could visit, hence the events were filtered between Upcoming, sorted by the “latest” or closest date, and Previous.

We also made sure that the most dynamic content (content that changed most often), would also be favored by the design (e.g. “Latest article” stream with timestamps above the fold).

Mental models: Images and Actors

Through our user research and design tests, we learned that consumers recognized the Star Cinema movies by the actors in them, more than the title. To design according to this learning, we made the posters prominent for an easy-to-browse landing page, rather than focusing on movie titles. This also meant that the site search and filtering would need to crawl through, not only the titles, but the main movie cast as well.

Architecture and Navigation

We needed to have two sets of content structures: One that was consumer-facing, and the other to simplify editorial work.

For the editors, multiple layers and formats of content (livestreams, synopses, press releases, reviews, updates, behind-the-scenes, press conference converage), were summarized into:

- Photos, videos, articles and events.

- Exclusive to a particular movie, or the overall mother brand Star Cinema. This formed the structure of our sitemap.

Look and Feel

The Star Cinema site was requested to look feminine and emotionally-rich, to cater to the main genres and target audience of the brand.

Homepage evolution — From the previous design, to the first iteration for testing, to the final redesign.

The Results

After many months, official promotional content for all 200+ movies of Star Cinema have been collected and uploaded by the editorial team, and, for the year after the redesign, traffic grew over 500% (from 1,000+ pageviews a day, to 14,000+ pageviews a day in less than a year.*).

This growth was not because of an aesthetic “facelift” alone, but because of an integrated effort and total product design process: for a complete library, more consolidated traffic and an objectives-driven editorial workflow.

*For those who asked, that is without ads. Placing ads for websites was beyond ABS-CBN at that time. Because well — to put it simply, why would the nation’s biggest media network pay to place ads on content publishers? Our goal was to create digital platforms to harness, corrall and stimulate (gather and grow) organic interest in the brand.

Originally published at angelaobias.wordpress.com on February 20, 2015.

--

--

Angela Obias-Tuban

Researcher and data analyst who works for the content and design community. Often called an experience designer. Consultant at http://priority-studios.com