Overview
Mashlink is an iOS tool for recording commentary over popular videos. In short, it strives to elevate internet commentary and help brands and social media influencers of all sizes engage with their audiences. As the UX/UI and graphic designer, I was tasked with overhauling the existing app design from a social platform to a productivity tool, along with re-branding the company. The team consisted of me and a UK-based iOS developer, with oversight by the Mashlink founder.
Background
As mentioned, the original Mashlink app was designed as a social platform for creating and sharing video content between users. However, given the number of social apps already available to consumers, Mashlink struggled to gain traction. Subsequently, Mashlink pivoted to an area of content creation that has yet to pick up steam: commentary. As the internet has evolved, commentary hasn't necessarily evolved with it—text commentary isn't compelling and people lose interest in reading even the shortest of articles, GIFs and memes are shallow, and most of it gets lost in the clutter of the web. Mashlink's goal is to address these shortcomings and arm influencers with a new and novel way to comment on video content and reach followers. Music instructors would be able to record themselves teaching the guitar chords to popular music videos; professors would be able to add explanations to academic videos in online courses; and fashion bloggers would be able to critique looks from runway shows during New York Fashion Week.
A few points of research that validated Mashlink as a concept and its target market of social media influencers: video content is on the rise—by 2019, 80% of online content will consist of video marketing (Forbes); mobile consumption of video content increases by 100 percent annually (Forbes); the term “influencer marketing” increased by 325% in Google searches over 2017, making it the fastest-growing online acquisition method of the year (Influencer Marketing Hub); the money is there—approximately two-thirds of marketing departments are looking to increase their influencer budgets in 2018, averaging from $25k-$50k (Influencer Marketing Hub).
Product & Design Concept
At the onset of the design, we set out to answer two questions: (1) What’s the easiest pathway for recording commentary over videos? (2) How do we ensure the tool is as simple and intuitive as possible? We began by determining the structure of the app. Originally, Mashlink was broken up into four sections—home feed, user profile, upload, and search. Given our task of re-purposing the app into a private, productivity tool, we could logically drop all social elements of the app, including the home feed and user profile. After this, we looked at which pathway provided the least amount of friction for getting from point A to point B. We determined the new-look Mashlink would divide into three basic user flows: (1) video selection (from three sources: YouTube, device storage or in-app recording), (2) commentary recording, and (3) export and share. This arrangement had not only been validated by other popular photo/video editing tools (i.e. Adobe Spark), but altogether, it would allow users the quickest and most discernible way to create shareable content.
After configuring the setup, I moved on to defining Mashlink's overarching design principles:
Relevant—More often than not, influencers are posting, sharing, and commenting on newsworthy content. How can we cater the app to fit this agenda? Mashlink users should have instant access to the most relevant video content online and the proper platform to comment on it.
Utilitarian—Given this type of concept had never been developed, it was important that we kept the design as intuitive and straightforward as possible, with a strong emphasis on productivity. This meant basic UI elements (neutral colors, orderly lines, readable text) and a keen attention to the app's usability. The objective of the design is to facilitate easy content creation, not shower users with beautiful graphics and animations.
Branding
After tackling some of the overarching elements, I began forming an approach to branding—What is Mashlink and how are we going to present it to both active and prospective users? The initial app was created with little-to-no design input, so we were essentially starting from the ground up.
As mentioned, Mashlink's goal is to elevate internet commentary and help influencers engage their audiences with new and impactful content. But how would we market this shareable content? When I first met with one of the Mashlink stakeholders, we discussed exactly this—What is Mashlink's end product called? A video with commentary recorded over it is technically still a "video," but the word doesn't quite capture the extent of what Mashlink does. We realized that there is more value in an app whose core functionality identifies with its brand name, similar to how Snapchat messages are referred to as "Snapchats." Such an approach helps reinforce recognition. As a result, we began using the term "Mash" to describe a video with commentary recorded over it. The next step was transferring this message into the form of a logo.
Taking the above into consideration, I strove to create a logo that more accurately represented Mashlink. The original logo omitted the app's wordmark, and used bright, analogous colors and rectangular shapes, providing no clear indication as to what Mashlink does. Because Mashlink centers on content creation, I wanted to make a record button the focal point of the design. The record icon is universal, so users would be able to quickly identify Mashlink with video and content creation. What's more, its circular shape lends to feelings of community and engagement. However, as mentioned, the app doesn't just facilitate video recording, it aids opinions and connects audiences with them—a powerful and dynamic process. To show this depth, I added concentric circles to the button, while adjusting the color palette to an attention-grabbing red and a cool, neutral blue. The idea behind selecting red was to create a sense of excitement among active and prospective users—voicing your opinions is a thrilling experience, and using red as the "pop" color would hopefully help drive usage. In terms of typeface, I selected Libre Franklin—a clean sans-serif font that is easily readable and has a range of weights. The simple letterform makes it an ideal font for a productivity app as it doesn't distract from the basic user flow.
As a whole, the logo is clean and digestible. Viewers can get a sense of the app's functionality at a glance, without feeling overwhelmed or distracted by the design. Its simple shape and bold colors allow it to stand out on a variety of backgrounds and platforms, making it flexible for digital consumption.
Developing a Unique, Consistent Feel
After determining the basic branding elements, I moved on to crafting Mashlink's marketing materials. Print and digital graphics need to maintain a careful consistency, while having a unique and easily identifiable look to them. People should be able to see something in-person or online and quickly recognize it as Mashlink content. Because the app pushes users to engage with relevant topics, I experimented with newspaper effects. I've always loved the look of old print photos—they give off an aura of excitement and nostalgia, a feeling that the world is constantly in motion and that I need to be up to date and aware of what's going on.
To capture the graininess found in retro images, I applied a heavy noise filter to our selected content. However, the graininess didn't go far enough in differentiating our images from standard images, the filter needed a second element. For this reason, I applied Mashlink colors to the content—specifically, by overlaying the subject of the image with Mashlink red and the background with Mashlink blue. Combined, the elements make for a distinct and cohesive look, allowing users to quickly distinguish Mashlink-related content.
In terms of content selection, I focused on using images that feature iconic events and figures from popular culture. The notable imagery aligns with Mashlink's broad goal of getting users to comment on trending videos—like a political speech, stand-up comedy routine or highlights from an NFL playoff game—and adds to the overall mood of the app. Most influencers base their content on current events, and by using examples in Mashlink imagery, it would hopefully help encourage users to record their opinions.
Though it goes without saying, having a coherent approach to branding makes it much easier when creating marketing materials. The preset filters gives Mashlink a distinct and unified look that I was able to carry over to the app design. Below are a few examples of the Facebook and Instagram/Twitter graphics we used in the run up to and aftermath of the release, as well as a landing/marketing page.
Onboarding
Having pinpointed an approach to the product and design concept and branding, I moved on to crafting the high-fidelity mockups, starting with the onboarding module. The onboarding process should do two things: (1) provide a concise, benefits-oriented description of the app, and (2) be as painless as possible, specifically by "showing less and providing more." The last thing we want to do is scare users away before they've even registered. To ensure this, I avoided a tutorial-based process, which forces the new user to read and commit information to memory, a tough and overwhelming ask for a first-time user. Rather than requiring users to work up front, we inserted guidance and visual hints at specific points in the app. This learn-by-doing approach gets the user into the app faster and provides better clarity by surfacing instruction in its proper context. As a result, the introductory screens feature three simple value-propositions—discover, record, share—that help the user understand what the app does and what problems are being solved. The bold imagery plays off of the minimal text, and the clean layout lends to a positive first impression. By introducing a straightforward design early on in the process, users can get assurance that the functional design will follow suit.
Production
Discovery
Once a user has signed in to their Mashlink account, they are redirected to the home screen, which centers on step one of the user flow: video selection. The objectives for video selection were to make it easy for the user to either (a) search and select videos via YouTube, (b) upload videos from device storage, or (c) capture in-app videos using the device camera. I knew that offering a quality discovery process would be key to getting users to create Mashes—influencers want to comment on content that is already attracting attention, so surfacing trending videos became a focal point of the design. Taking this into consideration and given that (a) would likely be the most popular pathway, I chose to catalog a feed of trending YouTube videos on the home screen (called "Discover"). By default, the home screen displays YouTube's top trending videos, but we left open the option of anchoring specific videos should an advertising opportunity arise. If a user is looking for something in particular, they have the ability to browse by category (i.e. news, sports, music, etc.) or use the search functionality. The integrated search bar and suggested "Discover popular videos..." text is prominently displayed at the top of the home screen, giving users a clear and convenient outlet to get started. On search results, the user's query is retained so they can easily refine and reference the original search. When a user taps on a category, they are shown recommended videos in a format that mirrors search results. This view includes title text on the status bar, which allows the user to quickly reference the given category.
In terms of layout, I wanted to clearly distinguish the home screen from the search results and category views. When a user is dropped off on the home screen, they're starting from square one, with no particular video in mind to begin creating a Mash. Because of this, the home screen features large, eye-catching imagery with less value given to the text. Users are more inclined to pull inspiration from an interesting-looking cover image than a plain title. On the other hand, users generally have an idea as to what they are looking for when they arrive at search results and categories. If I'm searching for a recent Jimmy Kimmel clip, I'm going to be paying more attention to the title of the video and less so to the cover image. To accommodate this emphasis on practicality and a need for quicker scrolling, I allocated more results to a single view by reducing the individual tile size. Each UI design reflects how users approach the different features. What's more, on top of accommodating the user's frame of mind, it's important the user build a sense of familiarity with the product—they shouldn't have to think or reference the bottom tabs to know which feature they're using. Because the home screen layout differs from search results and categories, the user can build an inherent knowledge of the product.
In all, the design is balanced and clean. Only the most core information is included on each video tile: thumbnail photo, title, username, and timestamp. Individual content is organized into meaningful sections, helping to occupy less screen space and create a visually-pleasing, top-down hierarchy. Text is truncated after three lines, reducing white space and less essential information. This insistence on simplicity and breathable space helps promote an easy and intuitive user flow and prevents the aesthetics of the design from interfering with the app's usability.
Production
Upload
After crafting an approach to YouTube video selection, I moved on to the next two pathways: (b) uploading videos from device storage and (c) capturing in-app videos using the device camera. The two methods are organized within a single view called "Upload" and are accessible via the center icon on the bottom toolbar—a familiar treatment among apps that involve content upload (i.e. Instagram). The minimal UI elements and straightforward layout helps lend to the app's focus on productivity. By default, the video library preloads the user's most recently saved video and they're able to watch others by simply tapping. The selected video is indicated with a transparent overlay and blue check mark. Selecting "Save" drops the video into an area called "My Mashes" (confirmed with a snackbar notification), so the user has no problem accessing it after exiting the library. The video recording system is that of Apple's standard operating system. Though we expect these to be lesser-used pathways, it's still important to offer functionality that accommodates a diverse user base.
Production
Mash (Empty State)
Now that the user has a video queued up, they're all set to begin recording commentary—step two of the basic user flow and the most difficult part of the configuration. Early on, we knew that allowing the user to record themselves at any given point during the video would be a key objective of the design. For example, if a user has selected a speech on healthcare policy, we wanted them to be able to directly counter or expand on any argument during the presentation. Because of this, the button that triggers the recording operation is prominently displayed on its own toolbar. The Mash button not only looks natural within the existing video UI, but its bottom-center location makes it easily accessible with a tap—perfect for a user intent on recording multiple clips. To help with the onboarding experience, any video without saved commentary shows an instructional message on how to get started (thank you, R2-D2 and C-3PO). This empty state helps guide the user through the Mash process, while reinforcing branding through subtle imagery.
The player itself is clean and intuitive. By default, the video is paused upon being opened, preventing the user from being caught off guard and giving them greater control over the experience—particularly as the user may be opening to Mash to review his/her clips. The blue toolbar appears and disappears with a single tap, providing flexibility in terms of screen space and an easy method for starting and stopping videos. If the user wants to bookmark the video for later use, they can drop it in their My Mashes section by selecting the "Save" option located on the upper right.
Recording a Clip (User Flow)
As mentioned, when the user hits the Mash button, it initiates a new display called "Add Clip"—this is where we expect users to be spending most of their time in the app, recording and adding commentary. With this in mind, I set out to make the sequencing as simple and straightforward as possible. A camera view of the user slides open from the right (by default the camera displays in selfie mode), pausing the original video and condensing the frame. New operational buttons appear on the bottom toolbar so the user can begin recording. After recording, the user has the ability to watch, re-record, or delete the commentary, as well as re-position it by sliding the timestamp left and right. To help distinguish between and organize clips, the user has the option of adding specific details like a title and description. Hitting "Done" finalizes the changes and saves the clip to the original video.
In terms of visuals, the use of white space and basic design features help lend to the productivity of the interface. The minimalist look allows the user to focus on the process at hand without being distracted by extraneous UI elements. On this design in particular, we purposely tilted the scale towards usability over aesthetics.
Production
Mash (With Clips Saved)
Once a user saves a clip, it gets added to an auto-populated section called "My Clips," which appears beneath the main Mash view. Having the clips slide left and right gives the effect of a timeline, allowing the user to see each clip in clear, chronological order. The cell heights are fixed and long descriptions are automatically truncated, viewable in whole from the "Edit Clip" screen. Similar to how YouTube treats upcoming advertisements, clips are indicated by solid white markers on the progress bar, so the user can quickly gauge each clip within the context of the Mash. The Mash itself can be shared and renamed through the overflow menu.
To view a clip, the user can either (a) let it play naturally during the Mash or (b) manually select it from the My Clips section. When a clip plays naturally, the blue toolbar automatically appears with the option to "Skip," allowing the user to quickly jump past any given segment and continue watching the Mash. When manually selected, the clip is highlighted with a blue check mark and the user is shown an option to edit on the bottom toolbar. From the "Edit Clip" frame, the user is able to revise the clip or delete it altogether.
Production
In short, the focus for part two of the user flow was to give the user complete and total control over the recording experience. Specifically, by providing a clear and intuitive pathway to creating quality content. Limiting unnecessary UI elements and maintaining a simple, straightforward canvas became two consistent themes—each gives focus to the productivity tools and prevents distraction from the user experience.
My Mashes
After creating a Mash, the user is all set for the final step of the user flow: export and share. Whenever a user creates a clip (or selects "Save" on videos with no clips), the Mash automatically gets saved to My Mashes—a dedicated area for organizing and sharing Mashes. When the user has no Mashes, they are nudged with an empty state to get started by selecting a video. The layout of My Mashes mirrors that of the search results and category views, with a focus on utility and quick scrolling. The tiles are clean and balanced, and feature the Mash title, number of saved clips, and updated timestamp (the length of the original video + saved commentary). For easy reference, the title text at the top of the screen indicates the user's exact number of Mashes. As mentioned, the user is able to share the finished product through an overflow menu on the Mash view—simply select the three dots and the sharing options include "Save Video," "Message," "Mail" and connected social or messaging accounts. In addition to managing Mashes, the user is able to control their account settings by selecting the gear icon located on the upper right. When the user exports the Mash, by default, it will begin five seconds before the first comment and end five seconds after the last. This helps prevent unnecessary header—For instance, if the user comments at the 10-minute mark in the video, they don't necessarily need the viewer to watch the initial portion of the video. Though there are likely other use cases for keeping the original portion of the video, we tabled this for a later version of the app.
Production
End Result
At the onset, the Mashlink redesign presented a handful of obstacles. As a brand, Mashlink lacked coherent messaging. Its core value proposition hadn't been defined, the logo didn't reflect the app's functionality, and specific brand guidelines hadn't been set. The concept itself had never been done before, so we were essentially paving the way forward in terms of design and development work, with little else to go of off. Despite these hurdles, by the end of the process, we had released a product that clearly and thoughtfully addressed all three steps of the desired user flow: (1) video selection, (2) commentary recording, and (3) export and share. The simple and intuitively-designed pathway allows influencers the ability to quickly and easily create shareable video commentary. What's more, Mashlink now has a distinct and unified look that speaks to its core value of helping users engage their audiences with compelling and relevant content. Below are a few recent reviews of the app:
"Next big thing!!! (5 Stars) I love this app! A whole new way to make videos. Super impressive and fun." -ginfluencer14
"Next big thing (5 Stars) Ahhhh this is what we have been waiting for. Real life commentary from real people. You have the chance to say what you think in the moment, non rehearsed and it's hysterical - yet insightful and relevant. One hundred thumbs up!!!!!" -hainay
"Awesome (5 Stars) Mashlink is a game changer. This is going to disrupt the way the world creates and curates video content and the applications are endless!" -CDStephenson
"Love this! (5 Stars) This is the next big thing in reaction videos!" -Fraytease
"Where has this been all my life? (5 Stars) This is going to be a game changer for social media." -Kjah_harrison
What'd I learn?
Though it may seem obvious, I learned the importance of keeping things simple. When designing an app, there are a million decisions that need to be made, and sometimes you find yourself with a feature that's become confused or overly-complicated—particularly when you're working on a new concept. To help prevent this, I used a set of best practices in my approach: (1) Carefully paper-prototype the structure of the app before moving on to high-fidelity mockups. Having a clear structure of the app not only helps you work through key decisions, but it prevents any aspect of the design from being accidentally omitted. (2) When presented with a design decision, always opt for the simpler route. Doing this ensures an intuitive experience up front—you can always revisit the design and make optimizations at a later point. (3) Lastly, if you feel like tunnel vision is creeping in, take a step and back look at the design through the lens of a new user. What may seem understandable to you—someone that's spent months looking at the design—may not be intuitive to others.
In all, the Mashlink redesign was both a challenging and fascinating project to work on. It's a great accomplishment to have helped assemble a team that's taken an idea from concept to production with minimal oversight.