VIFF — An app for an International Film Festival

Summary

My team and I have a very ambitious project: THE CHALLENGE of redesigning VIFF app — one of the most important international film festivals placed in Vancouver — by moving forward from a limited-functionality app kit to a more professional app in which scheduling and purchasing tickets are the main features.

About VIFF

Vancouver International Film Festival (VIFF) is one of the five large largest film festivals in North America with the purpose of celebrating creativity and excellence in screen-based storytelling. Founded in 1982 by The Greater International Film Festival Society, VIFF offers 16 days of featured and short films, VR conferences, creator talks, and exhibitions — which means more than 500 events and 130,000 visitors during 16 days.

Goals

Business goals: Having a fully-functioning app that’s enjoyed by a younger festival demographics could lead to the app being a saleable sponsorship asset in the future.

Project goals: Provide the opportunity to promote events, better interaction with the festival beyond a passive viewing experience and to encourage engagement outside of the festival.

User goals: Add the screenings that the audience wants to watch and purchase tickets easily.

Research

First, we started with the domain research and comparative analysis in order to analyze the competitors and some desirable or interesting features existing on their apps like purchasing tickets, film screenings and schedule or year-round. The competitors:

  • Seattle International Film Festival (siff)
  • Toronto International Film Festival (tiff)
  • Edinburgh Fringe Festival (Fringe)
  • Brisbane International Film Festival (BIFF)
  • Sydney International Festival (SFF)
  • Vancouver International Mountain Film Festival (VIMFF)
Comparative analysis chart for the domain research

We concluded that most of the competitors haven’t got an app so, we decided to analyze their websites if they haven’t got an app. These festivals have an existing app with very limited functionality. As an example, the Seattle International Film Festival app can only let the user purchasing tickets. For purchasing tickets functionality, some of the festivals have an external link to complete all this process instead of using the same platform.

Generally, some sections such as membership, year-round and film information are on these festival platforms. However, the majority of them don’t include a schedule and a map or venue information. That means a great opportunity to redesign a unique app and make a difference.

At the same time, we started coming up with questions for our surveys and interviews. Some of the questions form for the survey were:

  • Demographics (age, genre, occupation, etc.)
  • How much of a film enthusiast are you?
  • How often do you watch films at the cinema?
  • How do you usually prefer to watch films at the cinema?
  • What factors help to influence what film you’ll watch?
  • Where do you usually get your information for a particular film?
  • What was your motivation to attend a film festival?
  • What did you like the most about your experience at a film festival?

We launched this survey in Reddit and shared it on other platforms as well as shared it with friends and other people. What didn’t expect was how people were so active and committed to this topic. We obtained an amazing number of 251 responses so, we spend time analyzing all this data. The majority of responses were between 18 and 25 years old and 41% consider themselves as film enthusiasts.

For the interviews, VIFF provided us a contact list and we contacted people from the list who attended the festival. We interviewed 6 people who were out of a young target demographic that the client wanted to reach. In general, people were happy with the app but it can be improved in terms of usability. Some of the pain points detected from the interview were:

  • Users can’t be able to create an individual schedule for films.
  • There are no in-app purchasing tickets.
  • Users have to download a new app for the festival year by year.
  • They have to consult external resources to get more information.

As a result, some of the key findings we found were:

  • Factors that influence the audience to watch a film were the plot, director, cast, trailers, ratings, and reviews.
  • How important are film information, write-ups, the inclusion of trailers as well as rating and reviews.

Planning

Finishing all the research, we started planning part by analyzing tones of information we got and collected them in the affinity diagram. This tool helped us to clarify all this information and justify the desirable features of the app.

Working on the affinity diagram

From our affinity diagram, the majority of people’s behavior consisted of watching films monthly with friends. In addition, they find trailers on Youtube. As VIFF members, they receive newsletters, don’t need to buy individual tickets during the festival and attends to year-round.

With regards to preferences, they don’t choose a film because of the schedule, predictable or unoriginal plot. Also, they choose films because of genre, directors, trailers, reviews, and ratings.

Some social ideas proposed by them were sharing schedule with friends, comment films with other film enthusiasts and leave reviews or ratings.

What people want from the app is to categorize, add notes and favorites — all in one platform — bookmark what they want to watch, check tickets availability and purchase tickets through the app and auto-schedule film they want to watch.

Our affinity diagram

We also discover some of the ‘must-have’ and ‘nice to have’ for our MVP. For example, clarify the user calendar as a ‘must to have’. As a ‘nice to have’, clear ‘add to calendar’ and ‘add to cart’ option.

Identifying the pain points was very useful thanks to the affinity diagram. As an example of these pain points, people spend hours on external platforms looking for film information, they only can buy tickets one by one and they have to repeat the same purchase process once again. What's more, people don’t use the community section properly because they promote blogs and use them to direct traffic to their personal website.

Information architecture was more clear because of the affinity diagram. Links to trailers, choose to watch a film because the place where was filmed, film cast information, film description or ratings and reviews were important elements to include in our information architecture.

All these key findings were translated into our user persona.

Presenting Drake Smith and this is the scenario for our film enthusiast:

Drake is 24 years old millenial. He’s a student while also works as a freelance photographer in his spare time. Drake considers himself to be a film enthusiast, always determined to see new and interesting films. Drake has been exposed to VIFF and has gone to a few screenings, but this year he is planning on immersing himself into the full festival experience.

Based on the user persona, we defined the user journey map by different tasks that Drake can do through the app, questions about these tasks and some ideas for the app functionality.

Drake’s tasks:

  • See this year’s featured film
  • Add films and events that he wants to attend to his schedule
  • Learn more about a specific event or film
  • Browse a movie genre
  • Purchase tickets for an event or film
  • Read film reviews and rate and review a film he just watched
  • Look at his tickets purchases
  • Share a film he just watched using social media to his friends who are also attending VIFF
User journey map

A good Information Architecture was crucial in order to organize that amount of information contained on the app. From the affinity diagram, we got the first steps to creating our IA. Collecting all this data and the data from the interviews and surveys, we were able to group all this information into categories. However, because of this huge amount of information, we went through several iterations but we came up with our IA.

Our Information Architecture
  • Home. It contains a list of films or events divided into different categories such as featured, recent, top-rated or upcoming.
  • Search. Lets to browse films or events and it is possible filtering in order to be more accurate.
  • My lists. It shows a list of films or events — divided into bookmarks that collect films or events that the user likes — and a schedule for those films or events in which the user is going to assist.
  • Tickets. As the name says, it gathers all the tickets purchased by the user and it’s divided into upcoming and past tickets.
Film and event profile in detail

For the user flow, we analyzed the current app user flow in order to understand better how is the interaction with the app.

Current user flow

This user flow has an amount of different and complex flows, some of them are repeated such as VR Exhibitions and Talks.

Having analyzed the current user flow, we decided to simplify it and we came up with new user flow.

New user flow

Based on what’s more important for the user, this user flow simplifies the app in five different ways:

  • Browsing films and purchasing tickets.
  • Reading and writing reviews.

These two flows let the user find more specific information about films. The user searches a film and the app shows a list of movie results. A movie profile pops up when the user selects a movie from the list. The movie profile shows information related to the film such as cast, duration, venue or media, as well as see all the reviews done by other users or write a review of that film. In addition, the ‘buy tickets’ button lets the user purchasing tickets for that movie.

  • Customizing schedule and solving a conflict between screenings. When the user searches a film and selects a specific movie from the list of results, the user goes through its profile and can bookmark that movie. This film is added to the ‘Bookmarks’ section in which there is a film or event list based on those films or events that the user is interested in. What’s more, this film or event can be added to ‘My schedule’, a calendar list which it main function consists of gathering every film or event in which the user is going to assist. That’s possible by selecting a specific day and an hour and adding to ‘My schedule’. However, it is possible that the user wants to assist in an infinite number of films and events and doesn’t realize that it is scheduled the same day and time. For that reason, the app is going to notify when that scheduling conflict happens by sending a notification that suggests rescheduling one of these films or events. Going further, the app helps the user suggesting alternative screenings and the user chooses a different screening. Then, ‘My schedule’ updates all these new changes.
  • Filtering. The user goes through the search bar and different filtering options pop up. As an example, the user can filter by genre, date or venue and the app shows a list of results based on these filters.
  • How to arrive at a venue. When the user selects a specific film or event, the user can go through its profile. Then, the user taps on directions and Google Maps shows how to arrive at the theatre.

Design

Designing the wireframes was critical to see our ideas come to life and to present a decent and professional project which meets our client expectations.

Mid-fi wireframes

For usability testing, four people tested our mid-fi wireframes. We established the following tasks measured by their completion rate:

  • Filter a movie by genre and bookmark it — 75% completed without help.
  • From your bookmarks, add that film to your schedule — 100% completed
    without help.
  • From your schedule, purchase tickets for that film — 100% completed
    without help.
Images were taken during the usability testing and some comments from the testers

From the usability test, we discover that:

  • Genre and typeface were confusing to one of the testers.
  • UI changes such as font sizes.

Finally, we applied these suggestions and proceeded to design hi-fi wireframes.

Hi-fi wireframes
Prototype

Check out our prototype!

https://xd.adobe.com/view/e7f47066-8f28-4f30-5197-35a0598354f7-91c5/

Future considerations

We were thinking about additional features and usability and we came up with the following ideas based our ‘nice to have’:

  • Voting for the People’s Choice Awards. Create a section in which the user can vote for a film included in the People’s Choice Award category. At the moment, when the audience assists in a movie during the festival, the staff give them a ballot. At the end of the movie, they can vote using this ballot.
  • Social media connection. People can share those films or events with other assistants by social media.

Team

Amanda, Jennifer, Rafay, Achal, Newton, Miriam

Tools

Sketch | Miro | XD | Medium

--

--

--

Half UX/UI Designer, haft Art Director with a touch of web dev. Sometimes I write articles. You can find me on: www.miriam-bellon.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Day I Became a Designer

Person with headphones sitting at their computer.

BEHIND THE SCENES: The making of the YOUNGBLOODS Collection

The Geodesic Equaliser and why it’s such as good fit for purpose

READ/DOWNLOAD@% Information Dashboard Design: Displaying Data for At-a-Glance Monitoring FULL BOOK…

Creative Deviance: Knowing When To Break The Rules

Cover Photo

brian matzat is building an island

Unique Epoxy Floors

We made your NEWS reading experience more personalized and much more interactive!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Miriam Bellon

Miriam Bellon

Half UX/UI Designer, haft Art Director with a touch of web dev. Sometimes I write articles. You can find me on: www.miriam-bellon.com

More from Medium

National Alliance for Volunteer Engagement: A website to reflect a new iteration of volunteer…

A screenshot of black-and-white wireframes created in Figma. The wireframes include ‘home’, ‘about us’, ‘meet the team’, ‘contact’, ‘research’, ‘call to action’, and ‘statements’ sections.

Follow the Gravity Works Curriculum for Global Accessibility Awareness Day (and week!)

a laptop computer equipped with assistive technology and hardware

summary of the first 3 chapters of Refactoring UI book-Adam Wathan and Steve Schoger

My negative experience with a UI of an Online Banking App (and suggestions to fix it)