Symphony - ADMIN AND COMPLIANCE
Context
Background
Symphony is a secure team collaboration platform for professional and enterprise users. To help onboard the first wave of customers, the financial services, we had to provide a solution for the admins to manage the corporate user accounts. Additionally, the compliance officers need a way to monitor and enforce corporate compliance across user-generated contents on Symphony. This feature is a regulatory requirement by the financial firms.
Goal
Provide a tool for the admins to manage user accounts on Symphony, and for the compliance officers to enforce regulations on those accounts,
Role
I was the only UX designer in charge of delivering the first version of this product from its inception. I worked closely with a visual designer to bring over some of the visual languages from Symphony’s core product.
Process
Gathering Requirements and Exploring Concepts
I collaborated with a product manager to refine and prioritize the initial set of requirements. We went through many iterations of conceptualization to arrive at a feasible solution that addressed the core user needs while defining a framework that easily allowed for future development. During the exploration, we regularly engaged the target users, admins and compliance officers at the major banks to solicit their feedback on my concepts.
I started out by mapping out the key entities in the system and exploring some different flows for the 1st-time user.
I looked at various navigational models and information hierarchies to figure out what will suit Symphony the most in the long run. The following is an example of a concept that uses a hub-and-spokes model for navigation.
The hub presents the admin with the various key features of the portal.
The default view of the Manage Users section is a list of all the accounts in the system. The admin can see the account summary in a preview panel or navigate to the account details page.
The account details page organizes information into tabs - some for account administration purpose and others are exclusively visible to the compliance officer.
For the least-defined features, I created visualizations to solicit feedback from the customers. The following is an example that illustrates a scenario in which a compliance officer defines and enforces information barriers - rules that block communications between groups of users. I captured the key concepts with images to help everyone understand the problem space and the solution we are proposing.
Presenting the basic concept of information barrier.
Describing a scenario to provide a context.
Illustrate the problem being tackled.
Refinement
Once the core functionalities were defined, I went on to solve specific problems within the scope. My main goal was to create an effortless browsing experience so that the admin can quickly locate specific users. I also wanted to present the user information in a way that allows for easy consumption and edit.
For example, I explored whether corporate hierarchical information could be used to aid navigation. In additional to the UI aspect, I really enjoyed thinking about how the XML file for user creation can be modeled to capture the necessary information.
A solution to illustrate how a flat list of users can be imported into Symphony while preserving the organizational structure.
Wireframe showing the use of organization structure as a way to browse the user accounts.
Wireframe showing user accounts in a flat list.
Building MVP
Our MVP delivered basic account management capabilities such as creating new accounts and editing account information.
Beyond MVP
The ongoing development of this product mainly involves supporting additional admin and compliance-related requirements. Although the original design allowed the portal to be fairly modular, some work was needed to tie up the loose ends and more clearly define a scalable framework.
Revisiting the IA
I revisited the information architecture of the portal to ensure that the organization of the content supports our growing needs. Some patterns had emerged while working on the MVP and I wanted to formally capture them. I also collaborated with another designer on updating the taxonomy of the portal to ease the navigation. Based on our output, I created a prototype using Bootstrap to demonstrate the updated navigation and how the existing sections of the portal fit into the new structure. This prototype was very helpful in communicating the new design to the PM and the engineers.
Building a Pattern Library
In addition, I created a pattern library to ensure a robust foundation that supports on-going improvements and feature additions. This library is meant to set a baseline that defines the responsiveness and the key interactions of the portal. The following are some sample definitions of responsive elements.
