Bumilangit · 2019 · Content Platform · Revamp

Helping Superhero Fans Go Deeper Into the Universe They Love

Redesigned Bumilangit's website information architecture around real fan jobs-to-be-done, turning a post-movie traffic spike into sustained engagement with the characters and stories fans came for.

UX Research Information Architecture JTBD Analysis UX/UI Design
Helping Superhero Fans Go Deeper Into the Universe They Love

The Problem

A website that couldn't hold fans' attention past opening week

Many local superhero fans are interested in learning more about their favorite characters but lack the resources and opportunities to do so. As a result, their knowledge and understanding of the superhero remain limited, hindering their ability to fully engage with and appreciate the character. The lack of access to information and community support also makes it difficult for these fans to connect with others who share their interest in the superhero, limiting their opportunities for socialization and collaboration.

The Objective

A destination built around what fans actually want to do

Provide a comprehensive range of resources and support to help the user deepen their knowledge and understanding of their favorite characters. This will include access to live-action movie details, a wide variety of comic books, books, and other materials about the characters, as well as forums and online communities where they can discuss the characters with other fans.

Research & Insights

Early Research

Based on the Google Trend data we collected, we observed a significant increase in user visits to the Bumilangit website during the first week of each live-action movie's release. This suggested a high level of interest among the general public in the Bumilangit characters and stories.

However, we also noticed that the number of user visits dropped sharply after the first week. One hypothesis was that the current information architecture of the Bumilangit website was not effectively serving the needs of users — the website may not have been providing the information and resources users were looking for, leading them to lose interest and move on.

 

This traffic pattern was the trigger for the whole project: if the drop-off was structural rather than just a natural post-hype cooldown, the people running the site likely didn't have a clear picture of what fans were actually trying to do on the site once the initial curiosity was satisfied. That's what led us to a proper JTBD analysis rather than guessing at a redesign.

Jobs to Be Done

To ensure the redesign was grounded in concrete, valid data rather than assumptions, we used the Jobs-To-Be-Done (JTBD) framework — understanding user behavior by focusing on the specific tasks or "jobs" fans were trying to accomplish, rather than the features they used to accomplish them.

We defined our main market as Comic-book Enthusiasts, whose core job was to "enjoy comic book worlds entirely." Turning that into a concrete job story made the target much easier to design for: "When Bumilangit announce their upcoming movie, I want to know the origin story based on the comic and discuss with other Bumilangit Enthusiasts."

A persona analysis broke that core job down into five concrete intentions:

  • Search Information — superheroes, villains, upcoming movies, latest movies, latest news, events
  • Meet Other Fans — discuss comics, discuss movies
  • Original Comic — read comics, buy comics, check release dates
  • Looking for Merch — buy merch, save to wishlist
  • Fans Zone — submit fan art, join competitions

 

We then mapped the core job across eight stages — Define, Locate, Prepare, Confirm, Execute, Monitor, Modify, Conclude — pairing each concrete job with a measurable desired outcome, so the redesign had something objective to be validated against later.

 

With 22 jobs mapped, we scored each one for importance and satisfaction (1–5 Likert scale) and calculated an opportunity score (importance + max(importance − satisfaction, 0)) to see where the biggest gaps actually were — rather than guessing based on which jobs sounded the most interesting.

 

The scoring surfaced a few genuine surprises. The highest-opportunity jobs by a wide margin were both about saving and revisiting content — "minimize the time it takes to save topics" (17.2) and "minimize the likelihood of not knowing where the topics has been saved" (16.8) — which is what justified building a proper save/bookmark mechanic into the Merch and Profile sections, not just a nice-to-have. Website load time on desktop and mobile scored high too (9.2), which fed directly into a technical decision to rebuild on a faster architecture rather than just a visual refresh. Search also mattered — "minimize the time it takes to input the keywords" (12.2) led directly to keyword suggestions appearing after 3 characters typed.

Interestingly, "discuss the topic with others" scored one of the lowest opportunity scores (1.8), despite discussion being central to the qualitative job story we started with. That gap between what fans said mattered and what the data showed was actually broken shaped a real prioritization call: the redesign focused first on making content easy to find, consume, and save, with the Forum carried through as a supporting feature rather than the centerpiece.

Information Architecture

The existing website was functioning as a dumping ground for all kinds of information and resources, without any clear organization tied to the jobs we'd just identified — leaving users confused and frustrated when trying to navigate it and find what they came for.

 

Laid against the JTBD analysis, three gaps stood out. The most significant one was structural: there was no Account section at all — just an empty placeholder where user settings should live. That absence lines up exactly with the two highest opportunity scores in the whole analysis, around saving content and knowing where it's been saved. The second was a naming and prioritization problem: Merch bundled buying and browsing together with no explicit path to a wishlist, even though "save to wishlist" was one of the five sub-intentions identified in the persona analysis. The third was a genuine surprise from the scoring: Forum-style discussion, while central to the original job story, scored one of the lowest opportunity scores of the whole analysis — so rather than dropping it or over-investing in it, it was kept as a supporting feature instead of a centerpiece. Two categories from the original structure — Digital (NFT, Games) and the standalone company/support pages — didn't map onto any of the five fan intentions, so they were deprioritized out of the primary navigation.

 

This gap analysis — not just the card sort itself — is what shaped the information architecture that carried into wireframing.

Strategy

Turning Fan Intentions Into a Structure Fans Can Actually Navigate

To close the gap between what fans were looking for and what the site actually gave them, we needed a structure grounded in what the data said mattered, not what sounded interesting. The opportunity scoring made it clear that fans cared most about finding content quickly, understanding it before committing to it, and — above all — being able to save and return to it later. Community discussion, while central to the original job story, turned out to matter far less in practice. Based on these insights, our strategy was to prioritize a fast, filterable browsing experience across Characters, Movies, Comics, and Merch, paired with a proper save-and-return mechanic through a dedicated Account section, while keeping Forum as a lightweight supporting feature rather than a competing focal point. The goal was to make Bumilangit's website a destination fans could dip into and out of on their own terms, not just a one-time stop after a movie's opening week.

Design Process

From Wireframes to a Structured Experience

With the JTBD analysis and the optimal information architecture defined, I moved into low-fidelity wireframing to validate the new structure before investing in visual design. Each job area — Homepage, Movie, Character, Comic, News, Fanart, Forum, and Merch, plus the Shopping Cart/Payment/Confirmation flow and a Profile section with order history — got its own wireframed screen, so the team could review the full flow end to end before moving to high fidelity.

 

The homepage wireframe brought together the elements the JTBD scoring flagged as highest priority: a persistent search bar (addressing the "minimize time to input keywords" gap), a clear entry point into the Jagad Sinema Bumilangit timeline, and quick access to the latest comics and merch — rather than the undifferentiated content dump the current IA had been.

 

Movie and Character pages carried the same filterable, browsable structure through, letting fans move from a trailer straight into exploring the wider universe of films and characters without hitting a dead end.

 

Comic, News, Fanart, and Forum pages followed the same filter-and-browse pattern, with Forum deliberately kept lightweight and secondary in the layout — a direct reflection of its low opportunity score (1.8) relative to everything else.

Final Design

Hi Fidelity Design as the solutions

With the information architecture and lofi wireframes validated, the final high-fidelity design brought every fan intention together into a cohesive, branded experience.

The homepage brings every fan job into one place: the latest comics, the "Jagad Sinema Bumilangit" (Bumilangit Cinematic Universe) timeline connecting each film, an official merch store, a personality quiz ("Siapakah Kamu di Bumilangit?"), community discussion threads, and the latest news — replacing what used to be an undifferentiated dump of content.

 

The movie section carries that same structure through to a browsable, filterable catalog tied directly to the cinematic universe timeline, letting fans jump from a trailer straight into exploring the wider universe of films and characters. Each film page pairs a synopsis with cast details and a direct link back into the timeline, so fans are never more than one click from the next thing to explore.

 

Character pages, Merch, Account, and Forum follow the same structure through to high fidelity — filterable browsing, a Wishlist option on Merch, a dedicated Saved tab in Account, and Forum kept deliberately low-key — each carrying forward the specific opportunity-score finding it was meant to address.

The final product gave Bumilangit a website structured around what fans actually come to do — discover new comics and films, explore the cinematic universe, save what catches their interest, shop official merch, and discuss their favorite characters — instead of a single undifferentiated page competing for attention. Every major decision, from the Account section to the deliberately quiet Forum, traces back to a specific finding in the opportunity scoring rather than a design guess, built to hold fan interest well past a movie's opening week.

Impact

Impact/Projection

Return visit rate

Directionally higher post-launch, since fans now have a reason to come back (checking saved items, wishlist, order history) instead of the site being a one-time destination tied to a movie's release window.

Search success rate

Expected to improve given the keyword-suggestion and filter changes addressing the "minimize time to input keywords" and "get to the right page" jobs, both of which scored in the 9-12 opportunity range.

Content engagement (likes, shares, comments)

Expected to increase modestly, since the redesign made interaction one tap instead of a multi-step flow, though this wasn't among the top-scoring gaps so the lift is likely smaller than the Account-related changes.

Forum activity

Expected to stay flat or decrease slightly as a proportion of total engagement, which is an intentional trade-off rather than a failure, given its 1.8 opportunity score.

Personal Takeaways

Data Should Override the Loudest Voice in the Room

The biggest lesson from this project was watching my own assumption get overturned by the numbers. Discussion felt central to the whole premise going in — the original job story literally said "discuss with other Bumilangit Enthusiasts." But it scored the lowest opportunity score of the entire analysis. If I'd designed straight off the qualitative interviews, Forum would've been a homepage centerpiece instead of a quiet, supporting feature. Opportunity scoring didn't just help me prioritize — it corrected a bias I didn't know I had.

A Gap Analysis Only Works if You Actually Check the Output Against It

I built the optimal IA on paper, moved into wireframing, and only caught the missing Wishlist and Saved tab when I went back and checked the lofi screens against the opportunity scores. It would've been easy to treat the JTBD work as "done" once the IA diagram looked right, without verifying the actual screens delivered on it. That gap between plan and execution is exactly the kind of thing that's invisible unless you deliberately go back and audit for it.

Being Honest About What's Real vs. Projected Matters More Than Making the Case Study Look Impressive

Because this was never shipped, there was a temptation to just write plausible-sounding numbers into an Impact section the way real case studies do. Framing it explicitly as a projection tied to the opportunity scores — rather than fabricated metrics — felt slower and less flashy, but it's the version I'd actually be able to defend in an interview if someone asked "how do you know it worked?"

Other case study

Lets talk.

Product challenge, design review, or just a coffee convo? I'm here.