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
Accessibility | Healthcare UX | Service Design | User Research | UX Design
243

Comprehensive Digital Healthcare Platform

Comprehensive Digital Healthcare Platform

Through a wide variety of mobile applications, we’ve developed a unique visual system and strategy that can be applied across the spectrum of available applications.

LIKE THIS 243
VIEW PROJECT

Ella Health is a comprehensive digital healthcare platform designed to help patients schedule appointments, consult doctors online, and access medical records. My role involved leading UX research, defining user flows, designing wireframes, and developing the final UI.

The Challenge

✘ Complex Navigation – Patients struggled to schedule appointments easily.
✘ Lack of Personalization – The platform didn’t adapt to user preferences or history.
✘ Poor Accessibility & Mobile Experience – The design was not responsive and had low contrast, making it hard for elderly users.

The Goal

✔ Simplify appointment booking with an intuitive, user-friendly experience.
✔ Create a patient-centric, personalized experience based on user needs.
✔ Ensure accessibility & mobile-friendliness to support all user demographics.

1. UX Process: My Approach

Research & User Understanding

✔ User Interviews: Conducted 10+ interviews with patients, doctors, and administrative staff to identify pain points.
✔ Survey Data: Analyzed 50+ patient responses to understand common frustrations.
✔ Personas Created:

  • Primary Persona: Emma (Patient, Age 45) – Needs easy scheduling & appointment reminders.
  • Secondary Persona: Dr. John (Physician, Age 50) – Needs a simple dashboard to manage patients.
Key Insights from Research

✔ Patients wanted a 1-click appointment booking experience.
✔ Doctors needed a centralized dashboard to track appointments efficiently.
✔ Users preferred a mobile-first approach for scheduling and notifications.

2. Defining the Problem

Problem Statement:

“How might we create a seamless and accessible healthcare experience that simplifies appointment scheduling and enhances patient-doctor interactions?”

3. Wireframing & Prototyping

✔ Low-Fidelity Wireframes: Created 4 variations of appointment booking flows.
✔ Optimized Navigation: Introduced a “Quick-Book” button to reduce scheduling time.
✔ Mobile-First Design: Ensured a responsive, accessible UI for elderly patients.

Key UX Improvements:

✔ Personalized Dashboard → Patients see their medical history & upcoming visits.
✔ Doctor Profiles & Reviews → Helps users choose the right physician.
✔ Intelligent Appointment Reminders → Automated notifications via SMS & email.

4. High-Fidelity UI Design & Interaction Enhancements

✔ Modern, Clean UI: Followed minimalist, healthcare-friendly design principles.
✔ Consistent Design System: Created a scalable UI kit with reusable components.
✔ Micro-Animations: Added loading indicators & success messages for better UX.

5. Usability Testing & Iterations

✔ Conducted 3 rounds of usability testing with patients & doctors to refine workflows.

Key Feedback & Iterations

✔ Patients loved the 1-click booking system – kept it as a core feature.
✔ Doctors needed a faster way to access patient history – added a quick-access button.
✔ Elderly users found small text difficult – increased font sizes & contrast.

Final Iteration Outcome:

✔ Booking Time Reduced by 40% – More patients completed appointments faster.
✔ Doctor Dashboard Improved Efficiency – Doctors could manage patients 2× quicker.
✔ 98% Positive Patient Feedback – Users found the system intuitive & seamless.

Final Outcome & Impact

✔ 40% Faster Appointment Scheduling – Reduced unnecessary steps.
✔ Enhanced Accessibility – Optimized for elderly patients & mobile users.
✔ Seamless Patient-Doctor Experience – Created an intuitive dashboard & reminders system.
✔ Increased Patient Engagement – Higher retention due to personalized features.

Key Takeaways & Learnings

✔ User research drives better solutions – Early interviews & surveys led to highly targeted improvements.
✔ Accessibility is critical in healthcare UX – Small UI tweaks significantly improved usability for elderly users.
✔ Iterative testing refined the experience – Each usability test resulted in major design enhancements.

 

Accessibility | Enterprise UX | Healthcare UX | UX Design
606

Medical Imaging Platform

Medical Imaging Platform

LifeImage is a medical imaging management system designed for radiologists, physicians, and healthcare professionals to efficiently store, share, and analyze medical imaging data.

  • Project Type Web & Mobile UI/UX Design for a Medical Image Management Platform
  • My Role Senior UX Designer (Lead UI/UX Design, Research, Prototyping, Testing)
  • Tools Used Figma, Adobe XD, Sketch, InVision
  • Duration 4 Months
  • Company Ex3gen Inc. (Client Project)
LIKE THIS 606
VIEW PROJECT

LifeImage is a medical imaging management system designed for radiologists, physicians, and healthcare professionals to efficiently store, share, and analyze medical imaging data.

The Challenge

✘ Outdated & cluttered – Making navigation inefficient.
✘ Workflow-heavy – Too many steps for simple tasks like uploading and sharing images.
✘ Lacking accessibility – Poor contrast, small fonts, and no dark mode for radiologists.

The Goal

✔ Improve usability & efficiency by restructuring navigation.
✔ Enhance accessibility for better readability and ease of use.
✔ Modernize the interface with a clean, intuitive design system.

1. UX Process: My Approach

Research & Understanding the Users

✔ Stakeholder Interviews: Conducted 5 interviews with medical professionals to gather insights.
✔ Competitor Benchmarking: Reviewed leading medical imaging platforms like DICOM & Ambra Health.
✔ User Personas: Created 2 primary personas – Radiologists & Physicians.

Key Findings from Research

✔ Radiologists needed faster image retrieval and bulk uploads.
✔ Physicians wanted simplified workflows with better search filtering.
✔ A dark mode option was crucial for professionals working long hours.

2. Defining the Problem

Problem Statement:

“How might we simplify navigation, reduce clutter, and enhance accessibility to streamline medical image management for healthcare professionals?”

3. Wireframing & Prototyping

✔ Low-Fidelity Wireframes: Created 3 dashboard variations based on user workflows.
✔ User Flow Optimization: Reduced image upload & sharing steps from 6 to 3 clicks.
✔ Dark Mode Integration: Enhanced readability & reduced eye strain.

Key UX Improvements:

✔ Side Navigation Panel → Improved discoverability of key features.
✔ Drag & Drop Upload → Simplified bulk uploads for radiologists.
✔ Customizable Dashboard → Users could rearrange widgets based on their needs.

4. High-Fidelity UI Design & Interaction Enhancements

✔ Modern UI Design: Applied a minimalist, medical-grade visual style.
✔ Design System: Built a scalable UI kit with standardized components.
✔ Micro-Interactions: Added subtle hover effects & loading indicators.

5. Usability Testing & Iterations

✔ Conducted 2 rounds of usability testing with real users (3 radiologists & 2 physicians).

Key Feedback & Iterations

✔ Users loved the drag-and-drop upload – made it a core feature.
✔ Doctors requested faster search filtering – added advanced filtering options.
✔ Radiologists needed keyboard shortcuts – integrated shortcuts for bulk actions.

Final Iteration Outcome:

✔ 20% Faster Task Completion – Optimized navigation reduced workflow time.
✔ Improved Usability – Core actions were now 2× faster.
✔ 95% Positive User Feedback – Users found it intuitive & efficient.

Outbound
Settings

Final Outcome & Impact

✔ 20% Faster Workflows – Optimized navigation & UI reduced workflow time.
✔ Improved Accessibility – Introduced dark mode, larger fonts & better contrast.
✔ Scalable Design System – Created a UI kit for future updates.
✔ Increased User Adoption – Physicians & radiologists found the system clean, intuitive, and efficient.

Key Takeaways & Learnings

✔ Balancing UX & UI was key – Even in a UI-driven project, UX thinking made a huge difference in efficiency.
✔ Early wireframing & user testing saved time – Iterating quickly avoided major design overhauls.
✔ Understanding medical professionals’ workflows led to an intuitive, high-performing solution.

Accessibility | Design Systems | Enterprise UX | Finance UX | UI Design | UX Design
142

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 142
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.

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

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 120
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 | Enterprise UX | Healthcare UX | Service Design | UX Design
362

Clinical Worklist Dashboard

Clinical Worklist Dashboard

Redesigned a complex clinical worklist dashboard used by physicians to manage daily patient reports, dictation, and transcription workflows. Improved usability, reduced task completion times, and laid the foundation for future ADA-compliant updates.

  • Project Type Healthcare UX, Dashboard Design, Workflow Design, Accessibility (Pre-WCAG 2.1), Legacy Systems Redesign
  • My Role UX Designer (Dashboard Design, Workflow Optimization, Accessibility Improvements)
  • Tools Used Adobe Photoshop, Adobe Illustrator, Balsamiq, Axure RP
  • Duration Mar 2015 – Aug 2016
  • Company This project is protected by NDA.
LIKE THIS 362
VIEW PROJECT

Confidentiality Note:

This project is protected by an NDA. Specific client and company details have been omitted. The attached screenshot showcases a general overview of the interface I designed, with all identifying information removed.

This dashboard was a critical tool in a healthcare platform that enabled physicians to track, review, and manage patient reports across multiple workflows—ranging from transcription to electronic signing.

The legacy system was heavily used but visually dense, difficult to navigate, and lacked modern usability and accessibility standards. I led the redesign initiative to modernize the interface, improve efficiency, and align it with evolving UX principles for medical applications.

The Challenge

✘ Outdated and text-heavy interface overwhelming users.
✘ Difficult-to-locate tasks within complex workflow hierarchies.
✘ Limited accessibility for users with visual and cognitive impairments.
✘ No component consistency or design patterns in place.

The Goal

✔ Improve usability and reduce cognitive overload for physicians.
✔ Simplify search, sorting, and report management workflows.
✔ Design for better screen-reader readability and ADA compliance.
✔ Deliver a flexible, scalable component structure for future updates.

My UX Process & Approach

Discovery & Research
  • Conducted user interviews with medical staff to map pain points in report processing.
  • Analyzed real usage patterns and prioritized high-frequency tasks.
  • Audited the existing interface for visual hierarchy, interaction clarity, and accessibility.
Wireframing & Prototyping
  • Used Balsamiq and Axure RP to wireframe early versions of the dashboard.
  • Introduced tabbed navigation, action panels, and dynamic data sorting/filtering.
  • Mapped out focus states and screen reader labels in early mockups.
UI Design & Accessibility Improvements
  • Created clean UI layouts in Adobe Photoshop and Illustrator based on medical-grade visual principles.
  • Improved color contrast, type size, and interactive affordances.
  • Designed tooltip patterns and tab flow for easier keyboard navigation.
Collaboration & Testing
  • Worked closely with developers and QA to ensure fidelity of interaction patterns.
  • Gathered iterative feedback from physicians and transcriptionists.
  • Partnered with compliance advisors to prepare groundwork for full ADA accessibility rollout.

Final Outcome & Impact

✔ Reduced time to locate and act on patient records by ~35%.
✔ Increased accuracy of dictation status tracking across roles.
✔ Created a modular component library for future interface updates.
✔ Improved accessibility compliance scores on internal audits.

A glimpse into the redesigned Physician Worklist interface, showcasing task filters, quick actions, and structured data views. Sensitive data and branding have been removed to comply with NDA requirements.

Key Takeaways & Learnings

✔ Complex healthcare dashboards demand clear hierarchies and action prioritization.
✔ Early accessibility planning saves rework and supports wider user inclusivity.
✔ Designing for medical environments requires balancing speed, accuracy, and cognitive ease.

Content and Documentation | Marketing and Branding | UI Design
361

D-Infuser Campaign

D-Infuser Campaign

An innovative health-focused campaign blending design, storytelling, and strategy—D-Infuser introduced a Vitamin-D infused coffee concept to raise awareness of Vitamin-D deficiency in Canada. I led the creative vision, product branding, and cross-platform visuals to deliver a user-centered solution that was both educational and impactful.

  • Project Type Product Innovation, User-Centered Campaign, Health Awareness
  • My Role Creative Lead (Concept, Design, Marketing Strategy, Video Production)
  • Tools Used Adobe Illustrator, Photoshop, Premiere Pro, After Effects
  • Duration Academic Term Project (York University)
LIKE THIS 361
VIEW PROJECT

As part of the Business Marketing course at York University, I led the end-to-end development of “D-Infuser”—an innovative product and awareness campaign targeting Vitamin-D deficiency in Canada through a Starbucks coffee integration. This concept aimed to make wellness effortless by adding a tasteless, odorless Vitamin-D infusion into daily coffee consumption.

The Challenge

✘ Over 1.5 million Canadians suffer from Vitamin D deficiency, especially during winter.

✘ Public awareness about the condition was low, and traditional supplements lacked engagement.

✘ Needed a lifestyle-friendly product that could drive behavioral change through everyday habits.

The Goal

✔ Create a marketable, engaging, and user-friendly health product concept.

✔ Develop a cross-platform campaign with compelling storytelling, strong visuals, and educational value.

✔ Showcase how public health can be enhanced through design, brand integration, and user empathy.

My Approach

Concept & Research
  • Conducted research on Canadian health statistics, public behavior, and caffeine culture.
  • Identified Starbucks as a relatable brand for mass market health intervention.
Visual Storytelling & Design
  • Designed product packaging, print ads, outdoor visuals, and digital assets.
  • Developed a brand identity for “D-Infuser” with sun motifs to reinforce health and energy.
Video Production
  • Storyboarded and directed a 1-minute campaign video highlighting the product benefits.
  • Focused on emotional resonance and daily usability to boost adoption.
Marketing Strategy
  • Created a QR-code based app concept to track Vitamin-D intake and offer rewards.
  • Developed a promotional campaign with both free trials and awareness messaging.
Awareness Poster
Campaign Ad

Final Outcome & Impact

✔ Won high praise for innovation, design cohesion, and public impact potential.
✔ Created an engaging product campaign that resonated with diverse audiences.
✔ Demonstrated strong cross-functional skills—from design and branding to storytelling and education.

 

Key Takeaways & Learnings

✔ Design thinking can drive impactful health communication.
✔ Emotional storytelling paired with practical design increases product adoption.
✔ Creativity + Strategy = meaningful innovation.

Accessibility | Instructional Content | UX Design
512

ADA Compliance Documentation

ADA Compliance Documentation

Led the first accessibility initiative for the Phoenix Design System, reviving outdated components and aligning them with ADA compliance standards. Delivered a scalable accessibility documentation model for product teams and engineers.

  • Project Type Design System Accessibility, ADA & WCAG Compliance, UX Strategy, Documentation, Inclusive Enterprise Design
  • My Role UX Strategist (Accessibility Research, Documentation, Stakeholder Collaboration)
  • Tools Used Figma, InVision, Sketch, Phoenix Design System
  • Duration 3 Months
  • Company Bank of America
LIKE THIS 512
VIEW PROJECT

Confidentiality Note:

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

Following stakeholder feedback from multiple product teams, I initiated a cross-functional effort to address growing concerns around accessibility. The Phoenix Framework, our internal design system, had fallen out of compliance with ADA/WCAG standards due to prolonged lack of updates.

As the first UX lead to take ownership of accessibility documentation, I spearheaded a strategic accessibility upgrade of Phoenix Design System components to improve usability, meet legal standards, and future-proof the design system.

The Challenge

✘ Phoenix Framework components were outdated and lacked ADA/WCAG 2.1 compliance.
✘ No existing documentation or governance around accessibility best practices.
✘ Designers and developers had an inconsistent understanding of accessibility expectations.

The Goal

✔ Audit all Phoenix Framework components for accessibility gaps.
✔ Deliver ADA-compliant documentation with examples and usage guidelines.
✔ Equip teams with knowledge and tools to build inclusive, compliant products.

My UX Process & Approach

Research & Accessibility Auditing
  • Audited Phoenix Design System components using WCAG 2.1 AA standards.
  • Identified major issues with color contrast, keyboard navigation, screen reader labels, and focus indicators.
  • Benchmarked against modern enterprise accessibility practices.
Component Modernization & Feedback Integration
  • Prioritized fixes based on real-world user feedback from internal product teams.
  • Updated component specs and interaction states directly in Figma.
  • Initiated the first accessibility design patterns review for Phoenix Framework.
Documentation & Cross-Functional Alignment
  • Created an Accessibility Compliance Guide embedded within the Phoenix Figma library.
  • Annotated each component with accessibility usage notes, ARIA guidelines, and development-ready specs.
  • Held stakeholder sessions with devs, QA, and product managers to walk through risks and solutions.
  • Established an accessibility governance workflow for future component updates.

Final Outcome & Impact

✔ Modernized and documented 100+ Phoenix components to align with WCAG 2.1 AA standards.
✔ Reduced compliance gaps across teams, accelerating design and dev handoff with clarity.
✔ Enhanced usability for all users while meeting legal and ethical accessibility requirements.
✔ Sparked cross-functional support for ongoing accessibility governance.

Key Takeaways & Learnings

✔ Reviving a design system requires both technical auditing and cultural advocacy.
✔ Accessibility is a shared responsibility that starts with clear documentation and ownership.
✔ Aligning design and engineering teams through systemic change leads to lasting product impact.

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

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 262
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.

 

Accessibility | Design Systems | Enterprise UX | UI Design | UX Design
184

Design System Sync

Design System Sync

Led a cross-platform design system synchronization initiative using the Phoenix Framework to improve scalability, visual consistency, and handoff clarity across design and development teams.

  • Project Type Design System Audit & Scaling, UX Governance, Cross-Platform Consistency, Enterprise UX, Component Rationalization
  • My Role UX Lead (Research, Component Auditing, Collaboration)
  • Tools Used Figma, InVision, Sketch, Phoenix Design System
  • Duration 3 Months
  • Company Bank of America
LIKE THIS 184
VIEW PROJECT

Confidentiality Note:

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

This project focused on auditing and synchronizing core design components across different tools (Sketch, InVision, Figma) and environments to improve consistency, scalability, and design-to-dev collaboration. As UX Lead, I spearheaded a comprehensive system-level alignment initiative to future-proof the Phoenix Design System across teams and platforms.

The Challenge

✘ Design inconsistencies were emerging across platforms and environments due to fragmented tooling and undocumented changes.
✘ Component variants were duplicative, outdated, or out of sync, impacting efficiency and developer handoffs.
✘ The Phoenix Design System lacked governance processes for scale and cross-functional ownership.

The Goal

✔ Audit and synchronize components across platforms (Figma, InVision, Sketch, and live environments).
✔ Ensure system-wide alignment with business and engineering goals.
✔ Establish scalable, documented components that support rapid design and development workflows.

My UX Process & Approach

Research & Component Auditing
  • Conducted a full audit of design components across design libraries, live code, and internal tools.
  • Mapped inconsistencies in naming, spacing, color usage, and interactions.
  • Documented system gaps and areas of overlap to inform consolidation strategy.
Cross-Functional Collaboration
  • Facilitated workshops with developers, PMs, and designers to identify friction points and sync component usage.
  • Created a shared alignment map of component states, variants, and intended use cases.
  • Worked with QA to map visual differences between code and design artifacts.
System Integration & Governance
  • Updated and streamlined Phoenix Design System components in Figma, ensuring 1:1 parity with codebase versions.
  • Created documentation templates and usage guidelines to reduce future divergence.
  • Established governance rituals (reviews, audits, documentation standards) to maintain quality and consistency.

Final Outcome & Impact

✔ Reduced redundant components by 35%, improving design efficiency and library usability.
✔ Improved design-to-development parity, reducing UI implementation errors across teams.
✔ Enhanced cross-team collaboration by aligning vocabulary, expectations, and documentation.
✔ Established a scalable, maintainable design system that’s ready for future product expansion.

Key Takeaways & Learnings

✔ Even the best design systems degrade without governance and active collaboration.
✔ System-level thinking requires empathy for both designers and developers.
✔ Consistency isn’t just visual—it’s about creating trust and speed across teams.

See More

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