BranchOut: Talk.co

Simple Powerful. Chat for Teams. A multimodal chat, designed for desktop, ios and android.

branchout_desktop.jpg

PROBLEM

BranchOut, a professional network on Facebook had grown to 800 million users. But they had no way use Branchout anymore to connect to professionals or coworkers. They were bringing their own device in workplace and also using it communicate it coworkers.

BranchOut saw an opportunity to build a chat app for the workplace. The product was built for a native desktop app, native iOS and Android apps, as well as a responsive site. Some challenges we faced were:

  • informing past BranchOut users of a new product

  • what kind of communication tool would we be building (collaborative, connecting with all professionals)?

  • how will this impact current users?


RESEARCH

As we talked to users who were using the BranchOut app we found that many were using other chat tools tied to their office applications. However the chat tools were missing key features in a chat app and didn't feel instant. Some also mentioned they use social media to follow companies they are interested this. We went to some companies as well and discussed nuances they had with their current communication tools. Below is Luminosity's team photo who we reached out to for insights. They also gave us this fantastic photo to use for marketing.

bro-chat-research.png

IDEATION

Based on feedback we received, we experimented with a number of different ideas

Idea #1: A realtime chat app amongst coworkers and also a place to see a public feed of other companies' updates. The main areas of the product would be:

  • Sign up with work email and set up a company group

  • Sign up with any email and follow groups

  • Sign up with a social email and follow groups

I created a diagram of what the signup flow could be:

bro-chat-workflow.png

We discussed getting some key companies onboard and help them influence the feed. I constructed initial flows of chat and login based on discussions. The consensus was that three different signup flows might be overwhelming.

Idea #2: A white label realtime chat app amongst coworkers.

We simplified to just to a chat app, and discussed ways to cater it to companies. The idea was to use the same template for companies but having separate native apps for each. As much as many on the team liked this approach, there were restrictions in app stores that hindered this type of development at the time.

Idea #3: A realtime chat app amongst coworkers.

We decided to focus on the simplified real-time chat for coworkers. The log in would only be with a company email. And there would be no separate white label app. Start simple, this is the idea we moved ahead with.


PROTOTYPE

Once this idea was set to motion, I began wireframing it out. Chat permissions had a number of variations. Using a chart format, I collaborated with product managers to get the permissions right using a chart.

I implemented mobile and desktop wireframes for the chat app.


Design

After a sign off on the wireframes, I worked on multimodal designs. In the design phase, the product direction was changing due to realtime technology constraints, analysis, and other factors. There were also a number of chat apps in the space so there was an urgency to launch it soon. As a result, a number of designs were made (ex: show a contacts list, maybe try a 3 columns layout, ability to add events updates or not, etc.)

bro-chat-design1.png

In an agile design environment, I had to make sure my styles were easily interchangeable in the this phase. We launched with Talk.co chat app.

bro-chat-hp.png

Below are desktop screens for a particular chat.

bro-chat-desktop.png

I was working on multimodal screens at the same time. Here is an example of suggested contacts on ios and android.

bro-chat-design-suggested-invite.png

Landscape and portrait modes for the native tablet app.

bro-chat-ipad.png

Using existing styleguides from BranchOut, I was able to reuse this for the Talk.co chat app. In addition I created a logo and other gui elements. Here is an example of a few of these elements.

bro-chat-styeguide.png
bro-chat-bizcard.png

IMPACT

We were using PubNub's technology and the app was very fast in regards to notifications, real-time chat, and other features. While the app gained traction amongst some, the space was crowded with many chat companies focused wholly on enterprises. Talk.co was eventually acquired by 1-page.

Project

Chat app for desktop, mobile, tablet, and web

Goal

Chat with coworkers after you found a job on BranchOut. Bring your own device in the workplace and chat with them on desktop, mobile, tablet.

Timeline

Summer 2013

My Role

UI and UX, branding, tracking