Digital Platform Workspaces & MarketPlace
All-in-sync and in one universal place – Digital Platform Workspaces project was led to bring in all of the existing and new internal applications into single desktop and web platforms to provide users a more intuitive and seamlessly integrated experience. I’ve also designed a platform-wide MarketPlace that is incorporated synchronously on both desktop and web platforms for users to add apps into their workspaces consistently.
The Problem
In the past, our applications were built individually by separate teams, different design patterns and technology and on various platforms that created fragmented user experience because they often weren’t able to speak to each other when we needed an interoperability aspect. It not only was inefficient as every product required time and effort to build from scratch but also created an inconsistent experience as they were designed and built in silos.
This project kicked off from two perspectives:
Create an environment for traders/sales teams to have a single log in to access their daily workflow applications with an interoperability built-in amongst various applications to sync up synchronously to help their user experience.
Create cohesive code base and design patterns for reusability, scalability and efficiency.
Team & Role
I was the product design lead responsible for visual and interaction design on this project and worked closely with the UX designer to ideate during the discovery and ux stages working through user journeys, information architectures and wireframes.
Key team members were structured as our usual 3 teams: product, design and engineering teams. From the start of the project, it was important for 3 teams to collaboratively work together to brainstorm ideas and define directions using each of our expertise. We also used the RACI model to identify roles and responsibilities as the project touched so many different teams to set a clear review/approval process that doesn’t delay the project.
Design Process
We incorporated the Double Diamond process: Discover, Define, Develop and Deliver. This process not only helped the team work together towards a common goal but it also set a clear structure that allowed us to understand and respond to the users’ needs.
Discovery
As we were trying to build an ecosystem that brings all of these various trading and analytics applications into a single platform for the entire CIB division, it was critical for us to define user base and identify the list of applications and understand how they’re built for us to set boundaries on what we agree to achieve and figure out the technology.
We defined various user personas with our existing internal user groups and identified their daily workflows, use cases and responsibilities as well as their pain points. After analyzing personas, we narrowed down our users to focus on the markets and sales team for their need on interoperability of apps.
We facilitated a lot of workshop sessions that often included numerous whiteboardings and discussions to ideate together. When we were brainstorming, we researched competitors who were already known for building the workspace platform in the industry – such as Google Workspace, Workspace One from VMware, and Citrix – to understand their product and set a benchmark for us to compare and measure our success.
We also conducted 1:1 moderated user interviews as well as focus groups to understand their current pain points and needs from the Workspace perspective but also define paths for the ‘App discovery’ from the MarketPlace perspective so we understand how the user will be using the MarketPlace from the entry point to the execution.
Design
Once we identified the overall structure and flows, we transitioned them into digital output to clarify our ideas in a concrete format and started creating low-fidelity wireframes to illustrate framework and flow. Throughout the process, we continuously met with our users to receive their input and to validate our approach.
We applied visual design and interaction patterns using the Design System to set standards and stay consistent. As we incorporated visual design patterns, we continuously partnered up with our end-users to ensure the framework design was neutral enough to blend well with other existing apps that we didn’t have control over. We tested with multiple existing apps to create a mock-up to see how it would look in real life to set our expectation and to mitigate any visual conflicts ahead of time. We also partnered up with the Design System team to design new components such as the toolbar and preferences pattern to ensure we meet all Design System requirements to be consistent with existing patterns and to build an ADA compliant component.
For MarketPlace, we had some flexibility on the design as it was a brand new product that we were defining so we first started out with the light theme to set the tone. We also created generic app icon patterns to support the future new products that could utilize the icon using the icon generator within the system should they require design resources.
