Simple Powerful. Chat for Teams. A multimodal chat, designed for desktop, Android, and iPhone..
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?
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.
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 any email and follow groups
I created a workflow of what the signup flow could be
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.
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.
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.)
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.
Below are desktop screens for a particular chat.
I was working on multimodal screens at the same time. Here is an example of suggested contacts on ios and android.
A view of the landscape and portrait mode for the native tablet app.
Usinng 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.
We were using PubNub's technology and the app was very fast in regards to notifications, typing now and other features. The app felt nimble and was received well amongst a few set users. However the space was crowded and many chat companies focused wholly on enterprises at a larger scale.
Chat app for desktop, mobile, tablet, and web
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.
UI and UX, branding, tracking