Role: UI/UX Designer
Timeframe: 10 weeks
Tools: Figma, Google docs, Teachable machine
After completing the initial design for this AI-powered healthcare companion (shown below), I took time to revisit the project with a fresh perspective-both visually and strategically.
Time Constraints: The original version was created under tight deadlines as part of a group project. While it met functional requirements, it lacked the visual polish I knew it could achieve.
Feedback: At Figma's Config this year, I had the amazing opportunity to speak with several designers who emphasised the importance of showcasing strong visual design.
Personal Growth: Since the initial project, I’ve gotten a better understanding of accessibility, visual hierarchy, and UI consistency and wanted the project to reflect that growth.
Simplified Color Palette: The original version had too many colors in the vitals section and across the UI, which could be visually overwhelming, especially for users managing chronic conditions. I introduced a more cohesive color system with a single, calming primary color to reduce distraction and improve the overall user experience..
Improved Readability: I refined spacing, padding, and visual groupings to ensure the interface is comfortable and accessible-especially for users who may be fatigued or under stress.
Accessibility Compliance: The redesign meets WCAG contrast requirements and improves overall legibility across light and dark modes.
Visual Cohesion: I established consistent component styles (cards, buttons, toggles) to bring a sense of visual unity across the experience.
While the original served its purpose, this redesign was an opportunity to elevate the product’s look and feel while reinforcing usability for real-world users.
A fully interactive Figma prototype showcasing user interactions, from vitals monitoring to tracking history and setting thresholds .
Overview
This project was developed as part of my Human-AI Interaction class at Drexel University. The AI Healthcare Companion is a conceptual design for an intelligent system aimed at improving chronic disease management and emergency response. This project highlights my approach to blending user-centered design principles with AI technologies to solve real-world healthcare challenges.
Problem Statement
Managing chronic or terminal conditions often requires navigating complex medication schedules, frequent doctor visits, and unexpected medical emergencies. Many patients struggle with independence due to these challenges, leading to a need for a supportive, intelligent system that empowers them and their caregivers.
Project Goals
My Design Process
1. Exploratory Research
To understand the challenges faced by chronic patients, we conducted comprehensive research involving:
• Stakeholder Analysis: Identified the primary users (patients, caregivers, healthcare providers) and their pain points.
• Patients often struggled with remembering medication schedules or managing sudden crises.
• Caregivers reported difficulty coordinating responses during emergencies.
• Technological Landscape: Examined existing solutions like wearable devices and healthcare apps, noting limitations such as poor usability and lack of integration.
• Key Insights:
• Real-time health monitoring could significantly reduce emergency response times.
• Predictive analytics and AI could improve proactive care, such as flagging anomalies before a crisis occurs.
2. Conceptual Design
We ideated several potential solutions to address the identified challenges, ultimately selecting the AI Healthcare Companion for its feasibility and impact.
• Core Features Identified:
• Wearable Integration: Devices like smartwatches or medical patches for continuous data collection.
• Emergency Escalation: Automatic alerts to caregivers or emergency responders with customizable thresholds.
• AI-Driven Scheduling: NLP-powered assistance for appointments and medication reminders.
• Visualizing the System:
• Developed initial system models to map data flows, user interactions, and AI integration points.
• Ensured ethical considerations, such as data privacy, transparency, and system reliability, were baked into the design from the start.
3. Concrete Design
Low-Fidelity Prototyping
• Sketched basic wireframes to outline user flows and critical touchpoints, including:
• A Vitals Dashboard displaying heart rate, blood pressure, and oxygen levels in real time.
• An Emergency Alert Panel with quick-access buttons for contacting caregivers or emergency services.
• Personalization Settings for users to adjust alert thresholds and notification preferences.
4.High-Fidelity Prototyping
• Designed interactive, polished interfaces in Figma, focusing on usability and accessibility:
• Real-Time Vitals Display: Used color-coded visuals to indicate normal (green) or critical (red) states, ensuring immediate clarity.
• Recent Alerts Section: Listed past and ongoing alerts with timestamps and recommended actions for caregivers.
• Emergency Response Mechanism: Integrated dual alert pathways via SMS and app notifications to ensure reliability.
• Added user-friendly features like one-click acknowledgment of false positives and snooze options for less urgent alerts.
AI Training & Integration
Model Training with Teachable Machine
• Built a basic AI model to classify heart rate data into “Normal” or “Critical” using labeled screenshots.
• Focused on ensuring the model was intuitive and easily adaptable to real-world scenarios.
Mapping AI Outputs to Interface Components
• Designed the system to translate AI classifications directly into user interface behaviors:
• Normal Vitals: Green status cards with no action needed.
• Critical Vitals: Red alerts prompting users to take immediate action, such as contacting a caregiver or emergency services
Ethical AI Implementation
• Implemented feedback loops for false positive reporting to improve AI accuracy.
• Ensured compliance with HIPAA and other data privacy standards to maintain user trust.
Evaluation & Feedback
• Conducted internal usability testing to refine the interface, focusing on:
• Clarity: Ensuring users could quickly understand the status of their vitals.
• Efficiency: Minimizing the number of steps needed to act on critical alerts.
• Accessibility: Designing for users with varying cognitive and physical abilities.
Key Features
• Real-Time Monitoring: Track vitals with alerts for critical thresholds.
• Customizable Alerts: Users can adjust thresholds and notification preferences.
• AI-Driven Insights: Predictive analytics to identify potential crises early.
• Accessible Interface: Designed for ease of use, even in high-stress situations.
Challenges
• Balancing simplicity with robust functionality in the interface.
• Addressing the potential for false alarms in critical scenarios.
• Ensuring ethical use and user trust through transparency and privacy safeguards.
Reflection & Lessons Learned
• Iterative Design: User feedback was integral to refining the system’s functionality and interface.
• Ethics in AI: Balancing user privacy and system transparency is critical in health-focused AI applications.
• Future Potential: Scaling this concept with larger datasets and real-world testing could make it a viable healthcare tool.
Next Steps
1. Expand the dataset for training the AI model to improve generalizability.
2. Test prototypes with real users for further refinement.
3. Integrate wearable health devices for seamless real-time monitoring.
Conclusion
The AI Healthcare Companion showcases my ability to apply human-computer interaction principles, user-centered design, and AI technologies to solve complex problems. This project not only addresses a critical need in healthcare but also demonstrates my commitment to creating impactful, ethical, and user-friendly solutions.
Acknowledgments: This project was a collaborative effort as part of my INFO 693 Human-AI Interaction class at Drexel University. I had the privilege of working with an amazing team: Marian Gasinu, Kamalesh Balan and Jay’llen Hathman. Their insights, skills, and dedication were instrumental in bringing this project to life.