MY ROLE: UX Designer
For this project, I served as Product owner, performed User Research and Testing, and created the interface.
THE PROJECT DESCRIPTION:
Creating MobiStudio
MobiStudio was an app that enabled voiceover talent and audio engineers to collaborate with professional broadcast and recording facilities. A major feature of the app was to assist with distributing professional-grade audio files from a portable device such as a smartphone or tablet.
THE PROBLEM
Audio engineers are unable to utilize common apps such as Skype and Zoom due to poor audio fidelity, uncontrollable dropouts, and digital glitching as well as poor quality recording.
THE SOLUTION
MobiStudio solves these problems by creating real-time communication app that is capable of broadcast-quality transmission of media.
THE MARKET
MobiStudio is for audio professionals and studios that implement and utilize on-location or remote recording. Some examples would be on-location news reporters, investigative journalists, and professional voiceover artists.
THE FUNCTION
MobiStudio is an app that works with three main functions running simultaneously. It works as a real-time two-way communication program such as Skype or ZOOM with the exception that it is strictly audio-based and does not utilize video.
Additionally, the app permits simultaneous recording of the user's voice as a local file on the local device. The third function is the uploading of user-defined and accepted files to a myriad of storage options, from Dropbox to private servers. Since all critical audio is recorded locally in real-time but uploaded in the background, dropouts or digital artifacts are eliminated, resulting in a professional audio file for the end-user to implement for airing or productions.
THE RESEARCH
I spoke with many industry professionals about what products they currently used and the painpoints for each. After analyzing these discussions, I deveopled two main personas: industry professionals and novice users. Additionally, navigation and execution of tasks needed to be simple and intuitive. Feature-richness was not as imperative as was efficient workflows. As a result, the app needed to focus on a few functions and execute well as opposed to many functions that would confuse the user.
Simplicity was the key.
USER STORIES
From the research, I created a series of users stories, which would later inform the features for the MVP. A few are listed below.
As a REPORTER/LOCATION RECORDIST, I want the app to communicate status through easy-to-locate icons/menus so that I can avoid accidental mistakes.
As a VOICEOVER ARTIST working in my home studio, I want the app to be super easy to use so that I don’t have to deal with a lot of complex stuff while delivering my voice-over work.
As a NOVICE USER, I want the app's configuration to be familiar to me from other similar apps that I use so that I don't make a mistake in either recording or sending the files.
WORKFLOWS
I created a workflow that would minimize the amount of physical interaction between the app and user as a default. This resulted in balancing the density of information that was contained per screen with the number of clicks and swipes necessary to perform most important tasks.
All screens (with the exception of the login screen) were desiged to maintain a consistent layout with the screen divided vertically into three areas: Information, Action/Content, and Navigation. This allows the user to access all information and functions of the app from any screen.
The main focus of the app is recording. The record screen would therefore need to contain pertinent information regarding all three parallel functions of the app: Communication connection, Local Recording, and Background uploading.
The app also utilized prompts that aid the user in settings for each project. Novice users would have a guide helping them along the proper path, while seasoned users would be able to choose if they wish to customize to their particular recording session.
THE UI DESIGN
The UI design deploys one solution that became evident from the user testing and feedback. The design implements industry-standard color palette for transport functions and sports a high contrast color scheme to have the pertinent items ”pop” without much need for the user’s eye to search for them. The size of icons and text were implemented in a hierarchy of importance. Active prompting also was implemented to aid the user with workflow, such as in the example of accepting or deleting a recording as well as performing instant uploading of current audio files.
I located the action buttons in the lower third of the majority of the screens in order to afford the user with the ability to control most functions of the app with their thumb while holding the device. In situations where an external microphone must be held with one hand and the recording device with the other, this would allow the user to have full control of recording without requiring two hands.
Green colors used for safe and positive actions while red was use in cautious or negative actions. In this screen the function for selecting a file for deletion is signified with a red toggle switch while a file selected for uploading receives a green toggle switch. Navigation buttons have been coded with a blue color.
I wanted to the colors to be based on a US universal standard.
With that in mind, I chose to utilize the following motif: Red=Stop/Alert/Negative, Green=Go/Positive. I assigned the color blue to any navigation control as well as the background of the main waveform window background due to its calming nature as well as contrasting well with the black waveform.
Text and backgrounds were kept in a 5-grade greyscale format. This assured that any non essential information while operating the app would not conflict with the main buttons and functions being communicated to the user of the currently selected screen.
Similarly, I used industry standard recording symbols to be sure that the user would be familiar with the interface and help avoid confusion.