CSX Platform
The Connected Service Experience platform is a highly configurable solution system that is designed to be scalable and adaptable for aftermarket sales and service lifecycle management.
Platform: Web Responsive
Company: Syncron
Project Brief
The Connected Service Experience (CSX) platform is a highly configurable, flexible, and scalable business solution that allows all product solutions to work seamlessly together under one system.
In the first phase, my main goals are to understand the user, define the platform navigation architecture and UX pattern, and synchronize and unify the UI style for the onboarding products.
Project Scope
The work included:
- Benchmarking and focus studies on UX patterns among popular design systems.
- Platform persona creation.
- Conduct user research
- Define and design the key feature from the product’s roadmap requirements. requirement
The Problem
We strive to provide a comprehensive business solution package by integrating multiple products. However, each product has a different UI style, UX pattern, and navigation structure, which can lead to scalability issues.
The Challenge
We need to create a navigation system and app launcher that allow for customization with products and plugins to fit the client’s needs. This system is designed to work with various product solutions, so the main goal is to unify the UI style and UX pattern for the initial onboarding phase.
My Mission
Understand who the platform users are and what type of platform best supports our product and business goals.
Define and design a user-centered platform solution, that is flexible and scalable, allowing all product solutions to work seamlessly under one system.
The Team
I worked with a cross-functional team and collaborated with
- PM/PO for the project goal, direction, and requirements.
- Product leads and designers for the roadmap requirements and any unique product pattern.
- UI team for libraries and components.
Tools
Figma
Miro
Discovery
1. Define product goal
Business goal
CSX is a cloud-based service platform designed to work as a one-stop solution for all (clients) business needs.
Product goal
This platform will allow all product solutions to work seamlessly together under one system.
…and project scope
Phase one will integrate two other products into this platform, so the scope will include the roadmap requirements for those products.
New platform feature plan chart. To design and unify the UI style and the UX pattern.
2. Define platform user
Before understanding the user, I need to find out who the current and future platform users are. I collaborated with the product manager on each solution area and listed the potential users for the CSX platform.
2.1 Conduct user research
Even though I created hypothesis personas for the platform, we had a plan for initial integration, so my priority turned to focusing on the product user’s persona. I conducted user research for the target group to validate the persona data on user behaviors, responsibilities and goals, expectations, and paint points.
2.2 Platform persona
After reviewing my user research findings and refining, I updated the user personas based on the collected data to represent different user types, needs, and goals. This information is vital when I make design decisions.
3. Analysis the common pattern
One of the challenges is bringing different UI styles and UX patterns of products onboard, so the very first thing is to find a solution to unify the current and future products.
I analyzed the product roadmap requirements to define the product’s common key UX pattern and reserved its uniqueness.
3.1 Product research
Benchmarking Study & Analysis
I studied the popular complex design system to observe UX best practices in designing it. The study focused on common UX patterns such as “way-finding, big data, dashboard widgets, and dialog.” This study also inspired me to find possible solutions for our own needs.
One of the product research examples on dashboard types.
3.2 Review the UI system
After gattering key product requirements along with my research, it is time to sync up with our UI system to see if there are any new components that need to be requested.
3.3 Analysis platform feature
Once a product is integrated into a platform, all its functions are contained within the product. According to their roadmap requirements, all types of users can create multiple dashboards or dashboard views. Therefore, having the ability to manage their created dashboards or dashboard views is essential.
To address this need, I shifted my focus to designing a new feature called “dashboard management.” This will allow users to manage their dashboards effectively.
Design
Dashboard Management
User journey map
I begin by identifying the user role and product requirements and mapping out each user’s journey map to achieve their goals.
Wireframing
I start with user requirements to identify the required functions according to the roadmap, then design the basic layout structure and key functionalities for different user types.
I use wireframes to communicate my design concepts and solutions. In the design process, I collaborated with my design lead to review these concepts to ensure they were approved before prototyping began.
Prototyping
In this process, I will create a prototype of the approved design concept and apply our UI components to demonstrate what the end product should look like.
Dashboard management structure
Goal: This is for all users (super and general) to manage imported dashboard views and create dashboards in one place.
1. User role: superuser/manager
Superusers’ dashboard management view
1.1 Create a section within the dashboard
Goal: This is for the superuser to organize widgets into meaningful groups.
1.2 Dashboard settings and permissions
Goal: This is for the superuser to control the dashboard visibility with team users and which team members can change on the shared dashboards.
2. User role: general user
Goal: This is for the general user to create new dashboard-views and manage them all in one place.
2.1 Adding assigned dashboards
Adding dashboards: The manager assigns these dashboards to the user. The available dashboards are displayed on the “Add dashboard” panel.
2.2 Create a dashboard view
The general user can add one or more relevant dashboards to create their own combined dashboard view. Two dashboards can be combined, either vertically or horizontally, to create a dashboard view.
2.3 Pinned dashboard view
The general user can pin multiple dashboards to their primary view so they can quickly access the relevant dashboard and complete their task.
Project Learnings
The platform project has pushed me to the next level of user-centered design. This experience has increased my desire to focus more on the user.
Through user research, I got to know my users, learned their roles and responsibilities, and listened to their experiences, expectations, and pain points. These processes are vital to building a user-centered product, and these skills enhanced my design methodology.
I value their feedback because it allows me to make informed decisions. This is how we truly build a user-centered product.