Redesigning the digital home of the Philippines’ most loved films


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 Search - Star Cinema films
Google Search – Star Cinema films


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
Ideo’s Design Thinking model, as seen in the Human-Centered Design Toolkit

The Process

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

Star Cinema UX Process

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.
Star Cinema Persona Screenshot
Star Cinema Persona Creation – Screenshot
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).
"What's in your bag?" Contextual Inquiry photo for Star Cinema
“What’s in your bag?” Contextual Inquiry photo for Star Cinema
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.
Excerpt from User Research Summary Presentation
Excerpt from User Research Summary Presentation

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”.


Star Cinema Content Plan - Ideal Editorial Calendar
Star Cinema Content Plan – Ideal Editorial Calendar

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

Objectives-Setting Phase

The primary business challenge of Star Cinema is diminishing ticket revenue, because of:
Excerpt from initial Objectives-setting sessions
Excerpt from initial Objectives-setting session

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, leading to 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

Presentation excerpt: Aligned Entertainment Brands - Strategy Objectives
Aligned Entertainment Brands – Strategy Objectives
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

Solving Star Cinema's business problems

For the product to work, we had to streamline the goals and plans, aligned 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.

User Research Phase
The following are my favorite lessons from the project, that we learned and applied in making the website:
Parts of research done for the Star Cinema website
Parts of research done for the Star Cinema 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.

Content Strategy Phase
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)
Movie Landing - Initial wireframe
Home – Initial wireframe

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
Movie Events Landing Page - Wireframe
Movie Events Landing Page – Wireframe

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 
Usability Test (with former design, versus the first iteration of the design) Presentation excerpt
Usability Test (with former design, versus the first iteration of the design) Presentation excerpt
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.
Design and Architecture
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.
Star Cinema - Site Tree
Star Cinema – Site Tree

Look and Feel

Star Cinema Brand - Look and Feel
Star Cinema Brand – 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.


The Previous, the First main Iteration , then the New homepage design
The Previous, the First main Iteration , then the New homepage design

The Results

After many months, official promotional content for all 200+ movies of Star Cinema has been collected and uploaded by the editorial team, and, for the year after the redesign, traffic has grown over 500%.  This was not because of an aesthetic “facelift” alone, but because of a total product design process:  for a complete library, more consolidated traffic and an objectives-driven editorial workflow.

Leave a Reply

Your email address will not be published. Required fields are marked *