Symphony

Context

Background

Symphony is a secure team collaboration platform for professional and enterprise users, with a current focus on financial services.  It runs on web, desktop, and mobile.

Goal

Deliver the first version of Symphony, focusing on the secure messaging aspect of the product.

Role

I joined Symphony as the first UX designer to help execute the vision for the initial release of the product. We started out with a team of engineers, a product manager, a visual designer and myself. Once the design team had expanded, I became the lead designer to oversee the core product and to ensure coherence between the web and mobile platforms.

 

Process

Building Personas and scenarios

Symphony started out as a messaging tool that inherited many legacy features of an internal tool at Goldman Sachs. It already had a small active user base in the financial services by the time we set out to re-design Symphony. This placed a constraint on what we could change and how these changes would be introduced to the users. On the flip side, we already had a large collection of user feedback to help us identify and prioritize the pain points we needed to address. These feedback, along with the data points collected via customer visits and interviews helped me to put together some basic personas and scenarios. Together with a visual designer, we mocked up the key use cases and presented them to Symphony's board members.

Personas

Establishing Experience Goals

I created a set of user experience goals based on the needs and goals of the personas.  It is essentially a set of metrics for how well we are solving our users' problems. I worked with a PM and a teammate to brainstorm various solutions to meet each goal.  

An initial set of user experience goals.

An initial set of user experience goals.

An example of how to meet one of the experience goals.

An example of how to meet one of the experience goals.

Sketching User Flows and Building Prototypes

I started by sketching out how the different types of users might use Symphony to manage their daily workflows. These sketches led to wireframes that illustrated the ways in which Symphony is meeting the aforementioned set of user goals.  I then worked with a visual designer to put together a number of prototypes to test the new design. 

 

Design Iterations

I worked with a PM to come up with a list of improvements in order to raise the user experience baseline.  For each of these areas, I drove multiple iterations of the design and facilitated usability sessions, most of which were completed on-site with the end users using a prototype. We took an incremental approach to introducing product changes because of our existing users.  

Conversations

Symphony supports 1:1 IM, multi-party IM as well as chat rooms. Our users were having trouble discerning between these different types. While we wanted to simplify the chat experience, we recognized the need for drawing a line between an IM and a chat room due to compliance implications for the financial services. I started out by defining the life cycle of a conversation. Following that, I looked at the experiences that should be unified across the different chat types, and those that may be unique to each type.

Diagram showing the life cycle of a conversation.

Navigation

Navigation was another area that needed some attention because users were having trouble locating items in the navigation. we wanted to improve to raso that the users could more easily manage and navigate between their tasks. I tackled the problem by first identifying the types of entities that populated the navigation. I then explored ways to represent these entities for easy identification and scannability. Finally, I made sure that the navigation works well in a responsive framework.

The main sections of the navigation.

Making the navigation responsive by defining how it can be resized based on the width of the window.

First Time User Experience

Finally, another area that went through a lot of iterations was the first time user experience. There were two parts to this: the registration/sign-up flow, and the tutorial highlighting basic features.  For part one, I mapped out the different paths a user might take, and worked closely with a mobile designer to ensure coherent experiences across platforms.

Diagram showing the different paths a user may take from registration to using Symphony for the first time. The main steps are 1) sign up, 2) email verification, 3) 2 factor authentication, and 4) logging into the app.

For the remaining of the experience, I brainstormed with my teammates on the key Symphony features we wanted to highlight for the different personas and entry points to Symphony. I then created various user flows based on our discussion, got feedback from the team, and iterated again. The version of the tour that resonated the most with the team was one based on interactions with a bot. Throughout the entire process, we built 5 prototypes, and presented to an audience that consisted of our CEO, marketing team members, and a few PMs. We also ran 2 rounds of in-person user testing to help refine our design. 

Sketching to figure out the top priorities for a new user.

Wireframing the user flow.

 

beta release

Due to resource constraint, the beta release addressed a subset of the top issues we set out to tackle. A lot of the improvements were centered around starting new conversations and navigating between them. By simplifying the information in the navigation, providing multiple display density options, and supporting customized layout of workspace, we made it easier for the users to see more conversations and navigating between them.  As for first time experience, we implemented a much simpler version of the tour that presented the features in a more static way without a bot.