#Tagether

A mobile application that helps you create videos from social media content

Project Overview

Platform:     Mobile Application

Group Members: Emily Kobroff, Austin Reilly, Caroline O'Meara

Project Duration:    4 Months

Project Type:     Group

My Role:    Lead Visual Designer, User Researcher, Interaction Designer

Tools:    Sketch, InVision, Qualtrics, Adobe After Effects

About

Tagether is a social media tool that brings together videos and images taken from social media applications through the power of tagging. It allows users to create personalized movies and slideshows with content from multiple sources.

The Problem

As consumers create and share more and more photos and videos on social media, it can feel like there is an overwhelming amount of content out there. Scrolling and swiping through your friends’ pictures after an event can be paralyzing. If you want to put together your own video you have to move content between accounts and devices, which can be tedious and time-consuming. People and organizations use social media to promote and celebrate events, to attract participants beforehand and to remind attendees of the fun that was had afterwards. It is difficult today to create videos that includes content not already present in a user’s personal devices or cloud storage.

Our Goal

Provide users with a quick and easy way to aggregate content from social media and create videos and slideshows for their own personal use. 

The Solution: #Tagether

Tagether is a video-creation tool that aggregates videos and images from social media applications through the power of search and tagging. It allows users to assemble personalized videos with content from multiple social sources, adding music, filters, and personalized captions. After building and customizing a Tagether video, users can share their video on social media or directly with others. A user can create a Tagether video using personal photos and videos, friends’ posted content, and publicly available images and videos tagged and shared by strangers. Tagether enhances users’ experiences of social sharing by enabling seamless video creation from source material collected across multiple platforms.

I created this video using Adobe After Effects to show the final round of designs and application features.

The Process...

Initial Concepting 

Our team's initial concept for Tagether was more of a social media tool than a video-making tool. We initially imagined Tagether users creating personalized videos using aggregated content, whether a slideshow of photos or a collection of videos, or a combination of both. We wanted users to be able to put videos and photos in sequence to music, add their own content, ignore content, and either send their creations to friends or post their creation to social media. Perhaps users, after checking into an event, would be sent a link to an automatically created Tagether video combining the photos they took with friends content and publicly available media. Finally, we discussed creating a social media platform built around the videos, imagining Tagether as a place users would gather to share videos and view friends’ videos.

Initial Research 

In order to better understand the needs of users when creating videos and slideshows and to understand what similar technologies currently exist, we employed several research methods.

Contextual Interviews

After our initial concepting phase, we conducted several contextual interviews with individuals who had recently planned events using social media. Additionally, we sought out individuals who use at least 3 social media platforms including Facebook, Twitter, Instagram, and Snapchat. 

 

We asked a great deal of questions about using social media apps during and after events and learned that while people did take pictures and videos during events, hardware limitations meant that most social media usage was before and after the events themselves.

Survey

Additionally, we conducted an online survey in order to determine whether or not there was market demand for a video creation application and how people might use our application as we originally conceived it. From this survey we learned that users regularly post original photo a video content from events. Additionally, we learned that participants typically posted text along with their photos and videos and often found the text to be important to the context and sharing aspect of the photos and videos. 

Ideation & Sketching

Affinity Diagram

From the data gathered during our initial research, we created an affinity diagram to better understand user needs and the problem space. 

Some of the themes we uncovered include common activities like “Social media to track event activity,” “Using hashtags,” or “No hashtags.” We began to draw out potential requirements, seen on the pink-diamonds in the images below. From this information we collectively brainstormed possible functions and features to fulfill the basic needs of the users of this application. 

Sketching

From the group ideation session, we individually sketched ideas for the first round of designs. 

Prototyping & User Testing

After the sketch phase, we implemented an iterative design process for the remainder of the project utilizing usability research in each iteration of the design life cycle. The design lifecycle began at a low-fidelity paper based prototype and ended with a high-fidelity prototype. 

User Testing

For the first round of user testing, in order to test the basic concepts and functionality of our application, we chose to use a grayscale paper prototype so that the application looked unfinished, i.e. that we were at the point in the design process where it was still possible to make drastic changes. Using this prototype allowed us to garner unfiltered feedback from users. We were trying to see whether or not users understood the general concept for the application and if they followed the designed funnel, as well as get feedback on the most basic design and interaction decisions. 6 users were tested in this round. 

For our second round of prototyping we used Sketch to create medium-fidelity visual designs and introduced the use of Invision to add interactions. This round of testing was done using the Invision mobile app and in-person interviews with 5 users. 

‚Äč

For our third and fourth rounds of user testing we used UserTesting.com. Like our medium-fidelity testing, we had users test Tagether using Invision’s website, as opposed to the Invision mobile application, in order to be able to see where participants were attempting to click.

Prototypes

1/4

For more details about this project and other projects I've worked on, contact me! 

© 2020 | Katie Hicks