GoGram App Development and Rebrand: Case Study
UI Team: Cat Doxford / UX Team: Elliot Mayer, Amanda Chan
GoGram is an efficient website based video editing service. Users upload hours of raw footage and have it edited into a professional and social media ready video in less than 24 hours. Edited by people, not algorithms, GoGram prides itself on its personal touch to each and every video.
Provide an efficient way to deliver GoGram’s service, increase onboarding, user profiles and eventually revenue in order to bring to life GoGram’s vision of future apps to life.
Design the UX and UI components for GoGram App on an iOS platform. Fulfill the above stated goals by portraying GoGram’s personal, efficient and quality standard service through usability and design.
GoGram initially had two types of user:
While most of the company’s revenue came from businesses, their dream was to appeal to the adventurer. Even though businesses were ordering more videos, they still were not fully utilizing the GoGram website and were dealing directly with the founder himself. It was clear that businesses wanted to take their time when purchasing branding material or promo videos.
That left us with the adventurer. We needed to know how these individuals used their technology and if this would fit into the GoGram model.
After conducting a survey with our users we were left with the above statistics. 100% of them used their iPhones to film video footage. At this point we realised just how necessary an App was for GoGram.
After collecting and organizing all of the data from our surveys and user interviews our next stage in research was to create an Affinity Diagram. This diagram enabled us to categorize information and come up with the 5 key points that enabled us to come up with our User Persona:
Method Of Sharing
The UX/UI overlap in research was particularly strong in this project, due to the fact that GoGram is a very new company and therefore had little to no research of its own. Finding out who the user was going to be was step one, but finding out how and why they would use the app was something else. In a world where technology is at the forefront of most of our lives, we found that most of the people we questioned were more than capable of putting their own videos together. This forced us to look back at the reason GoGram was created in the first place and we were able to put together a Design Inception to help further pick apart what the app was going to be about.
We realized through this exercise that the reason people would use GoGram was not because they were incapable, but…
To make video editing fast, easy and personal.
It became clear that GoGram’s culture was going to be the drive behind its success. During our initial interview with the co-founder he mentioned that every video made was verified by him before being sent to the customer. This highlighted their strive for quality. Currently the processing time for any video is “within 24 hours”, but we learned that the goal was eventually to have customers’ videos made and perfected within 4 hours. This highlighted their strive for efficiency. After more research it also became evident that a lot of video editing services use algorithms to produce their videos. This was not the case with GoGram. Each video is edited by a well suited individual, which highlighted their strive to make each edit personal to the user.
Mood and Visual Language
Taking the “why” into consideration, we were able to then understand the mood that we wanted the GoGram App to have. We decided that its success lay in its ability to be personal, simple, efficient and stress-free.
After deciphering the mood we were then able to choose how to portray these key concepts by using visual language:
Colour: The existing GoGram colours were blue and green and it was important to the co-founders that we kept this. Inspired by the Pacific North West these colours gave a great feeling of nature. In order to make these pop we chose to add in a red and use a split-complimentary colour scheme. The best part about about the colour scheme was that there was absolutely no black involved at all. An app that celebrates the joy of nature shouldn’t include non-natural colours, so dark grey was implemented in our designs in its place.
Movement: The movement of the app was integral. By keeping it familiar with swiping and scrolling motions we would be able to keep the user feeling at ease. We took inspiration from Instagram in the sense that we wanted each video on the app to auto-play as a way to intrigue and have content accessible right away.
Shape: With a lot of videos in the app we knew we were going to have a lot of rectangles and strong shapes, so we decided to keep the app very geometrically focussed.
Space: In order to allow the user to have an easy flow, we wanted the space to be very structured and clear.
Using these decisions we were then able to put together a final mood board to represent the artistic direction we wanted to go in.
After a lot of user, domain and competitor research we were able to identify which features of the GoGram App were essential to creating the Minimum Viable Product. We broke all of the features into three categories in order to understand the scope of the final design.
The next step was to establish a user flow. While there were many more, this was the main flow that shows the primary use for the app.
From the User Flow we were able to build a Journey Map which would highlight how both the user and GoGram as a company would feel throughout the process of using the app.
There were a few pain points that the user would experience throughout the process, so it was important for us to know when these would be so that we could combat them with good design choices. Keeping the user feeling confident and happy through both familiar points such as signing up and making a payment as well as new processes such as receiving their videos and requesting edits was essential to the success of the app. We also had to consider the emotions of GoGram and found that their main pain point would be when a customer was not satisfied with their video. This made us think about how to get enough information to them as possible so that they could perfect videos easily.
Paper Wireframe Prototypes
Paper prototypes were made and the first round of testing began. These prototypes were the first iteration of how the user would interact with the app and opened us up to a lot of feedback that would enable us to make the mid-fidelity prototypes more user friendly.
Creating a new logo for GoGram was the first design challenge. We started out with a lot of sketches. Don’t judge, we know they’re bad…
These sketches were then trimmed down to a few favourites and made into higher fidelity versions:
There was influence from technology, biomimicry and nature in these designs. Each set was done in three colours because it was very important to us that favicons and logos for future apps were taken into consideration. Since GoGram was affiliated with both it was a challenge to decide which direction to go in, but then we realised we didn’t have to decide. GoGram embraces what can happen when nature and technology are combined. They see things that others don’t, and this is where the concept of the eye shutter was born.
It was designed to look like both an eye and a camera shutter to represent GoGram in all aspects. We chose to place it inside the G so that it would say “GO” both on its own and at the beginning of its full logo.
After playing with the typography and composition of the full logo we eventually decided on using a full sized, capitalized typeface. This kept the whole logo balanced and by using a thin, rounded typeface called Domus we were able to keep the tone very friendly, legible and appealing. Below are the final logo and app favicon. The green version is the GoGram App favicon, with the blue and red representing GoGram’s future apps.
From the Mood Board, logo and creative research we were able to create a Style Tile which represented the feel and style that we saw for the final app design.
This gave us a great opportunity to see how all the elements were going to interact with each other. Using colour as a means of hierarchy definitely worked out in our favour as we were able to establish blue as success, green as active/go and red as alerts and information. At this point we were also able to design icons specifically for the app which we kept very thin and simple for easy navigation. At this stage we also decided on a typeface for the body copy within the app. We chose Open Sans as it was a wonderful yet subtle contrast to our Logo typeface Domus. Using just one typeface throughout the app allowed for less confusion for the user, but also made way for hierarchy to be made by font size and weight.
The mid-fidelity wireframes were created as a result of the paper prototype testing results as well as further testing. Here are a few examples of some of the main screens.
High-Fidelity Final Screens
And here we have it…the final design for GoGram App. This is just a selection of screens, but you can access the full working prototype here.