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: AI and Smart Interfaces

  • Home
  • AI and Smart Interfaces
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.

Accessibility | AI and Smart Interfaces | Instructional Content | UX Design
121

Erica AI Instructional Video

Erica AI Instructional Video

Designed an instructional video to improve adoption and usability of Erica—Bank of America’s AI assistant—by educating internal users with structured content and interactive visuals aligned with conversational UX best practices.

  • Project Type UX for AI, User Education & Onboarding, Interaction Design, Instructional Media, Conversational UX Support
  • My Role UX Designer (Content Structuring, Interaction Design, User Education)
  • Tools Used Figma, Adobe Premiere Pro
  • Duration 1 Month
  • Company Bank of America
LIKE THIS 121
VIEW PROJECT

Confidentiality Note:

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

Erica, Bank of America’s AI-powered assistant, surpassed 2 billion interactions, but internal associates were underutilizing its capabilities due to lack of clear, engaging training materials. I was tasked with designing an instructional video to drive adoption, educate associates, and align with Erica’s conversational UX patterns.

This project combined elements of interaction design, content structuring, and video production to create a scalable training solution that humanized the AI experience for employees.

The Challenge

✘ Associates had low confidence navigating Erica’s capabilities.
✘ Existing training materials were static, outdated, and text-heavy.
✘ Lack of visual storytelling and contextual guidance around conversational UX.

The Goal

✔ Improve adoption and usage of Erica among internal users.
✔ Create an instructional experience that mirrors Erica’s intuitive AI interface.
✔ Deliver a reusable, scalable training asset for onboarding and education.

My UX Process & Approach

Content Structuring & Scripting
  • Audited Erica’s features and prioritized user tasks based on internal usage analytics.
  • Storyboarded a concise flow to introduce key features in a narrative-driven structure.
  • Applied conversational UX principles to ensure video pacing matched user thinking.
  • Designed supporting visuals in Figma that mirrored Erica’s real interface for visual familiarity.
Interaction Design & Engagement Tactics
  • Integrated motion cues, screen zooms, and pause/play breakpoints to guide user attention.
  • Ensured ADA-friendly video contrast and type sizes for clarity and inclusivity.
  • Designed visual metaphors to simplify abstract AI interactions (e.g., smart search, intent detection).
User Testing & Stakeholder Review
  • Conducted usability testing with internal associates to validate clarity and engagement.
  • Refined voiceover pacing and screen transitions based on feedback.
  • Partnered with L&D and product owners to align on business goals and brand tone.

Final Outcome & Impact

✔ Improved Erica adoption rate among internal users based on follow-up training surveys.
✔ Reduced support queries related to Erica navigation and features.
✔ Delivered a repeatable video training template for other AI-driven features and tools.
✔ Helped bridge the gap between AI design intent and real-world usage.

Key Takeaways & Learnings

✔ UX for AI products doesn’t stop at the interface—education is part of the experience.
✔ Instructional design and interaction design must work hand in hand for engagement.
✔ Designing for adoption is about clarity, empathy, and thoughtful pacing.

Accessibility | AI and Smart Interfaces | Healthcare UX | Service Design | UX Design
263

Confidential Healthcare Platform

Confidential Healthcare Platform

This project is protected by an NDA, and I am unable to share detailed visuals or specific client information. However, I am happy to discuss my role, design impact, and UX process in more detail.

  • Project Type B2B Enterprise SaaS, Healthcare UX, AI-Driven Platform, Multi-User System Design, UX Research & Strategy, Location-Based Experience
  • My Role Lead UX Designer
  • Tools Used InVision, Figma, Adobe XD, Sketch, Analytics Tools
  • Duration Feb 2015 – Apr 2022
  • Company NDA Protected Confidential
LIKE THIS 263
VIEW PROJECT

Confidentiality Note:

This project is protected by an NDA, and I am unable to share detailed visuals or specific client information. However, I am happy to discuss my role, design impact, and UX process in more detail.

The Challenge

To build an AI-powered healthcare platform from scratch that enables enterprise clients to provide employees with easy access to medical services, real-time provider search, and secure authentication features.

The Goal

✔ Create an intuitive multi-user platform that supports enterprise clients, medical professionals, and patients.
✔ Drive adoption and increase platform engagement by improving accessibility and security.
✔ Develop scalable design solutions that could support millions of users across different locations.

UX Process: My Approach

Research & User Insights
  • Conducted stakeholder interviews, usability research, and competitive analysis to define user needs.
  • Mapped customer journeys and service blueprints to optimize workflows and minimize friction.
Wireframing & Prototyping
  • Created low-fidelity wireframes to explore navigation and task flows.
  • Developed high-fidelity interactive prototypes for usability testing and stakeholder validation.
Design & Development:
  • Designed custom online portals with QR authentication, real-time provider search, and personalized dashboards for different user roles.
  • Ensured accessibility compliance (WCAG 2.1) and mobile responsiveness to support all devices.
Usability Testing & Iterations
  • Conducted A/B testing and analytics reviews to measure engagement and refine the UX.
  • Implemented data-driven design enhancements, improving task completion rates and usability scores.

Impact & Key Results

✔ Acquired major enterprise clients, leading to a 200% revenue increase within six months.
✔ Enabled 1M+ provider searches, improving patient access to healthcare services.
✔ Reduced search and appointment booking time by 40%, streamlining user workflows.
✔ Successfully built a scalable design system, allowing future feature expansion.

 

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