Top
- Sep - Dec 2024
- ROLE: Developer
- Tools: Expo/React Native, OpenAI GPT-4o Mini,
Canadian Drug product Database API, Node.js,
UI Kitten
Link to:
Project Overview
Medication adherence is a significant challenge, particularly for individuals with chronic conditions and cognitive impairments. Studies show that only 50% of prescribed medications are taken as directed, often due to misunderstanding and forgetfulness. To address this, Remedify was developed—an AI-powered medication reminder app that simplifies the process of tracking, understanding, and managing prescriptions.
Challenges
Medication Adherence & Engagement: Patients struggle with forgetfulness and misunderstanding, leading to poor adherence and low app engagement.
Complex Medical Data & AI Accuracy: Medical information is hard to understand, and AI-generated insights must be accurate and trustworthy.
Real-Time & Secure Data Handling: The app requires real-time updates from reliable sources, with strong API security and data protection.
Cross-Platform Performance: Needs to run smoothly on iOS, Android, and Web while handling large-scale data efficiently.
Caregiver & Patient Coordination: Caregivers need shared tracking and secure communication to assist patients effectively.
Complex Medical Data & AI Accuracy: Medical information is hard to understand, and AI-generated insights must be accurate and trustworthy.
Real-Time & Secure Data Handling: The app requires real-time updates from reliable sources, with strong API security and data protection.
Cross-Platform Performance: Needs to run smoothly on iOS, Android, and Web while handling large-scale data efficiently.
Caregiver & Patient Coordination: Caregivers need shared tracking and secure communication to assist patients effectively.
Solutions
Smart Medication Tracking: AI-powered reminders and scheduling help users stay on track and build habits.
AI Medication Library: Simplifies medical terms using AI and allows DIN scanning for easy entry.
Secure & Real-Time Data: Uses Health Canada’s database with Azure API, ensuring accuracy and encryption.
Optimized Performance: Built with React Native & Expo, featuring fast API calls and caching for smooth cross-platform use.
Caregiver Support: Shared tracking & smart notifications enable caregivers to monitor adherence easily.
AI Medication Library: Simplifies medical terms using AI and allows DIN scanning for easy entry.
Secure & Real-Time Data: Uses Health Canada’s database with Azure API, ensuring accuracy and encryption.
Optimized Performance: Built with React Native & Expo, featuring fast API calls and caching for smooth cross-platform use.
Caregiver Support: Shared tracking & smart notifications enable caregivers to monitor adherence easily.
Who Remedify is For
Polypharmacy
Remedify helps users
manage multiple
medications with clear
reminders, making
schedules simple and
health easier to control.
manage multiple
medications with clear
reminders, making
schedules simple and
health easier to control.
Cognitive impairments
Remedify’s smart reminders assist users with cognitive challenges, fostering confidence and routine in medication management.
User persona
Sitemap
User Flow Map
Lo-Fi/Hi-Fi Wireframe
STYLEGUIDE
Colours
HEX
#FF9825
Vivid Orange
Primary
Bold and energetic, grabs attention for important alerts like medication reminders.
HEX
#00a39b
Persian Green
Primary
A refreshing and balanced color that represents health and wellness.
HEX
#FDC26A
Soft Orange
Secondary
Warm and approachable, used for gentle prompts and background elements.
HEX
#BBD2DB
Pale Aqua
Secondary
Calm and soothing, evokes a sense of tranquility and reliability, helping users feel at ease.
HEX
#FBF1EA
Seashell
Tertiary
A soft, neutral tone that adds warmth and clarity.
Our app’s color palette is designed to be both vibrant and calming for user experience:
- Vivid Orange & Soft Orange: Add a lively and energetic touch, bringing a sense of positivity to the interface.
- Pale Aqua & Persian Green: Create a calming and reassuring atmosphere, helping users feel comfortable.
- Neutral Seashell: Provides simplicity and cleanliness, ensuring primary and secondary colors stand out without overwhelming the user.
Fonts
Why Poppins?
Poppins is a geometric sans-serif font, widely recognized for its clarity and modern aesthetic. Here’s why it was the perfect choice for our app:
- Friendly & Approachable: The rounded design of Poppins gives a warm and inviting feel, making the interface more engaging.
- Easy Readability: As a sans-serif font, it maintains high legibility across various screen sizes, ensuring a smooth reading experience.
- Accessibility for All Ages: Especially beneficial for elderly users, Poppins’ clear letterforms reduce strain and enhance text comprehension.
Logo
MoodBoard
Feature Highlight
AI-Powered Label Scanning
Easily scan your medication labels to set up reminders automatically, minimizing the steps you need to remember and simplifying the process.
- Organized medication schedules.
- Clear reminders to ensure adherence.
Medication Library
Medication Library allows users to review all their medications in one clear, organized space, making it easier to track prescriptions without confusion. With navigation and easy-to-read details, users can quickly access essential information such as dosage, frequency, duration, and side effects. By providing easy-to-understand medication details, the library empowers users to take control of their health. Whether managing multiple prescriptions or simply needing a quick reference, this feature ensures a seamless and informed medication experience.
Medication Library
How It Coded
Core Components
- 1. ArchiveModal
- A modal that asks users if they want to archive or delete a medication.
- Uses dynamic props (actionWord, description) to change text based on the medication’s state.
- Styled with a white background and rounded corners for clarity.
- Two buttons:Cancel (closes modal), Confirm (Archive or Delete)
- 2. MedButton
- Displays medication name, icon, and a button to archive or delete.
- Uses useState to manage modal visibility.
- Implements conditional styling for different medication states.
- 3. MedFolder
- Fetches and displays medications.
- Uses AsyncStorage to persist medication data.
- Implements tab switching between "Current Medications" and "Archived Medications."
- 4. InfoScreen
- Shows detailed medication information.
- Features a "View More" expandable description.
- Allows editing medication details via EditInfoScreen.
- 5. EditReminderScreen & EditInfoScreen
- Enable users to update dosage, reminders, and directions.
- Use Select and Datepicker for structured input.
Why Coded It this way
- Reusability → ArchiveModal is a reusable component that handles both archive & delete actions.
- Performance Optimization → Using AsyncStorage prevents unnecessary API calls.
- Better UX → Themed colors, proper spacing, and clear confirmation messages improve usability.
- State Management Simplicity → Used useState to manage modal visibility instead of complex state management.
Code Challenge/Solution
Handling Both Archive & Delete in One Modal
Challenge:
- The user needs to confirm two different actions (archiving & deleting) but creating separate modals would be inefficient.
Solution:
- Used dynamic props (actionWord, description) to make ArchiveModal flexible.
- If med.isArchive is true, the modal asks for deletion confirmation; otherwise, it asks for archiving confirmation.
- This reduces redundant code and ensures better maintainability.
Persisting Medications Using AsyncStorage
Challenge:
- The app should remember medications even after closing and reopening.
Solution:
- Used AsyncStorage to save medication data persistently.
- When the app loads, it retrieves stored medication data in useFocusEffect.
Managing Multiple Modals Efficiently
Challenge:
- A bottom sheet (showArchiveBottomModal) for selecting archive/delete.
- A confirmation modal (showArchiveModal) for user confirmation.
Solution:
- Used useState hooks for each modal
- js
- const [showArchiveBottomModal, setShowArchiveBottomModal] = useState(false); const [showArchiveModal, setShowArchiveModal] = useState(false);
- toggleArchiveBottomModal opens the bottom sheet first.
- setShowArchiveModal(true) opens the confirmation modal when the user clicks Archive/Delete.
Visual Story
Business Cards
FinalDesign
Blog
