Project Overview

  • Platform: Mobile Application
  • My Role: User Researcher, Lead Content Strategist, Interaction Designer, Logo Designer
  • Methods: Contextual Inquiry, Affinity Diagramming, Competitive Inquiry, Wireframing, Prototyping, User Testing
  • Group Members: Katie Hicks, Emily Kobroff, Austin Reilly
  • Project Duration: 2 Months
  • Tools: Pen and paper, Sketch, InVision, Qualtrics

The Problem

It is difficult to create videos with content not already available in a user’s personal devices or cloud storage.

Solution

Tagether affords the creation of beautiful videos by providing users a quick and easy way to aggregate content from social media. Tagether users can leverage the growing amount of photos and videos available on social media through our intuitive mobile interface.

Research Process

We began our research process with a contextual inquiry, interviewing potential users about how they use social media and social tagging for sharing images and videos. How do people create original content from media shared socially? What role does social media tagging play during special events?

To complement our interviews we also distributed an online survey and completed a competitive analysis to determine whether or not there was a demand for a video creation application. From the survey we learned that potential users regularly post original photo and video content from events, adding text for a more dynamic element. The competitive analysis uncovered what user needs are not addressed by current video creation and social tagging applications. Other video-creating and video-sharing applications lack a robust aggregation tool, while social tagging aggregators assume all content creation will happen outside the application.

Following the first phase of the research, I built a user flow diagram to capture our users full social video ecosystem.

Ideation and Sketching

Our ideation began with creating an affinity diagram. The diagram enabled us to surface insights from our contextual inquiry. We began to draw out potential requirements, and collectively brainstormed possible functions and features to address users' unmet needs.

We started to discuss how the user would experience the flow of the application. Would the user progress in a linear, step-by-step fashion through the app? Did the social aggregation feature require a more distributed approach? These questions remained central throughout our iterative design process.

Next, we each started to sketch out our first wireframes, taking pen to paper. After the ideation and skeching, we initiated an iterative design process.

Early Prototyping and User Testing

Low Fidelity Prototype. The design cycle began with low-fidelity, black-and-white wireframes built collaboratively in Sketch. We printed out these prototypes and tested them on six users. Insights from this round of user testing included the need for a clear navigation system and user confusion between the idea of "search" and "import."

Medium Fidelity Prototype. For the next iteration, we added color and interactions to our prototype. To address the confusion with "import" and "search," we added a gather content function, tabbed by source: "Me," "My Friends," and "Everyone." We also added larger navigation options and a visual counter showing the users how many items they had gathered for their video.

We built the medium fidelity prototype in Sketch and added interactions in InVision. After pilot testing the InVision mobile app, we conducted our second round of user testing with the InVision web interface. Users liked the new gather content function, but continued to get lost in the progression of the application. For our final design iterations we focused on visual design, navigation, and building out the interactions.

Visual Design and User Testing

Visual Design. Our final visual design focused on reducing visual clutter and creating a clear navigation through the app. We reviewed the comments from our user testing and returned to ideatation. We knew the app had a fundamentally linear flow, but how to communicate that to new users?

Footer. We settled on a footer to orient the user as they progress through the application’s stages: "Gather," "Order," "Edit," "Design," and "Share." The footer both served as a guide for the user and offered an alternative navigation for users who needed something other than the linear navigation provided.

Usertesting.com. The final visual design was built in Sketch, with interactions again added in InVision. With our visual design, footer, and other improvements ready, we began testing with UserTesting.com. We were able to run two rounds on testing on a total of 15 subjects, making quick changes between the two rounds.

 

Final Tagether prototype

Group member Katie Hicks created this video to demonstrate our final Tagether prototype.

Tagether from Katie Hicks on Vimeo.