Liz Tan — C9 - Intercom Project

Background

Cloud 9 Technologies is a company that specializes in communications software for financial firms. Our team was tasked with reimagining a trader’s turret into a desktop application. The final deliverable was a functional prototype that the client would later use to built the app.

Problem

The difference between making and losing a lot of money in the stock market can come down to a quick second. Traders working on the floor need to be able to make contact quickly and efficiently with their team to execute an order.

The application needed to blend in seamlessly with their current workflow. It should not add steps or complexity. The application also needed to be mindful of the economy of space on the users’ computer screens: when does it need to take someone’s attention? When does it need to play a more passive role?

Still of Bud Fox (Charlie Sheen) with a turret from the movie Wall Street (1987).

Research process

Brand immersion and stakeholder interviews
Discussed company history and product methodology with the key team members to gain a better understanding of the brand and existing product as well as key opportunities for growth.
Client interviews
Observed product use and discussed existing needs and habits with a range of prospective customers as well as some current users.
Product and document review
Reviewed the existing C9 product as well as all documentation to ensure that all future work is in line with the company’s overarching strategic vision.
Broad landscape evaluation
Researched a variety of digital communication experiences beginning with competitive intercoms and turrets and expanding out to consumer messaging and voice apps.

Research synthesis and product vision.

approach

With a 3-month project timeline, the work was split up into 3 phases. Each phase focused on a key feature.
‍
Phase 1 - Internal voice calls
Phase 2 - External voice calls and interoffice communications
Phase 3 - Text messaging

Designing for focus.

The application is respectful of users’ desktop space and offer a slim interface that can remain open without interfering with other necessary applications.

Color was chosen to draw attention to key areas that require focus and interaction and allow the remainder of the interface to recede into the background.

Initial wireframe of the app

Working through button states to show its various functions

Early exploration of the app with an active stream

Early exploration of the app with an active conversation

Developing a signature interaction style.

Initiating a call with a contact is as easy as clicking a button. The bright blue color cues the user to focus on who the call is being made to. Once initiated, color and animation helps to keep user's attention.

Initiating a call

To make an external call, users can either use the number pad or type the number into the command line field.

Going from a physical turret to a digital one meant that we were able to let users chat with text. Here, we were careful to keep chat notifications and voice notifications distinct.

Designing for adaptability.

The app was designed to easily change and shift with the needs of the user. The app exists in 3 states:

Maximized
‍Tall and slim profile with contact list visible and all controls easily accessible in a click or two.
Condensed
For users who need more desktop real estate, the app can be condensed to show only the main panel and a command line interface.
Minimized
‍When the app is minimized, its icon nestles into the system tray. The icon reflects the current status of the app. Desktop notifications help to bring attention to incoming communications.

Clockwise App condensed, command line help panel, system tray icons, and full app expanded.

Each phase began with a group brainstorm and sketch session. We enumerated all possible features that could be implemented. The strongest ideas would be expanded upon by white-boarding user flows and wireframes. From there, the engineer would begin laying out the structure of the build, while I begin to design the features. Features would be prioritized based on complexity.

Once a loose prototype was built, we tested our assumptions. Revisions would be made, whether it be a button that needed more contrast, typography that needed to be more legible, or re-working entire flows to make it more intuitive.

At the end of the phase, we’d check-in with the stakeholders. Feedback would be gathered and noted for our starting point for the phase in addition to new features to be tackled.

Summary

It was a highly collaborative team and often we found our roles to overlap each others in harmony. It was incredible to see individuals bringing their expertise to the table, sharing openly, and being respectful of everyone else’s ideas. This experience taught me to seek out team members early on in projects to learn what they think would be a better way to improve the product.

Role & Team

Senior Product Designer

Team included UX designer and engineer with oversight from a creative director and a content strategist.

---
Project completed in 2016 at Hard Candy Shell.

Cloud 9 Technologies - Intercom

Reimagining analog trader communication tools as scalable and compliant desktop application.