APP

FanCon

PROJECT GOAL

Create a place for members of a fandom to have expressive conversations.

CLASS

Interaction Design: Storytelling

DURATION

14 Weeks

ROLE

Interaction Designer

Quick Overview

Users

Meet Anthony, a fan of the character Batman.

Needs

He wants to talk to other fans as if they were in the same room.

Uses

With FanCon, he can comment in context of a photo to make clear references

Features

while seeing other users comment in real-time with him

Products

in a way that is authentic and expressive.

Source: www.boxozombies.com

WHAT'S A FANDOM?

A group of people who share an interest in a TV series, movie, book and other forms of pop culture.

Other examples include Star Wars, Game of Thrones and Harry Potter. For this project, the character Batman was used as the example.

PROBLEM SPACE

Current social networks do not reflect the conversations fans have in person.

MARKET RESEARCH

Conversations online are one-sided or text-heavy.

  • Current live-streaming services are usually led by a host
  • The host leads the entire conversation which reduces the opportunity for engaging conversations
  • Reddit, Facebook and Twitter are a good place for deep conversations, but it is never as engaging as the live-streaming services since the conversations are done in real-time.
  • They are also heavily text-based which requires users to give a lot of context when commenting.
Engaging, but involves a one-sided conversation by the host.
Deep community-led discussions, but not engaging.
Batman fan Timothy Campos pointing at photos as he is talking about a few Batman references.

INTERVIEW INSIGHTS

Fans want an experience that reflect real-time conversations. Conversations are made by pointing at things in front of people which helps make it clear on what is being referenced.

  • Communicating in a fandom is a very visual experience. The conversation heavily revolves around imagery. We have to recreate that imagery through our words.
  • I noticed that pointing at things within the images helped them communicate what they were referencing vs a conversation without photos.
  • While pointing at something, they would bring in other images to explain a reference.

INTERVIEW INSIGHTS

Fans want to talk to other fans as if they were sitting in the same room.

  • Fans want something close to a live experience for more immersive and authentic conversations.
  • Fans want their references and comments to be as clear as possible.
  • Experience needs to be highly visual, but it should allow for deep and engaging conversations.

PERSONA

ACTIVE MEMBER OF THE BATMAN FANDOM

Anthony Lee

“I want to talk to fans online as if they were in the same room. I need my references to be clearly understood.”

ABOUT

Anthony leaves comments on Batman fan communities on social media like Facebook, Twitter and Reddit.

PROBLEM

He feels that his message never gets across to other fans. Talking to them online isn’t engaging enough for him.

GOAL

To get his message across as authentically and clearly as possible.

DESIGN PRINCIPLES

Visual

Since being in a fandom is a visual experience, imagery should be the forefront of the conversation.

Expressive

Fans should be able to express their thoughts and opinions clearly and be able to generate a meaningful conversation.

INITIAL IDEATIONS

I aimed to ideate on expressive real-time conversations. Most of them consisted of video which wasn’t ideal for users who didn’t want to show their faces.

I had ideas where fans could contribute to the conversation equally through live group video chats, but there were concerns about showing their faces and missing out on live discussions. My other ideas involved users texting in real-time and commenting live on either a video or image. Missing out on live discussions was a major concern for users since it gave them a lower chance to express themselves if they could not attend the live discussions.

NARROWING DOWN

Not being too literal with the idea of real-time conversations and reflecting the experience of pointing at something and talking about it.

With the issue of fans not being able to attend live video discussions, I decided to go back to using text as the primary form of communication and add features that would simulate a real-time conversation. From my previous ideations, user-testers liked the idea of annotating on a specific part of a video or photo because it reflected the experience of pointing to something and talking about it to people in person. I primarily felt this would be valuable for fans because their references would be a lot more clear and expressive; especially when being in a fandom is a very visual experience. The challenge was figuring out how long comments would scale.

The challenge was to visually keep comments in context of the image.

In this wireframe, I had annotations on an image. Its associated comments would be found below the image. Each comment would have a thumbnail indicating where the annotation was made. Users could have long detailed comments while being able to reference what they were talking about.

GOOD

  • The design scaled well for long conversations.
  • It did not feel very cluttered.

BAD

  • The image and comments are never in the same viewport.
  • Comments are taken out of context from the image.

MID-FI WIREFRAMES

Having annotation comments staying within context of the conversation for a more expressive experience.

For a more expressive commenting experience, I overlaid the annotation comments over the image that was being discussed. I previously had issues with scalability with long comments which led me to use a card that would contain the comments. This card would take up half the screen and the comments contained within it would reflect the annotations that were being selected. This card would always stay in context of the image that was being discussed which allowed for more authentic and engaging conversations.

HI-FI WIREFRAMES

Little details like updating comment count in real-time and showing users who are currently writing comments.

Small details were added to recreate that feeling of someone having a discussion right next to you. The number of comments for each annotation would update in real-time to give the user the impression that he was not commenting in the post alone. To further expand that feeling, an animating chat icon would appear whenever a user was typing. This created an even more authentic discussion experience which helped entice users to comment. With these small details, we can still simulate a live experience without the need of a live video discussion and create a discussion experience that everyone can contribute to.

HI-FI WIREFRAMES

Moving away from messaging board paradigms and moving towards messaging paradigms to encourage engagement.

Users mentioned that the many lines of text in the comments didn't motivate them to engage in the conversations. Replies to comments were also not displayed inline which made it seem like people were talking to themselves. I borrowed messaging paradigms like the chat bubble to make it seem like people were actually chatting to each other to make the conversations more expressive and encourage engagement.