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.
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.
“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.


