Cinematrics

CONTEXT

The film market changes rapidly and movie buffs need a robust tool to make informed decisions

With massive amounts of streamlining platforms available, the market demand for motion pictures is shifting rapidly today. Movie buffs like domain experts in the small/medium businesses of the film industry need a better tool to make informed decisions swiftly.

PROBLEM

There is NO budgeted solution that offers comprehensive analytics into the movie business

Though big filming companies have internal analytics tools to guide the business, there're still many small and medium affiliated businesses that lack of the resources to access advanced analytics functions and streamline their decision-making processes.

In this regards, our group decided to leverage a public database to build an application and bridged the information gap, attempting to provide the information needs and inspire more powerful as well as open-source solutions to be developed.

FINAL SOLUTION

A glance at our final solution

The final solution is a fully functional web prototype. We leverage TMDB API as the movie data source, then utilize HTML, CSS, and D3.js to build out a real-time data-driven platform to fulfill the information needs.

• Home page demo

  1. Home Page

  Goal: Hook the users' attention and sparkle their interest to learn more.

  Key Use Cases:

  • Learn the market analysis of the latest trending films.
  • View the trending people based on API's search ranking.
  • Access metrics details via hover and click interactions.

• Search page demo

  2. Search Page

  Goal: Allow robust search including exact keyword matches and related information retrieval.

  Key Use Cases:

  • Keyword search for movie titles.
  • Keyword search for movie stars' names.
  • Learn basic information of the search results.

• Movie page demo

  3. Movie Page

  Goal: Display individual movie's contextual information and comparative analysis with its similar titles.

  Key Use Cases:

  • Learn single movie's contextual information.
  • Compare similar movies' market performance.
  • View the preview of the cast list.

• Person page demo

  4. Person Page

  Goal: Display individual movie star's contextual information and the performance overview.

  Key Use Cases:

  • Learn single movie star's performance trend.
  • View single movie star's work strength per genres.
  • Uncover the top collaboration network and details.

RESEARCH - LISTENING SESSION

Gathering, cleaning, and organizing information from various different sources cost much time and cognitive efforts

The listening sessions with our targeted users helped us uncovered their 2 typical search approaches and learned that every search action acumulated their cognitive efforts and frustration level along the journey. Optimizing the information relevance and richness is thus extremely important.

• Definition of Our Target Audience: ( Movie Buffs )

  Power users who like to dig deep into the movie business or relevant contents, and have strong domain knowledge than others.

Besides the search patterns, we also revealed the following major pain points:

• The process of gathering and organizing information costs so much time and cognitive load.
• The major platforms that store movie data does not present the information very well. (i.e. too text-heavy contents)
• Advanced metrics and in-depth analysis are not available. (i.e. return on investment, cast collaboration)

Design

Exploring different UI layouts

We then spent couple of design workshop sessions ( 10-20 minutes per session ) to sketch out different versions of layouts, then critiqued on the design mockups to extract pragmatic features while parking lot the opposite. ( see my sketches & final lo-fi mockups below ):

• 
• 

* Click the thumbnails to see my sketch and the final lo-fi mockups

• Design decisions

  Each subpage focuses on different purposes. We limited the amounts of dashboard cards ( a cluster of chart OR contextual information ) within 3-5 to balance between optimal amounts of displayed information and users' maximized cognitive load.

• 
• 
• 

* Click the thumbnails to learn about different page's design decisions

• User Flow

  Mapping out the user flow is critical for us to reference later while programming the web prototype's interactive functions.

• 
• 
• 

* Click the thumbnails to learn about different page's user flow

• Hi-Fi Mockups

  Next, we polished the lo-fi wireframes with more detailed stylings to facilitate a systematic design and programming workflow.

• 
• 
• 
• 
• 
• 
• 
• 

* Click the thumbnails to learn about different page's hi-fi design

Iterations

Key improvements upon post-launch user testing

After delivering our solution to finish the capstone unit, I constantly spent time to optimize the usability and interactive experience. So far, I've conducted 6 testing sessions ( 3 domain experts in design and visual analytics + 3 movie buffs ) and fix the issues accordingly:

• Final Screens

REFLECTION

The power of the agile UX process and how to research with limited resources

With the time contrtaint and requirement to program the prototype, we did not have time to plan out a full scope of user research ahead of time. Instead, we adopted a faster framework similar to agile UX methodology and allocated the research work in post-launch testing to iterate our solution.

The result is very rewarding as the project still made progressive improvements even now. I got to learn a lot about product development cycle from concepts, design, to development in a hands-on process. Being able to contribute to each step is very important for me to grow as a UX practitioner with comprehensive skills.

What I'd do differently for this project given the right time and resources:

• Redefine the backend API to match the information needs

  All the metrics calculations are done in the client-side and need multiple API calls. This causes a slower performance and an abuse to the database. Thus, it would be ideal to redefine the API and complete the calculation in the back-end to streamline the experience.

• Add a more experienced UI developer in the team

  It would be great to have a experienced developer to support the work of prototype development and debugging. The rest of the team can then focus more on executing design iterations and user research.

• Fulfill a more comprehensive research plan

  While the agile UX process to iterate fast through user testing works well given the limited setting of this project, I would like to come up with a more holistic plan to recruit industrial experts so we can have clearer direction while building the solution.