Deliver2Me - CCMS Copy

Challenges

Key Challenges:

• Stakeholder Expectations: Pressure to deliver UI designs early in the project timeline.
• Complex Data Mapping: Managing thousands of OPUs and cost centers required a seamless bulk upload feature.
• User Familiarity: Users were accustomed to Excel, so the transition to a new system needed to feel intuitive.

‍

Design Process

User Research

To gain a deep understanding of the users' needs and pain points, I conducted in-depth interviews with the group financial service department. Key insights from these sessions included:

• Need for a centralized platform: A single platform to manage all financial aspects of food and beverage orders.
• Desire for real-time insights: Access to up-to-date information on budget usage and transaction history.
• Importance of security: Strong security measures to protect sensitive financial data.

‍

Persona Development

Based on the user research, I created detailed user personas to represent the different roles within the financial service department:

• Financial Controller: Responsible for overall budget management and approval of transactions.
• Cost Center Manager: Manages the budget for a specific cost center.
• System Administrator: Manages user access and system settings.

Information Architecture

I developed a clear and intuitive information architecture for the CCMS, organizing information into logical categories and creating a seamless user experience. Key components of the information architecture included:

• Dashboard: A centralized overview of key metrics, such as budget usage, transaction history, and outstanding orders.
• Cost Center Management: A section for managing cost centers, including adding, editing, and deleting cost centers.
• User Management: A section for managing user roles and permissions.
• Transaction History: A detailed record of all transactions, including date, amount, and vendor.

From the interviews session and user persona mapping, it results in a comprehensive information architecture, and through out the project, as new requirements coming in, the IA changes accordingly until this final IA is produced:

‍

User Flow

I created detailed user flows to visualize the steps users take to complete key tasks, such as:

• Adding a new cost center
• Approving a transaction
• Checking budget availability

Wireframing and UI Design

I designed wireframes to establish the basic layout and functionality of the CCMS. These wireframes were then iterated upon and refined into high-fidelity mockups, incorporating a clean and modern design language. Key design considerations included:

• Intuitive navigation: A clear and intuitive navigation structure.
• Clear and concise information: Well-organized and easy-to-understand information.
• Visual clarity: A visually appealing and easy-to-read interface.

The stakeholders were very particular in the use of data in for the presentation to the higher-ups, hence some wireframes is required to have specific information for their usage (I know wireframes isn't supposed to do that, but we adapt to the project situations and business needs whenever possible)

Design Solutions

To address the identified pain points, the CCMS incorporated the following key features:

• Bulk Upload: A feature to quickly and easily upload large amounts of data, such as cost centers and OPUs.
• Credit Limit Tracking: Real-time monitoring of budget usage and alerts for approaching budget limits.
• Enhanced Security: Unique credit card numbers for each transaction to improve security.
• Flexible User Roles: Customizable user roles and permissions to meet the specific needs of different users.

Solution & Key Outcomes

To address inefficiencies in financial transaction management and enhance user experience, the Credit Card Management System (CCMS) was designed with a user-centric approach.

1️⃣ Seamless Bulk Upload for Large Data Sets

• Implemented a bulk upload feature to handle thousands of OPUs and cost centers efficiently.
• Automated data validation reduced errors, cutting manual data entry time by 60%.

2️⃣ Real-Time Budget Tracking & Alerts

• Enabled real-time monitoring of credit limits with automated alerts for approaching budget thresholds.
• Improved financial visibility helped reduce cost overruns by 40%.

3️⃣ Enhanced Data Visibility & Reporting

• Designed an intuitive dashboard displaying transaction history, budget usage, and financial insights.
• Advanced search and filtering options sped up data retrieval by 50%, improving decision-making.

4️⃣ Strengthened Security & Compliance

• Introduced unique credit card numbers for each transaction, reducing fraud risks significantly.
• Encrypted transaction records and multi-level authentication ensured compliance with financial regulations.

5️⃣ User-Centric Design for Easy Adoption

• Created an Excel-like interface to ease transition for users familiar with spreadsheets.
• Customizable user roles and permissions increased flexibility, boosting user adoption rates by 35%.

By implementing these improvements, CCMS successfully optimized financial management, increased efficiency, and provided a secure, intuitive platform tailored to user needs. 🚀

Visual Design

Lesson Learned

1. Advocacy is Key: Educating stakeholders about the UX process ensures smoother collaboration and better outcomes.
2. User-Centric Design: Understanding user familiarity with existing tools (Excel) helped create an intuitive transition to the new system.
3. Flexibility: Balancing stakeholder expectations with a structured design process required adaptability and clear communication.

‍

Conclusion

The Credit Card Management System (CCMS) for Deliver2Me is a testament to the power of user-centered design and collaboration. By addressing complex financial tracking challenges and streamlining processes, the system has significantly improved efficiency and security for the Group Financial Services Department. This project has been a valuable learning experience, and I’m proud of the impact my designs have made.