Doc City — Case Study

Mobile App Design

The final project in the UX Design program at RED Academy.

About the Client

Our client had been working with the Mindset Foundation on a Community Scholar Project, which focuses a lot on social connection in communities. She had always been very interested in this kind of work and really wanted to tie it back to her primary passion: documentary films.

The Challenge

The idea is to build something that creates community, raises awareness and increases exposure for filmmakers using documentaries as a tool. We were given 3 weeks to design a free online platform that facilitates group meetings through documentary screenings enabling connections between people and ideas. These can take place in a diverse range of locations chosen by DocCity hosts such as living rooms, backyards, rooftops, parks, communal rooms and in people’s work environments.

The methodology behind this is that when people are networked they are more likely to take action through momentum from being with others (discussion, group energy, etc). When people watch a film, there is a small window of time where they may feel compelled to act. DocCity multiplies this opportunity through creating an infrastructure where people can experience this together.

Meet the Team!

DocCity UX Design Team

Gathering Information

Before we could get started on this project it was important to first understand what products and organizations are currently out there offering a similar service. We found that most movie events are organized using 3rd party social network platforms and don’t necessarily have one dedicated website that focuses on the organization of these events such as Facebook and Meetup.com

However, there are some currently existing organizations that focus on organizing documentary meet ups and have their own dedicated website.

  • Awareness Film Night: Organized by volunteers, runs monthly by donation from October until May and features selected documentary films on topics normally disregarded by the mainstream media in the theater at Edward Milne Community School.
  • DocBC: Non-profit organization of documentary filmmakers, it runs monthly, documentary showings are free for members and $25 for non members or $10 for students. Featuring mostly local BC filmmakers.
  • Reelhouse: An online video community that provides filmmakers complete control to self-distribute content directly to their viewers. They can sell films, generate support, or give it away for free.

Similar-model organizations:

  • Sofarsounds.com: Music event hosting.
  • Airbnb.ca: Accommodations for travellers hosted at a private residence.

So, Why DocCity?

DocCity is a combination of all of the above organizations consolidated into one platform, creating a unique way to meet new people and engage in meaningful discussions, while promoting independent filmmakers at the same time. Anyone can easily go on meetup.com and organize their own movie night by streaming Netflix, but that would be missing the point. While hosts are not restricted to only showing independent films, DocCity highly encourages this and provides hosts with access to films that simply can’t be found on Netflix or other online streaming services.

Understanding the User

We sent out surveys through social media and conducted several interviews targeting two groups of people: guests and hosts. We received close to 30 survey responses and conducted 9 in-person interviews. The data was sorted as a group through an affinity diagram.

Affinity Diagram

Findings

As we analyzed our data we found that trust and safety are major concern for both guests and hosts. From a guest perspective there is a risk associated with going to an event hosted at a stranger’s home. Same goes for hosts as they would be inviting a whole group of people they have never met before into their home for a few hours.

Another potential issue for some is uncertainty. The size and location of the event are two factors that affect the decision to attend a screening.

Almost everyone we had the opportunity to speak with seemed to have similar goals — meeting like-minded people was a common challenge so naturally many expressed that they are interested in new ways to meet others with the same interests.


Taking our understanding of the user, we decided to narrow our focus down to the following features:

What is DocCity? — Information about what DocCity is and how it works!

Search — Search for upcoming screenings in your area or find something specific to your tastes and preferences.

My Screenings — Keep track of what you’ve attended and what’s coming up that you’ve signed up for!

Event Information—All event details listed on one page for easy reference.

Profile — Easily edit personal information and privacy options.

This became the base for the information architecture and it was important to emphasize these features to make sure they are obvious to the user.


Tackling some of the issues we discovered during our research, we came up with the following solutions:

Trust and Safety — These are issues shared by both the host and the guests. Including a form of verification. DocCity requires users to input their mobile phone number. Upon doing so users will receive a verification code that must be entered in order to attend any screening. The implementation of a review/rating system for hosts also helps users determine if they are entering a safe environment.

Uncertainty — Providing detailed information about each event all in one place (film title, location, date, time, guest attending, spots remaining, etc.) adds more context for the user. The more details given, the easier it becomes for the user to decide if they will attend or not.


Moving on, we wanted to create a simple, yet interactive way for users to explore DocCity. Keeping the above features in mind, our solution was to provide lots of imagery, interactive buttons and a hierarchical menu navigation.

Whiteboard Wireframe Sketching

Art Direction

We experimented with a variety of different colour themes and decided to go with red for buttons and the footer. This coincidentally worked well since it happens to be the colour that provides a sense of protection from fears and anxiety (which is exactly what we are trying to do with this project!).

Typeface and Color

Originally we had decided on a very dark shade of grey (almost black!) for the main navigation bar. We later changed it because it everything started appearing too “bold” and that wasn’t in the art direction we wanted. We settled with white as gives a cleaner and lighter look which is more aligned with what we were going for.

Main Navigation Bar

Test. Iterate. Repeat.

After brainstorming and generating some more ideas on a whiteboard we created a low-fidelity prototype to test what works and what doesn’t, then made changes accordingly. Some of the primary changes we made were:

Event Details Screen
  • Venue Type — This was an important detail that we had completely overlooked. It is important that users know if they are signing up for a public or private event.
“The environment has to make people feel safe. As a woman, I would want to know a little bit about the hosting location if it’s not a public space.”
— Katherine, DocCity User Tester
  • Documentary Description — Users stated that it would be nice to see a description of the actual film on the event page so that they won’t need to look up on another website what the film is about.
Documentary Description
  • Tags/Added Customization —Lack of customization made the app feel like it was missing something. So we came up with system that allows users to add a list of interests to their profile which will suggest upcoming screenings specific to each user.
  • Language — Some users became confused with the wording we had originally used for some of the buttons so we decided to simplify the language. We also made it more casual so it sounds like the service is speaking directly to the user to give a sense of familiarity.

It also came to our attention that the user should be able to search for screenings without having to create an account or sign in — this is so that potential users will be more inclined to register if they see something they like screening in their area.


The following are some sections from the final product:

Prototype

User Scenario

“Diane recently moved to Vancouver and doesn’t know many people yet. She wants to meet like-minded people through DocCity but first she needs to create an account, search for upcoming documentaries and then join a screening event!”

Click the image below to view the prototype in InVision:

Summary

In the beginning we all had so many great ideas and we were really eager include everything, but eventually it got to a point where we had to prioritize and really narrow our focus down to what was most important. We learned the value of time and that focusing on the most necessary features is probably better than including everything if you want to achieve a great product.

In the end, we were able to design what we set out to do: create an online platform that engages users to participate in a new, ever-evolving diversity of offline spaces. Tackling the barriers of trust, anxiety and context through design, we were able to create a whole new meaningful way of bringing people together.

To put it simply, DocCity is a product that allows users to:

  • Gather — Come together as a group.
  • View — Watch documentaries about topics of interest.
  • Share — Have a meaningful group discussion about the film and make a difference.
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.