Case Study: Theatrics web app and mobile site

Intro

Theatrics.com was a seed funded startup with a platform for creators and transmedia producers to tell stories online with tools to develop and control their video productions by involving their users, fans and audience members in content creation. Creators establish the story world, characters, and plot so that their audience can co-create the end result by interacting and participating in the show.

This platform integrated different features such as discovering new shows (à la Hulu, Netflix), watching shows (à la Youtube, Vimeo) and engaging in social media for the shows (à la Facebook).

This is my role in redesigning Theatrics.com to a deeper and more engaging user experience.

My Roles

I led the UI and UX efforts in the company to achieve several specific business goals, including attracting and retaining users and increasing time spent logged in.

User Research

Fans want to engage with their favorite shows and films after it's over on the first screen (TV).

Filmmakers, writers, directors, and transmedia producers want to take the audience beyond passive viewing in to a new form of deep online engagement and participation on a second screen (tablets, smartphones, computers).

Actors and fans also want to participate and co-create these stories.

Prototyping

I made extensive use of the whiteboard for sketches and brought in different stakeholders in so I could see them interact with the sketches. I also made user flow diagrams and wireframes.

Design Execution and More Testing

I designed and did front end development for a php framework. I executed wireframes, site maps, user flow diagrams and design specs.

site map of a theatrics app

Leadership

I managed up by presenting prototypes and mockups to executives and other stakeholders. I managed beside me by working with software engineers to test my UI designs and understand the UML diagrams and how the software architecture worked.

The Challenge

Hold the attention of and expand a show’s devotees even during periods of hiatus.

There were three parts for our challenge.

  • Design an UI layout and onboarding process to make it easy to learn how to use Theatrics.
  • Design tools that would enable users to spend long amounts of time acting, directing and editing their show.
  • Design gamification and social media features that would cause users to engage with their show and discover other shows.
wireframes of a theatrics app.

The Work Flow

UI design and development were broken into parallel workflows using the waterfall model of software development. I led the design for all aspects related to the UI and UX.

Hold the attention of and expand a show’s devotees even during periods of hiatus.

Customer Insights

These are the key insights that formed the launch version of the product:

  • A lot of people want to be actors but they hide that private side of their personality in public.
  • Fans want to be a part of a story they believe in.

Theatrics’ platform is youtube, kickstarter and facebook combined: It enables creators to tell stories in different ways, crowd-source content creation and fan fiction and share it internally and externally on social media.

Educating the user about our platform

Theatric's potential users already knew how or has heard of youtube. We had to make sure that users knew to use our platform, which has actor and showrunner-specific tools unlike a general audience platform like youtube, daily motion or vimeo.

Participating in a story takes time so make it enjoyable

The main purpose was to get users to participate in the shows. We focused on making the process as simple as possible.

  1. Watch the story unfold.
  2. Record your character's reaction and role in it.
  3. Upload the video to the platform.
Give people the chance to be an actor.

How We Created Theatrics

Video First

This most important part of the design was the video page. These pages are the most viewed pages of the whole app and the reason why visitors joined and decided to participate.

Aurelia: Edge of Darkness show page is shown as viewed on an iMac.
Aurelia: Edge of Darkness show page is shown as viewed on an iMac.

Mobile Second

As more and more users registered, we saw in the forums a need for a fully featured mobile site. Users did not want to go home, turn on computer, log in, record themselves and then upload the video. They simply wanted to participate in the shows from wherever they were on the spot using their device in hand; they had device inertia.

The mobile site also required a different experience due to screen size. We ultimately decided to customize it to display a social feed of all videos for the home page for easy viewing on load.

The two areas that were most debated were:

  • What size do we make the video player?
  • What features do we add to the experience?

The video dimensions was initially 70% width with a 30% width area for video information. After researching several video sites around the world, I proposed widening the video player as it was too narrow to enjoy a cinematic experience. The sidebar was also distracting as it took attention away from the video.

Combining crowd-sourcing, video playback, story telling and social media can result in a bloated app. I worked with the visual designer and social media manager to prioritize from our list of features. Ultimately, the features that were deemed high priority were directly related to aspects of story creation e.g. document upload, among others.

Aurelia: Edge of Darkeness show is displayed as a mobile site viewed on an iPhone.

Detailed Specs

I created two rounds of detailed photoshop mockups during this project to communicate requirements to the engineering team.

I also tested different navigation options for the video pages.

Technical Challenges

In beta testing, we encountered several file size issues where users were recording themselves in high quality HD video using their smartphones and directly uploading it. We corrected these after discussing using smartphones to record and upload videos versus using computer to record and upload, research and further testing.

Domino Show page is shown as viewed on an iMac.
Domino Show page is shown as viewed on an iMac.

Post Beta Launch Lessons

Converting users in to paying customers is hard

While theatrics had a good idea, we encountered the classic startup problem: How to make money. Internet users are used to free so it was challenging to monetize this experience.

The Impact

Theatrics was already three years in the making before I was hired. The launch of this redesigned beta version resulted in over 4,000 registered users which was the highest amount ever.

What I Learned

Meet the consumer where they are

At first we only developed for desktop as part of the second screen experience. All the wireframes, sitemaps and mockups I made was for a computer. Only by listening to users in our support forums, did we realize that people didn't want to go through the hassle of using a computer when they were already holding a smartphone.

The End

I wish I could say theatrics made it.

I enjoyed working on this platform because it combined so many different features. I enjoyed giving every day people a chance to be an actor and participate in a story world they help create.