Pricing Platform — Tianren Zhang (Chris)

Design Showcase:

Challenge

Vision

The antiquated system, initiated two decades ago, was originally designed to align with the expectations of Account Managers, given the platform's pronounced business-centric nature. However, the functions were developed without undergoing the necessary scrutiny of domain experts, enhancements from business analysts, or insights from experienced designers. The result is a system that appears akin to an elaborate Excel spreadsheet awkwardly integrated into a website.

Account Managers face inefficiencies as they grapple with integrating online and offline issues on the platform to complete specific business processes.
The system's struggle to adapt to modern business complexities is compounded by advancements in loan and deposit products, policies, and a growing client base.

Pairing with Business Analyst, during the Inception phase of the project, 60+ business-related colleagues were interviewed, over 150+ original needs were collected, 110+ practical pain-points and requirements were classified through the clustering analysis.

The vision of the project is to deliver a smart pricing platform for Account Managers, Business Approvers, and System Administrators with the 4 key values:

Results

Over 98% positive feedback received from 80+ users across 15 branches in China during 2 rounds of User Acceptance Testing (UAT) and User Experience Questionnaire research.
Successful launched this first version across all 143 branches in China by February 2024.
Secured client satisfaction and approval for the coming "phase 2" development, integrating AI-GPT technology.

Information Architecture

Questionnaire feedback - data excerpt

Collaborated with Business Analysts to co-create experience design solutions for half of the entire system modules.
Actively participated in the Agile activities for full 10 iterations, co-hosting daily stand-ups and retrospectives, etc.
Team Way of Working co-formulating, and UX-related issues management.
Teamed up with an another UX Designer to maintain the design system.
Independently completed the design for over 100 key interfaces.

Final Designs - Some Interfaces and Design System Components

My Contribution

Way of Working

Design Showcase:

Way of Working

At the project's outset, Business Analysts exercised excessive control over information alignment, client communication, and requirements management, leaving Developers and UX Designers feeling excluded and passively involved in gathering requirements. Recognizing this issue early in the project, I took the initiative to lead discussions on formulating a new Way of Working and contributed to standardizing the workflow. The accompanying graph illustrates the Agile team's workflow in each iteration.

In addition to the requirements list aligned at the beginning of each iteration, there is also a set of optimization requirements from testing by the PO team in the UAT environment after Iteration Showcase. Moreover, there are experience optimizations documented after discussions between UX and UI Devs. These requirements, once recorded separately, are integrated into the Additional Requirements List before the start of the next iteration. After meeting with the PO team and confirming priorities, they are added to the next iteration plan.

This method ensures no small optimization points are overlooked, which got satisfaction from the client.

Ensuring working transparency is crucial in a hybrid working structure within a stable Agile team. While we utilized Kanban to track iteration progress, it primarily focused on remaining development-related issues for the PM to calculate man-days and the exact percentage of iteration progress. To enhance transparency, I led the effort to manage all UX-related issues in Google Chart, providing a comprehensive view of my daily work and progress.

This approach gained recognition from colleagues, prompting them to adopt similar practices.

Design Showcase:

Dealing with Complexity

Design Showcase: Dealing with Complexity

Design a Workbench that displays key modules for users of different roles, facilitating their daily usage.

The workbench contains all essential functions frequently used by different users. The collaborative idea with the PO team is to design a comprehensive workbench with all necessary functions. Subsequently, we plan to present crucial modules tailored to distinct user roles through system user authority control.

The overall process is planned to get visual and functional requirements at the same time. This encompasses decision-making on layout wireframing, followed by proposing two design concepts for subsequent refinements.

Visual Workshop Moodboard Section

Workbench is the most important page over the platform, as it will be use as the landing page
The PO team expect good visual design on Workbench, further use similar visual elements to improve other pages
The requirement is complex due to fit to different user roles, including: System Admin, Account Manager (Branch), Product Manager (Head Office & Branch), Business Approver (Head Office & Branch), Business Lead (Head Office & Branch)

The visual workshop engaged 15 platform users, including all roles, in a design thinking process that involved content sensitization, divergence, clustering and convergence, moodboard creation, and group presentation to extract visual keywords and elements. Following the workshop, questionnaires were distributed to different roles to assess essential functions for their daily work, expectations, and preferred layout patterns.

Questionnaire

Results Analysis and Design Concepts

59.43% of early adopters who participant in the questionnaire research mentioned this module designed well in overall using experience.

Design an intuitive onboarding experience tailored to users with diverse roles, facilitating a swift comprehension of new pages, functions, and updated system contents.

Given the substantial changes from the old system, certain modules, such as Pricing Examination & Approval and Post-event Supervision, entail a learning curve for users.
User Instruction will be prepared in advance of the system switch. The onboarding process aims to serve as a supplementary explanation, avoiding redundancy with the detailed content covered in the instructions.
New modules and interaction flows require users to invest extra attention in learning, distinguishing them from the routine process of adding new functionalities.

Core Module Onboarding component uses on brand new interaction experiences to let user get ideas of what are the contents in the page or how to use the page. This guidance will be triggered the first time a user role enter the specific page.

New Function Introduction component uses on features added without changing the main user flow, for example new AI product recommendation feature in Deposit Order. This guidance will be triggered the first time a user role scroll down to the specific area on a page.

Differential Function Introduction component only choose the text version for the MVP development. It will be used as a page notice and be triggered the first time a user role enter a viewing-oriented page.

In response to project requirements, I categorized user guidance into 3 types: core module onboarding, new function introduction, and featured/differential function introduction. Refining these concepts using AntDesign Library components, I gained approval from the UI Dev Lead and ensured alignment with the client's UX team and PO team.

The next step involved creating an information architecture, listing all modules, and considering factors such as business priority, interaction complexity, and differentiation from the old system. We provided recommendations on which modules needed guidance and the preferred type of guidance.

Through iterative adjustments to guidance details and content, we successfully completed the design for onboarding guidance across 15 modules. This entire process was led by me, with collaboration from another UX Designer for confirming module guidance types.

Design an interactive experience about the Pricing Result calculation process, empowering users to explore detailed information about each pricing factor with ease.

The calculation process is always complex to follow, the client needed a more visually clear way to navigate the factor’s details, but still be able to check the pricing in full view;
The ‘+-×÷’ calculation contains multi-steps and multi-layered factors. The hierarchical structure should be paid attention to.

76.25% of early adopters who participant in the questionnaire research mentioned this module designed well in overall using experience.

Design Showcase:

New Modules in the System

Design Showcase: New Modules in the System

In actual banking operations, employees often hold multiple positions. In the internal office software, referred to as Y, differentiation of employees is based on a unique employee ID and multiple organizations and positions. This involves the concept of Y accounts categorized under various institutions. However, in practical business scenarios, pricing operations require distinguishing between the corresponding authority institution and business role to view different content and perform corresponding operations.

In the original platform, there was a lack of design in the platform authorization section. This resulted in the inconvenience of users needing to log out and log back in when switching business roles. Additionally, applying for new platform roles required an offline process, involving waiting for administrative personnel to input the data. This hybrid online-offline process is complex and slow, failing to ensure the work efficiency of staff. This was identified as one of the main issues during the platform's initial review and interviews.

The initial painpoint comes from the project inception research, users think it is complex to switch account and apply for new platform identity without a clear presentation on the interface.

From the business perspective, the Abnormal status often cause due to the internal Y system information changes. Our platform is able to perform a quick response and mark related account as “Abnormal”. The System Admin can view all the user identity from the chart and make operations: Mark as normal or block the identity.

In the current banking operations, the approval process involves circulating pricing order requests via email, leading to inefficiencies and stakeholder complaints. Integrating this process into the pricing system would centralize management, improving efficiency and enabling approvers to focus on pricing order requests.

In this design project intro, I'll highlight the Approval Workflow Configuration and Complete Approval Workflow Preview modules, considering NDA restrictions and module attributes.

In the Approval Workflow Configuration, users need to consider 3 key aspects: the basic conditions for the workflow's applicability, the structure of the workflow nodes, and the triggering rules:

In the basic conditions section, configurations involve multiple amounts in applicable organizations, business types, clients, and Account Managers. Additionally, users expect the ability to quickly add groups that commonly used within these parameters.
The approval flow nodes structure consists of custom nodes and default configuration nodes, each potentially involving multiple individuals. This implies that in any given node, approval from any one person enables progression to the next node.
Users are used to inputting complex formulas for approval workflow triggers. Given the complexity of the information entered for pricing orders, they prefer to maintain the formula configuration method but with structured visual representation and error validation.

In the old system, after users configured the approval workflow, there was a lack of complete preview for the applicable head office and branch approval flows. This led to a lack of understanding of the entire process and all nodes, resulting in situations such as duplicating approval flows or adjusting nodes repeatedly.
From the perspective of employees, there is a requirement to match approval flows based on key conditions from pricing orders and to view all nodes to understand the approval flow rules that need to be processed under each node.
Ability to query all approval flows that a specific pricing order needs to go through, along with an overview of all nodes and the approval rules for each node.

Design Showcase: