MoJo: The News Van in Your Hand

An Upcoming Journalistic Livestreaming App, tailored to help journalists succeed in the field

MoJo is an iOS application tailored for journalists to use in the field. They add B-Rolls (short video clips), Interviews (long video clips), Photos, and Maps to a project, and then merge it all together while livestreaming to create a professional news story. This app helps prevent journalists in the field to miss important breaking news footage: sometimes their equipment setup takes too long and by the time the equipment is setup, the news has already passed - a good example is a fire that gets put out before the journalist can cover it.

Project Type:

Client Work, hired pro bono by Journalists who work at ABC News

Timeline:

May 2019 for 2.5 weeks

Role:

UX/UI Designer, UI Design Lead

Team:

4 UX/UI Designers

The Problem

Journalists are consistently missing breaking news coverage due to the delay in equipment setup. Sometimes they just need to cover news quickly but are missing the tools to help them create a professional looking video that does not compromise quality and reaches a wider audience.

The Design Challenge

When journalists are out in the field, they need to be able to record, edit, & access their gathered information to provide a seamless news report when equipment setup takes too long. They typically have 4 main segments that need to be added to create a livestream that looks like it was professionally made - B-Rolls, Interviews, Photos, and Map Location. Journalists need to be able to seamlessly combine these sections, start livestreaming, and then play each section as they talk over the segments added.

Our Solution

We first conducted user research, talking with potential users of this app, all of whom are journalists who have worked (or are currently working) in the field. Based on the research, we designed an app that allows journalists to create a new project, then add individual elements (B-Roll, Interviews, Photos, and Maps) and customize those. They can add them as previously taken from their camera roll or cloud, or they can take them directly in the project.

Research Discovery

  • Competitive & Comparative Analysis

  • User Surveys

  • User Interviews

  • Analysis of Existing App

Understanding Users Feelings Towards Mobile Journalism

107 Survey Participants, all of whom have had professional experience in the live news industry

We wanted to further discover our user demographic and to gauge their feelings on mobile journalism and the future of it in the journalistic industry.

Survey Equipment setup.jpg
Survey_ Use Phone.jpg
Survey_ news platform.jpg

We discovered more than half of users miss breaking news due to the lengthy equipment setup process.

Those who answered no are mostly worried about quality - shaky video, wants brand to look polished while recording, worried about professionalism and looking cheap.

This shows that Social Media is of high-importance to journalists, both to get their news and to share the news they broadcast.

Primary Survey Findings:

We learned journalists are mostly open to using their phones to capture news stories and share them on social media, but some are concerned over lack of quality and professionalism. We also learned that social media currently has a large reach in the journalistic world.

Understanding the Experiences of a Field Journalist

We interviewed 7 journalists who are working or recently worked in the field

We dove deep to understand any setbacks journalists face in the field, if they ever use a phone to broadcast live, and learn about any tools that are most helpful to them. We also wanted to understand their thoughts on how they see the future of journalism changing.

interview_male_blazer.jpg
interview_female_vneck.jpg

“Everything is moving towards the phone.”

Journalist #1

"We don't use news vans because they are a pain in the a**."

Journalist #2

“Using the phone is much more immediate & easier to get in touch with a wider audience.”

Journalist #3

Primary Interview Findings:

Journalists are very interested in mobile journalism, but not complicated apps. Things need to be saved on the Cloud, in case their phone is broken or lost. They also constantly utilize social media to discover potential news stories and to share news.

Defining the Problem

  • User Personas

  • Journey Map

  • Feature Prioritization

Understanding How This App Will Improve Users Lives

Two User Personas: Harmony Hall & Lance Lancaster

Based on the research we previously gained, we created a persona who is a seasoned journalist as well as a newcomer persona who is just starting her career. We created these personas to identify how our average user behaves as well as help us empathize with them by giving them a real face. This helps us to keep the user at the forefront of the process because we can continually see them as real humans.

Harmony & Lance's Experiences Pre-App, Mapped Out

Through making a user journey map of the high and low points of our persona’s experiences before they started using the app, we can further understand where they are struggling the most, helping us to prioritize the right features.

Features That We Discovered Needed to be Prioritized

Based on the research we gathered about our users needs and pain points, we ordered which features should be prioritized according to what the app must have, should have, could have, and will not have. This helps prevent feature overload, so we can keep the focus on what is most important for the users.

Problem Statement Redefined

When journalists are out in the field, they need to be able to record, edit, and access their gathered information to provide a seamless news report.

 

Both Harmony & Lance are having trouble reporting and delivering breaking news in this area in a timely manner.

 

How might we offer them a solution that streamlines this process while not compromising quality and reaching a larger audience?

Design

  • Design Studio

  • Paper Sketches

  • Re-Branding

  • Style Guide

  • Prototypes 

  • Usability Testing Each Prototype

Collaborative Design, a Team Effort

We started with a Design Studio to get our Creative Juices Flowing

Before we started designing, we each took 5 minutes to draw out our ideas for individual pages. After each page, we grouped together and discussed each idea, then combined the best suited ideas and had one person on our team draw it out into one cohesive flow. In this way we were each able to get our ideas out there and then agree on how to best move forward with the initial design.

Key Takeaways from Design Studio:

During this stage we found ourselves thinking deeply about each possible scenario that could take place while a user is putting together a video on this app. While this step took some time, we were able to create a more thought-out product that included:

  • Being able to trim a clip from B-Roll or Interviews and what that process would look like.

  • How to rearrange the clips.

  • Where all of the buttons should be placed to minimize chaos and maximize productivity, specifically the "end livestream" button.

Initial Prototype, Sketched on Paper with Pen

10 Users Tested, 2 Iterations

By incorporating the research and prioritized features we previously developed, we sketched up and tested 2 low-fidelity prototypes. At this stage, we started mimicking iOS interactions, such as popup modals and sliding components.

Key Findings:

  • After going live, there should be a button clickable at all times to exit the broadcast

  • During onboarding, there should be an option to skip

  • There are too many options for drawing & adding text to maps 

  • Going Live ought to be in the carousel

Features Implemented After Testing:

  • Record, play, & live buttons clear & consistent throughout

  • Option to exit livestream available throughout

  • Separate play button for B-Roll/Interview clips

Mid-Fidelity Prototype, No Branding & Lacking Stylization

3 Users Tested

This prototype focused on layout and how clear it is for people to use when it is cleanly made on Sketch. We didn’t yet put any emphasis on branding, though we played around with the idea of a black, red, and neutral color scheme.

Key Findings:

  • Option to capture/import/save photos necessary

  • Thumbnail clips and play buttons are too small

  • Volume toggle options to use during B-Roll footage missing

Features Implemented After Testing:

  • Photo function added to carousel menu

  • Larger, more accessible thumbnails and play buttons on various screens

  • Ability to change levels of volume on B-Roll & Interview screens

Re-Branding & Name Change

Originally, the name of this application was called “VOSOT.” This is a common journalistic term that means Voiceover/Sound on Tape. During usability testing, we asked users about their opinion regarding this name. They consistently said that while they recognized the term and used it often, they felt that this was an inadequate representation of the app’s capabilities.

 

MoJo is another journalistic term that stands for “Mobile Journalism.” The term describes the purpose of this app and the users we tested, as well as our clients loved it.

High Fidelity Prototype

For this final iteration, we incorporated the new branding and color scheme, a modal for orientation selection incorporated when starting a project, and an option to re-click thumbnail to close trimming function. 

©2019 by Carissa Gabilheri. Proudly created with Wix.com