Arman Muhamad
← All work

Case study · Product Design

Film Preview Experience for BGR Cinema

A film preview website for BGR Cinema, a fictional independent cinema in Bogor, West Java, that shows Indonesian and foreign films.

BGR Cinema desktop screens: home with featured film, film list with details, now showing and coming soon
Role
Solo UX designer, concept to delivery
Timeline
February – March 2022
Users
Gen Z and millennial working professionals checking what's showing
Methods
Interviews, empathy maps, journey map, wireframes, lo- and hi-fi prototypes, usability study, responsive design
Outcome
Participants found the site clear to use; the main menu was the easiest part to reach.

Problem

The cinema's website has no film details such as genre, cast and story, so previewing a film is hard.

Goal

An informative film preview website for a cinema.

01

Understanding the user

Interviews and empathy maps showed people like watching in a cinema for the sound and the screen size, but cinema chains rarely give detailed information about their films.

  1. BrowsingFinding the right film to watch.
  2. ExperienceWatching an interesting film with the best sound and screen quality.
  3. Detailed informationReviews don’t say anything useful about genre, cast or synopsis.
Persona card for Dony, a 26-year-old IT officer in Bogor, with his goals and frustrations

Persona · Dony

A busy employee who unwinds at the cinema. He needs genre, cast and synopsis in one place so he can pick a film quickly in his limited free time.

Dony's journey map: browsing, selecting a film, film info, cinema info and browsing by cast

User journey

Mapping Dony’s journey showed how useful a film preview website would be.

02

Starting the design

Sitemap: homepage branching to now playing, coming soon, search, side section and footer

The sitemap came out of the frustration of finding “just the right one”. The structure keeps navigation simple.

Pinned paper wireframes for the home page, search and footer, with starred favourites
Pinned paper wireframes for now showing and two film detail variants
Paper wireframe of the mobile home page, reusing the tablet version
Paper wireframes for each screen, aimed at the navigation and browsing pain points, then carried across mobile and tablet for a fully responsive site.
Desktop digital wireframe of the home page, annotated: easy access to browse films, and quick genre and cast info
Digital wireframes. The home page prioritises where useful links and elements sit.
Mobile digital wireframe, annotated: minimised search and a bottom navigation bar instead of header menus
On mobile, the header menu becomes a bottom navigation bar.
Low-fidelity prototype flow linking the home page to film detail and other screens
Low-fidelity prototype: the main film-detail flow, plus a few other screens to preview the wider site. [ADOBE XD LINK]

03

Usability study

Type
Moderated, remote
Location
Indonesia
Participants
4
Length
20–30 minutes
  1. NavigationThe main menu, Sedang Tayang (Now Showing), was easy to reach.
  2. LanguageInconsistent language confused participants.
  3. SearchParticipants suggested changes to the search results page.

04

Refining the design

One language throughout

Made the wording consistent across the site to clear up the confusion.

Before and after: English footer labels replaced with consistent Indonesian ones in the final dark design

Focused search results

Removed the right-hand panel on the search results page so people can concentrate on the results.

Before and after: search results without the right-hand popular and promotion panel
Desktop mockups: genre browsing, horror films, search results and film detail with trailer
Mobile mockups: home, now showing, coming soon and genres, with a bottom navigation bar
Mobile mockups: horror films, search results and two film detail pages with cast and production
Final mockups, desktop and mobile.
High-fidelity prototype flow connecting the home page, listings, genres, search and two film detail pages
High-fidelity prototype: the main flow with the study's changes, plus some animation for smoother transitions. [ADOBE XD LINK]

05

Accessibility

A

A clear visual hierarchy, with headings at distinct sizes.

B

Bright text, links and buttons on dark backgrounds.

C

Title, genre, cast and synopsis each presented distinctly.

06

Takeaways

Participants said the site was clear to use, and found the main menu especially easy to reach.

What I learned

Small design changes can make a big difference to the experience, but not every suggestion can be adopted, because people’s opinions differ.

Next steps

  • Usability-test the high-fidelity prototype.
  • Secondary research on the picture and sound quality of the films the cinema shows.