Intellinote Redesign
Solve Intellinote's product challenges by applying user-centered design methods and concurrently build a common design style guide for BroadSoft products.

Broadsoft acquired Intellinote in early 2016. Intellinote is an enterprise messaging and team based collaboration software application. I had the opportunity to redesign their user interface aiming to bring design consistency in Intellinote aligning BroadSoft's family of products and also repurpose the flow by modifying some of its functionalities. I iteratively reskinned the UI in an agile manner closely working with the stakeholders.

ORGANIZATION
BroadSoft
DURATION
6 Months (Jul' 16 - Jan' 17)
PLATFORM
Desktop (MacOS, Windows) | Web
ROLE
UX Researcher, Interaction & Visual Designer
Process

I started to gather an understanding of the history and goal of the product by closely partnering with the product managers. It was essential to understand how to differentiate Intellinote from other products of BroadSoft to maintain a variety of offerings. In the initial stages of the process, I focused on getting acclimated to the space of project collaboration tools and studied the user experience created by competitors like Slack, Glip, Gotomeetings, and Spark. In addition, I also examined consumer based group communication platforms like Facebook's Messenger, Whatsapp, Skype, and Telegram.

Intellinote Before Redesign

The image below shows the state of Intellinote right before the acquisition. The idea behind the creation of Intellinote was to serve teams with tools like notes, tasks, files, and chat. In the first pass of heuristic evaluation, I reported that the product had a lot of features hard to navigate for a new user. There were many super user-relevant features on the surface creating an intimidating looking UI for the new user.

Iterations

While working on Intellinote, I was also parallelly involved with setting the higher level layout for all BroadSoft products. The layout mostly consisted of three panels of navigation. The leftmost was the main panel which consisted of features such as chats, calls, directory, settings, etc. The middle had the list of main features. For example, list of calls, chats, and members. The right panel was dedicated solely to the chat/workspace area. I created numerous iterations to fit every feature on Intellinote in one of these panels by maintaining the hierarchy and flow.

Chat Activity Library

BroadSoft design style guide maintained a chat bubbles style across all products. In the Intellinote redesign, I had to design different kinds of messages in the bubble styles. Messages such as the notes, tasks, files, videos, updates to tasks/notes, images, etc were redesigned to match the bubble chat style.

Visual Layer Explorations

I closely worked with the design manager to iterate on number color combinations for adding the visual layer on Intellinote. I mocked close to a 22 color variations in the first round (shown below). We later narrowed it down to 5 and reviewed with a larger audience before finalizing on the blue colored variation.

Final Design (Workspace View)

Image shows the finalized and approved screen of Intellinote. The product greatly improved its usability by organizing features in the 3 panel layout. The creating of message list significantly reduced the flow required to navigate through different workspaces. Combining the "Add" button with the chat input field was more intuitive than the placement prior to redesign. Overall the visual look and feel was also well received.

Annotations Sample

I delivered annotated designs to the developers to help them implement features the way they were intended. I worked closely to resolve any difficulties in the development.

Portfolio Projects