Quick Links

  1. The Brief
  2. Research
  3. User Persona
  4. Planning
  5. User Flow
  6. Sitemap
  7. Wireframing & Prototyping

Client Brief:

“Currently, GoGram is acquiring a greater amount of clients seemingly on a daily basis through word-of-mouth, Instagram, Facebook, and Fiverr marketing. Our company is called GoGramApp. “App” because we ultimately want to be used primarily on smartphones with a web version as well.”

– Ian Slater, Founder and Owner

My Role

My role in this project was conducting user research (including user interviews and user personas) wireframing, sitemap construction, user testing and creating a high-fidelity prototype.

Timeframe: 3 weeks

What is GoGram?

GoGram is a video editing service that enables users to upload their raw videos and have them edited into a professional and social media ready video in less than 24 hours.

The Team:

Amanda Chan, Elliot Mayer, Catherine Dox

The Goal

GoGram strives to change the video experience on social media so that everyone from a day to day user to the social media savant can have professionally edited videos that can enhance their message. Our goal was to create an app that addresses this objective while creating a seamless user experience at the same time.

Research

After the project goal had been realized, our team kicked off the research of finding out who the target user is. We started off by looking into the user that GoGram had intended to pursue: the adventurer. The adventurer is someone who gets out there, someone who films themselves jumping off of cliffs, surfing, kayaking, basically being one with the outside world. We could understand the reason for this: adventurers make interesting footage. GoGram’s current website and branding were definitely tailored to the adventurer but we wanted to explore all potential users just to make sure that the target audience was correct.

The other user that GoGram was targeting was the business owner. The business owner would be someone who owns a company that uses video for marketing campaigns, branding, social media use and more. While this audience didn’t seem like a viable candidate we were informed that around 80% of GoGram’s business is done with companies instead of individuals. This seemed like an interesting discovery and decided to explore the reasons behind why this was so.

User Interviews

To help us facilitate whether or not the “adventurer” was a viable target audience we interviewed a number of people who passed our screener questions.

Screener Questions

  1. Do you like to make video recordings of your experiences?
  2. What do you do with these videos afterward?

The interviews gave us a volume of information as to why users create and sometimes edit, the type of videos that they shot and why they did or did not share them with the world. It was also important to nail down the process that our target user followed which, in turn, would help the overall design of the app.

Key Findings

“I film and edit my videos to tell my story.”

“I like to share my experiences in the moment with family and friends. I do this on the go, so they can experience it as soon as I do.”

“I share my videos on Instagram to connect with people who enjoy the same activities as I do.”

From our interviews we gained a few key insights:

  • Users enjoyed sharing videos with friends and family
  • Some users would edit their own movies by themselves, some even did so with professional software.
  • Their top medium of sharing was Instagram, followed closely by Facebook.
  • Many users preferred to edit their own videos but were open to an editing service if time became a factor.

User Discovery

After our first round of interviews with business owners and potential end users we discovered that GoGram’s “ease of use” was the main reason for businesses to use their service. It was clear that some companies are presented with hours upon hours of videos that they don’t have the time to edit. Thus, GoGram is a simple, cost-effective plan for the business owner.

We then had a look at our potential adventurer. Through interviews and surveys, we discovered that over 60% of people who do use their phone for video purposes, show themselves traveling or doing some other adventure-based activity. This drew out the conclusion that there is a potential market to tap into via the adventurer user, which was the user we decided to pursue. What also reinforced this notion is that, through our interviews, we found business owners were often behind a desk instead of out in the world — thus the content produced would be pigeonholed into something static.

User Discovery

The survey findings unveiled that not only did 60% of people filmed adventure and/or traveled related footage, they also used their phones and, from that user base, half of them used GoPro which also helped push our app to cater to the adventurer persona.

User Persona

After we had our target audience sorted we then began to start building our User Persona — our prime target user. The process started with us compiling all of the information we received from interviews and our survey and designing an affinity diagram to find out commonalities in the answers given to us.

Affinity Diagraming

We then categorized these findings and pieced together a suitable user that hit all the marks for us to target.

Meet Sarah:

Sarah

Planning

Feature list

We had our persona. Now it was time to focus on our features. We categorized our feature list into “must haves”, “nice to haves” and “not necessary.” The must-haves was essential in obtaining the Minimal Viable Product (MVP), these are the features that make the product function on a basic level. The nice to haves were aligned with the “coat of paint” idea in that these features gave the app personality but they weren’t part of the MVP and wouldn’t affect the basic functionality of the app. The “not necessary” category consisted of potential features that we had hypothesized would be important to the app turned out, through interviews and feedback, to be unnecessary or even detrimental to the success of the app.

feature list

User flow

After we had constructed our features list we moved on to the creation of the user flow. The flow was rather large with multiple avenues so we decided to focus on the core functionality of the app which was uploading a video, purchasing an editing package, sending and receiving the video and giving feedback. In the flow, we managed to incorporate the feature list and included the “nice to haves.”

One key iteration was making the “theme” and “song” selection optional to the user. This was a change to the core business practice that GoGram used as a large part of their features were adding songs and themes to make the video unique. The reason for the change was due to feedback we received with the default process — many users wanted to skip choosing a song and theme and wanted to just upload a video. Thus, we made the song and theme selection optional.

Sitemap

Our sitemap was constructed in tandem with the user flow. We ensured that the site hierarchy was laid out neatly and that no confusion was presented during the sitemaps creation.

Journey Map

The next step was to create a journey map that outlined the emotions from both the user and client perspectives. The sole purpose of the map was to explore what emotional falls and rises would potentially occur and address them through our prototype.

journey map

Wireframing and Initial Sketches

We took all the information from our research, features and user flow and began to piece together what the app would look like. That started off with initial free-form sketches with the pieces that we wanted to implement. These sketches were rough and unclean but were made to give us the shape that the app was to take.

With some input from our UI designer, I started designing the wireframes to ensure that the video player would be the main focus. I wanted to make sure that users had a simplistic sense of the app given that there was a myriad of content that required visual organization. One interesting challenge was the Video Grid – the Video Grid is the list of Videos that users could view from either their library or from the “Go Gram” community page. Influences from video sites such as Youtube and Vimeo helped dictate the direction of how this section would be laid out.

wireframing and initial sketches

Paper Prototyping

From the wireframing sketches, we settled on a layout that was cohesive with our research and then created the paper prototype. The prototype was then tested out on fellow users of the demographic we were aiming for (users between the ages of 24–35 that are of the adventurous persona). From the feedback given to by our testers, we began to finalize the layout of the app.

paper prototyping

Mid-Fidelity Prototype

Based on the feedback of our paper prototype, we grouped together and created a set of Mid Fidelity Prototypes. During our test, we reiterated our design to address certain pain points such as confusion on what steps to take during the checkout screen, previewing a movie, and overall we weren’t satisfied with the amount of time it was taking to complete the procedure. We wanted to stick to our persona’s goal of sharing videos with their network ASAP and the amount of time the process taking went against this goal.

And finally, one of the major pain points was that users just didn’t know how to upload videos which was the main function of the app. We decided to make this our core focus given our timeline and that this is a critical feature. Our solution was to bring the video upload option to the top of the screen, and include an “addition” image that visually instructs the user on where to tap to upload.

mid-fidelity prototype

High-Fidelity Prototype

With the final testing and feedback done on our mid-fidelity prototype, we transitioned over to high fidelity, bringing the research process and design process together. My role at this stage was interacting with our UI designer to make sure that the “feel” of the app matched the goals of our target user. Our goal was to have a “chilled out” vibe to our design that stimulated a relaxed process and adhered to Go Grams user goal of obtaining an adventurous clientele.

Working Prototype

After the end result of 9 user tests and multiple changes, updates, tweaks and other revisions we put together a working prototype that showcases the flow, final designs, and basic functionality. You can view the working prototype here:

View Prototype

Conclusion

The end goal of creating a seamless experience for the every day “adventurer” through and app was both a challenge and a rewarding experience. The UX process that starts with finding a goal and ends with a working prototype was honed a bit more acutely with this project and the addition of a UI teammate only enhanced the process. In the future, I would adhere to more testing during the mid to high fidelity stages as well as tweak the transition between the UX and UI team.

Next Project: Brewster