AI Healthcare Companion
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.
Why did I redesign it?
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.
I think the biggest question here is;
Why did I switch from Dark.mode to Light mode?
After doing more research, I made a deliberate shift from dark mode to light mode. This wasn’t just a visual preference, it was about designing for the user’s environment and emotional context.
Light mode is often better suited for healthcare products because:
It improves readability for patients and clinicians.
It aligns with existing medical systems, which primarily use light interfaces.
It reduces the emotional heaviness that dark interfaces can sometimes carry in already overwhelming health contexts.
This decision also reinforced a broader lesson for me: not all designs are user-facing in the same way. Some tools are patient-facing, while others are built for internal clinical use. Now, one of my first questions in any project is:
“Who’s using this, and in what environment?”
This mindset shift has guided me from simply crafting visuals to creating designs that respect both functionality and emotional impact.
Initial Design
My re-design
Key improvements
- Simplified Color Palette: The original version relied on 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 experience.
Mode Shift for Healthcare Contexts: I transitioned the interface from dark mode to light mode after reflecting on healthcare design standards and user needs. Light mode is often preferred in clinical or patient-facing tools because it improves readability, aligns with existing medical systems, and reduces the emotional heaviness that dark interfaces can convey—particularly in contexts that may already feel overwhelming.
Improved Readability: Adjusted 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: Ensured the redesign meets WCAG contrast requirements and maintains legibility across both light and dark variations.
Visual Cohesion: Established consistent component styles (cards, buttons, toggles) to create a sense of unity and polish across the entire 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.
Initial Project
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:
a. 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.
b. 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.