Muhammad Sufian Muhammad Sufian
  • Home
  • Portfolio
  • Services
  • Resume
  • Blog
  • Contact
Muhammad Sufian

Designing tools that make life easier, from healthcare to finance. Here’s what I’ve been working on.

  • Home
  • Portfolio
  • Services
  • Resume
  • Blog
  • Contact

Projects Category: Finance UX

  • Home
  • Finance UX
Accessibility | Design Systems | Enterprise UX | Finance UX | UI Design | UX Design
143

PageOne – Services Operational Portal

PageOne – Services Operational Portal

Redesigned Bank of America’s legacy internal operational portal into PageOne—a centralized, scalable platform empowering employees to manage core banking workflows efficiently and securely across departments.

  • Project Type Enterprise SaaS UX, Internal Tool Redesign, UX Research, Interaction Design, Design System Integration
  • My Role Lead UX Designer (Research, Wireframing, Prototyping, Testing)
  • Tools Used Figma, InVision, Sketch, Phoenix Design System
  • Duration 6 Months
  • Company Bank of America
LIKE THIS 143
VIEW PROJECT

Confidentiality Note:

This project is under a confidentiality agreement. Visuals and internal data cannot be publicly shared. Please contact me to discuss this project further.

Redesigned Bank of America’s legacy internal operational portal into PageOne—a centralized, scalable platform empowering employees to manage core banking workflows efficiently and securely across departments.

The Challenge

✘ Legacy systems were cluttered, inconsistent, and inefficient, leading to cognitive overload and decreased productivity.
✘ The lack of unified patterns across internal tools caused frequent usability issues and user confusion.
✘ Accessibility standards were not being met, making the platform difficult to navigate for employees with varying needs and roles.

The Goal

✔ Modernize the internal portal and unify fragmented tools under one cohesive interface.
✔ Implement a scalable design system (Phoenix Framework) for long-term consistency.
✔ Improve usability, accessibility, and operational efficiency across the platform.

My UX Process & Approach

Research & User Understanding
  • Led stakeholder interviews and conducted contextual inquiry across different departments to uncover bottlenecks.
  • Ran heuristic evaluations, user surveys, and synthesized feedback into actionable insights.
  • Developed personas and journey maps to guide design decisions and prioritize features based on user roles (tellers, managers, support staff).
Information Architecture & Prototyping
  • Reorganized IA to reflect more intuitive workflows based on task frequency and user needs.
  • Created low-fidelity wireframes to validate layout and interactions early with internal stakeholders.
  • Built high-fidelity prototypes in Figma and InVision, tailored for specific roles within the bank.
Design System Integration (Phoenix Framework)
  • Collaborated with engineers and accessibility teams to integrate the Phoenix Design System.
  • Customized components for internal use cases, ensuring scalability and consistency.
  • Documented component usage patterns for future product teams.
Usability Testing & Iteration
  • Facilitated usability testing with real employees using task-based scenarios.
  • Measured task success rates, time-on-task, and satisfaction scores pre- and post-redesign.
  • Iteratively improved flows and visual hierarchy based on data and accessibility feedback.

Final Outcome & Impact

✔ Increased employee task efficiency by 30% through simplified flows and task prioritization.
✔ Achieved full ADA accessibility compliance, improving usability across a diverse workforce.
✔ Delivered a scalable design system adopted across multiple internal tools.
✔ Reduced training time for new hires by 25%, thanks to intuitive UI and consistent patterns.

Key Takeaways & Learnings

✔ Design systems succeed when paired with strong cross-functional collaboration and continuous iteration.
✔ Small accessibility changes (contrast, focus states, keyboard navigation) had outsized impact on usability.
✔ Designing for internal tools requires balancing business logic with empathetic design to enhance day-to-day productivity.

AI and Smart Interfaces | Enterprise UX | Finance UX | UI Design | UX Design
144

Banking Visibility Application

Banking Visibility Application

Designed an internal-facing banking analytics tool that simplified complex data visualizations and optimized workflows for operational teams. Improved data clarity and decision-making efficiency through research-driven UX design.

  • Project Type Enterprise SaaS, Data Visualization UX, FinTech, Internal Tool Design, UX Research & Workflow Optimization
  • My Role UX Designer (Research, Wireframing, Prototyping, Testing)
  • Tools Used Figma, InVision, Sketch, Phoenix Design System
  • Duration 5 Months
  • Company Bank of America
LIKE THIS 144
VIEW PROJECT

Confidentiality Note:

This project is confidential. Visuals and internal data cannot be publicly shared. Please contact me for more information.

The Banking Visibility Application (BVA) was developed to support internal banking teams in making faster, more informed decisions through clear data visualization and streamlined workflows. I led the end-to-end UX design to ensure the tool was intuitive, scalable, and aligned with both user needs and business objectives.

The Challenge

✘ Complex and cluttered data visualizations were hindering comprehension and slowing down decisions.
✘ Operational workflows were inconsistent and inefficient.
✘ Stakeholders lacked a clear link between UI design and business KPIs.

The Goal

✔ Translate raw data into user-friendly visualizations to support timely decision-making.
✔ Redesign workflows for greater speed and operational efficiency.
✔ Align design outcomes with measurable business goals.

My UX Process & Approach

Research & User Understanding
  • Conducted user interviews and stakeholder workshops to understand pain points and expectations.
  • Mapped existing workflows and identified bottlenecks across departments.
  • Synthesized findings into personas and task flows to guide ideation.
Wireframing & Prototyping
  • Created low-fidelity wireframes to explore layout and data hierarchy.
  • Designed high-fidelity prototypes with interactive dashboards tailored to user roles.
  • Prioritized modular design for potential reuse and scalability across teams.
Design System Integration (Phoenix Framework)
  • Utilized the Phoenix Design System to maintain visual consistency and scalability across the application.
  • Customized components for dashboard-specific needs including filters, charts, and user role variations.
  • Partnered with developers to ensure component behavior matched interaction expectations across breakpoints.
  • Documented usage guidelines for future design iterations and system expansion.
Usability Testing & Iteration
  • Facilitated testing sessions with internal analysts and operational leads.
  • Gathered feedback on clarity, speed of access, and interaction flows.
  • Iterated on visual hierarchy, filters, and navigation to reduce friction and cognitive load.

Final Outcome & Impact

✔ Improved data comprehension and visibility across teams through clearer visual layouts.
✔ Reduced average workflow completion time by 25%, increasing productivity and responsiveness.
✔ Enabled faster decision-making for internal operations through well-structured, actionable dashboards.
✔ Delivered a scalable internal tool that can support additional use cases and datasets over time.

Key Takeaways & Learnings

✔ Data visualization must be paired with user empathy and real-world testing to deliver clarity.
✔ Business alignment is not an afterthought—it’s a core UX principle in enterprise settings.
✔ Early stakeholder collaboration accelerates design adoption and long-term success.

©2025 Muhammad Sufian. Pixels, prototypes, and the occasional creative meltdown.