Design System
Background
The design drafts are in an early stage. The lack of a unified component library and long iteration cycles can lead to inconsistencies in style, layout, and user interaction paths
Redesign Goal
Integrate existing design language and platform principles to establish design standards for basic components and key interfaces. Continuously improve consistency in user experience to enhance design and development efficiency
Impact
Save 36% Task Finish Time
The redesigned workflows and interface reduced user task time and confusion, leading to faster onboarding and smoother operations.
Boosted Market Competitiveness
Strategic improvements and visual clarity positioned the product more competitively within the finance tooling landscape.
Design Scalability
The implementation of a reusable design system accelerated future development cycles of releasing new features like Cashier, Transaction
Project Refletion
One of the main challenges of this project is restructuring the functional framework and integrating user interfaces without compromising the existing system’s stability.
As a product experience designer, it's essential to focus on both business and user experience metrics. Success hinges on deep user research to uncover genuine needs, aligning with key use scenarios and future market demands, and identifying improvement priorities.
Also crucial is expanding skills and gaining practical experience to enhance and accumulate a personal solution repository.
%201.png)
01
Demand Matching
Confirm how many of the product's features meet actual user needs and future market requirements
02
Seamless Experience
Avoid errors, provide good interaction feedback, and support useful features
03
Easy to Use & Understand
The functional design, components, and product logic make the tool easy to use and understand
Craft layouts for complex business operations
Rebuild interface layout, focusing on primary tasks and optimising visual flow.
Admins on the user page: view, confirm, and modify user details and permissions. Using a unified horizontal layout streamlines tasks, enhancing visual flow for better information management
Department Group
Department Page
User Info Page
Visual hierarchical regroup
This is the space to introduce visitors to the business or brand. Briefly explain who's behind it, what it does and what makes it unique. Share its core values and what this site has to offer.
Task-Focus Workflow
Find target user
Describe the product here. Include important features, pricing and other relevant info. Consider adding an image or video of the product.
Check user detail
Describe the product here. Include important features, pricing and other relevant info. Consider adding an image or video of the product.
Edit access & confirm
Describe the product here. Include important features, pricing and other relevant info. Consider adding an image or video of the product.
Functionality
Multiple Domain Mangement
This is the space to introduce the Product section and showcase the types of products available.
Group Management
This is the space to introduce the Product section and showcase the types of products available.
Separate Management of Users and Access
Separate role and permission management into a back-end function to streamline creation and modification processes, enhance user interface clarity, and prevent accidental changes.
This allows for efficient viewing and updating of roles and individual permissions
Pinpay
B2B Payment Integration Platform Redesign
Access Management Experience Redesign
Considerations for payment integration backend access management system function optimisation and experience improvement
Role
Product Designer
07/2022-12/2022
Timeline
Responsibility
• User Research
• Wireframe
• Design system
• Product Mangement
Background / Chanllenge
Pinpay is the self-developed payment integration website, which allowed the team to approve the transactions, withdrawals and payments setups. However, the existing user permission management system became a bottleneck of the current platform task distribution and staff access management. Administrators spent excessive time modifying permissions, and users struggled with inefficiencies due to permission issues.
Outdated experience
The visual design is outdated and inconsistent. Component styles lack uniformity, and related pages have mismatched layouts and interaction styles.
Confused user flow
The hierarchy of process states is unclear, causing user confusion. Steps are disjointed, creating uncertainties. Also, related pages lack consistent layout and interaction styles.
Unclear Access Management
In closed-loop processes, users perform tasks based on roles and permissions. Permissions are now distributed chaotically, with individual users having many access combinations.
Disorganised Organisational Structure
Relationships between organisational groups and individual users are unclear. Limited capability to manage access based on user’s role, and less precise hierarchical permission management.
Define
Through research, current user needs can be identified based on specific usage scenarios. Then, explore stakeholders' perspectives on product development prospects
Inefficient Access Management
The existing access control system was outdated and lacked flexibility. It couldn’t efficiently handle multiple user types or domains, provided limited support for third-party access, and missed key specifications required for scalable user management.
Operational Bottlenecks and Workflow Inefficiencies
The workflow was fragmented and unintuitive, forcing users to switch contexts frequently. Poor communication of information meant users had to spend excessive time searching for relevant content, significantly reducing productivity.
Poor Usability and Visual Clarity
An outdated visual design led to information overload and cognitive fatigue. UI components and interaction patterns were inconsistent and did not align with usability best practices, making the experience confusing and inaccessible.
Define Design Optimisation Directions
Enhancing Tool Functionality
At the business level, precise access management and user-friendly workflow are key strategies to enhance efficiency.
Expanding the functionality of access management helps the product address broader usage scenarios and needs.
Intuitive interface&workflow
Based on consideration of task scenarios, the frequent operations are the primary design focus. Users can see and understand before they operate, and tasks are completed through well-organised interaction components.
Visual clarity and appealing
Optimise visual workflows with consistent elements and clear module hierarchy to reduce user distractions, enabling quicker information location and communication, thereby improving product comprehension and efficiency
Restructure the Sitemap
Retain 'group' constraints to facilitate role and user management within the group, while elevating groups as units for role management
