GoGoGab

Chat live with stars while you watch their shows

None

What is GoGoGab?

GoGoGab, or GGG, is an app and service that makes it possible to talk with your favorite stars and others in your community around what you're watching on TV. Just login while the show airs and talk about what's going on with the featured guest and your friends. GGG offers the fun and excitement of actually talking with a celebrity, plus exclusive content you won't see anywhere else.

You can download the app here

iOS app (android coming soon)

App

First Came the Architecture

We started by figuring out our development architecture and how we could manage to design and build for Android and iOS simultaneously. We ended up deciding to go with Apache Cordova. This allowed us to build with web tools and languages and then package up the product to both the App Store and Android Play Store, saving us a lot of valuable time. For the technologically inclined, our dev stack was Cordova, AngularJS, Node.js, MongoDB, and Redis.

Our Mission

HTML Fusion was contracted to help GGG with the UX, design and building of both Android and iOS app prototypes that integrated their service with Twitter and Facebook. In the course of three months, we built a full user experience with a solid infrastructure to process a large quantity of data from Twitter and Facebook. Once our contract concluded, we transferred all the assets, documentation and infrastructure accounts to the GGG team taking over the project.


Then We Tackled Some Big UX Questions, Like:

How to display your friends' conversations, the entire worldwide conversation as a whole, what was the celebrity host saying? From GGG team’s suggestion, we started with three simple section layouts: Host, Friends, and Global. This worked well in testing.

The integration of content from two social networks with their very own interactions and design language raised many questions. How would users be able to chat with Twitter, Facebook, or both? How do we show Facebook's complicated statuses, posts, and comments structure alongside Twitter's relatively flat one? How do we show the difference in the conversation, and how do we link them? How do we show replies to statuses or tweets? How do we handle notifications? How do we respond with the correct type of account? This was one of the hardest parts and took a lot of effort and time - you can see various versions in our screenshots below. In the end, our solutions answered as many of these questions as possible. With this part of the puzzle solved, we moved on to design.

Then Came Design

How to design an app that would look at home on both Android and iOS but not alien to either platform was a major part of the puzzle to solve. This proved difficult, we took cues from Google and Apple, but we couldn't use paradigms that were specific to one platform or the other. We had to make a neutral “other” language. This concept is nothing new, as many brands try to create signature experiences across multiple platforms. A good example of this is Instagram; it has a very similar design language across Android, Windows Phone, and iPhone.

We did so by making our own custom iconography and paradigms of interactions, such as a tabbed interface inside the Gab Room, a custom input method for comments, and a novel approach to handling exclusive content. We then paired those unique elements with system fonts from each platform so that the app would feel native to the user. Lastly, we made the rest of the design sparse, focusing on the images so that our design couldn't be discernibly iOS or Android.

Next, our Development and Release

The development team had challenges very similar to those found in design. We were tasked with building user interfaces for multiple operating systems and integrating messaging from multiple social platforms. Just as was done for the user experience, we aimed to make our API’s as uniform as possible, despite differences in the data and the platforms we were delivering it to.

We built the client applications using Cordova and Angular.js. This made it possible for us to use the same code base on both iOS and Android. In fact, throughout the development process, the application was runnable on desktop browsers, allowing a very fast “code and refresh” development process. Development followed closely behind our latest designs so that ideas could be tried out by real people.

Behind the scenes -- where real people dare not look -- we tackled handling multiple sources of social messaging. While Twitter and Facebook have many similarities, data is retrieved in different ways, arrives in different formats, and is even organized differently. While Twitter provides a simple “publish subscribe” API, Facebook has something more like a “publish subscribe and fetch” API. While Twitter has a very flat messaging structure, Facebook allows three levels for posts, comments and replies. These differences represented our greatest challenge. We built ingestion engines to normalize data coming from different sources, then published messages to connected devices. The result was an application able to seamlessly aggregate conversations from across the web.

And lastly, Testing

Some of the interactional challenges we faced with GoGoGab were solved through testing our prototypes with users. Testing is paramount to validate the product as it helps to surface confusions that users experience, but it also helps us formulate questions around how we can tweak and improve the user experience in our next iteration.


Watching users interact with this product brought up questions we previously did not think about, like:

- By default, which tab should users land on when they enter a gab room?

- How fast should new content stream into a user’s feed?

- Do users understand and distinguish the three tabs without a tutorial?

- Do users understand how to post a comment, and is our UI intuitive enough to show where their comments will end up when they post them?

These aren’t always easy answers to get. We have to formulate questions that avoid influencing any user actions or biases to get honest results. For GoGoGab, we targeted technologically savvy TV show fans, giving them step-by-step tasks to complete while encouraging them to speak their minds throughout the process.

The test results encouraged us to make some UI changes, such as placing all ‘Live’ Gabs in a vertical list that users can scroll through rather than horizontal swipe. It also helped us make functional changes, such as placing users into the “Friends” tab on entry by default and throttling their Global conversation so they only see a new comment populate their feed every four seconds.

In Conclusion

We initiated the work on GoGoGab and worked on solving complex problems, like scalability and multiple social network integrations, but we can’t take credit for the current final product. After our three-month contract ended, the GoGoGab team took over the project and continued to improve it for six more months before the first public release.