AI-powered medication reminder app
UI/UX Designer | September 2024 - December 2024
Team: A project manager, two other UI/UX designers, a graphic designer, three developers
Context
Problem
Only about 50% of prescribed medications are taken as directed by patients with chronic illnesses. Research identifies two key reasons: misunderstanding of medication instructions and forgetfulness.
Solution
Remedify is an AI-powered medication reminder app that bridges the gap in adherence, making health management easier and more efficient. Going beyond the capabilities of a standard pillbox, Remedify is designed for individuals facing cognitive challenges or managing multiple medications, where the risk of misdosing is high. With a strong focus on accessibility and adherence, the app offers a reminder and a comprehensive medication library to support users in staying on track with their health.
Competitive Analysis
While competing apps excel in accessibility with large fonts and minimal wording, there remains significant room for improvement.
Medication Input: Manual entry is tedious with too many fields and settings. Existing image recognition only identifies medication names.
Remedify can streamline this with AI-powered photo recognition integrated with a drug database to reduce user effort.
Medication Info: Existing apps link to external articles or videos, making information harder to access.
Remedify can improve by presenting details clearly within the app.
Styleguide
Color: The color palette of our app is designed to be both vibrant and calming. The Orange colors add a sense of warmth to the user experience, which is especially important for patient dealing with diseases while the Green and Blue color create a sense of calm and reassurance. Silver white adds simplicity and cleanliness to our design.
Typography: Omnes Cyrillic is used for the logo wordmark, offering a unique, friendly feel. Poppins is chosen for headings and buttons for its rounded, approachable look, while Public Sans is used for subheadings and body text to ensure readability.
UI/UX
1. Site Map & User Flow
All main features were outlined in a comprehensive site map, ensuring they are accessible from every page for seamless navigation.
An intuitive user flow was then designed to guide users effortlessly through the app's features and functionalities.
2. Wireframe
Based on the sitemap and user flow, the wireframe was created to ensure an intuitive and user-friendly experience. Key considerations included:
- Alignment with the target audience: individuals facing cognitive challenges or managing multiple medications.
- Intuitive design with prominent call-to-action buttons, such as 'Mark Take,' ensuring users can easily track their medications.
- Ensured all important buttons were sized appropriately for easy navigation.
3. Initial Hi-Fi
Applied the original color palette and icons to maintain brand consistency.
The team was unsure about the color palette after completing the initial Hi-Fi design, so color adjustments were experimented with, and feedback was gathered from a UI/UX design professional. User testing was also incorporated to refine the design.
4. Feedback & User Testing
Based on feedback from a professional and user testing results, the following major changes were implemented:
- As orange was perceived as a warning sign, green was used for action buttons.
- Organized the schedule view on the home page by using labels like "Breakfast," "Lunch," and "Dinner" instead of a full calendar.
- Redesigned the Med library information into a dashboard layout to avoid excessive scrolling and improve user navigation.
- Allowed users to create nicknames for long medication names for easier identification.
5. Final Hi-Fi
The final Hi-Fi design incorporates all adjustments based on feedback and user testing. These changes include refined color choices, a simplified schedule view, and a redesigned Med library dashboard to improve user navigation. Additionally, dark mode was introduced with carefully adjusted colors to ensure better contrast and readability in low-light environments.
Frontend Developing
Marketing
Marketing Landing Page
The marketing landing page highlights what Remedify is and how it helps users, using clear, audience-focused language. A memorable banner features a bold heading, subheading, and a hero image showcasing the app interface. A prominent CTA button encourages users to take action, ensuring a seamless and engaging experience.
On Instagram, diverse content types were created to attract and engage the audience. These include features highlighting Remedify's benefits, educational posts with medication practice statistics, and team introductions to build trust and connection.
Challenges
Although the team was on a tight timeline and the development team already needed to start coding, the initial high-fidelity design and color palette had not been confirmed by the design team. The UX/UI design team had meetings to clarify design decisions and discuss necessary adjustments. Recognizing the time constraints, the timeline was reassessed, key redesigns were prioritized, and coordination with the developers ensured that achievable changes were made within the deadline. By restructuring the workflow and improving communication, the necessary redesigns were completed in time for the final showcase.
What I learned
- Effective communication when collaborating in a large, cross-functional team with diverse roles.
- The importance of organizing smaller team discussions when needed, staying flexible, and addressing issues early in the process
- The value of competitive analysis to understand industry standards and identify areas for improvement.
- How to translate ideas into audience-centered language for impactful marketing.
What's next for Remedify?
- Introducing a refill reminder to help users stay on top of medication refills.
- Implementing medication conflict alerts to ensure safe usage of multiple prescriptions.
- Enhancing accessibility with features like language options and adjustable font sizes.