Project Background
Location: Toronto, ON
Timeline: 6 Weeks
Project Type: End to End Application Design
My Role: End to End User Experience and Interface Designer
Research Methods: Market Competitor Analysis, User Interviews, Affinity mapping
Usability Testing methods: Unmoderated, Remote
Tools: Canva, Maze, Typeform, Figma
Introduction
Embarking on a mission to simplify the management of recurring medical events, I designed a specialized healthcare app addressing challenges in tracking and remembering events like prescription medicines, recurring treatments, vaccinations, and more. The app offers recurring task creation and management, reminders, family member management and collaboration, etc. This case study delves into the concise design process, outlining user needs, app features, and key decisions that resulted in a simplified, yet comprehensive, healthcare solution.
Problem Statement
Remembering and keeping track of vaccinations, prescriptions, medical tests, dental appointments, and other recurring medical treatments can be challenging. This difficulty is amplified when a family member is responsible for managing this information for the entire family.
Research Goals
I aim to understand diverse user practices for tracking recurring medical events, document their pain points in organizing medical information, identify insights from competitors, and assess user satisfaction with existing solutions to find gaps in medical event tracking apps.
Project Scope
I took on the complete design process for this project, projecting a timeline of four weeks and dedicating approximately 80 hours of work. The primary emphasis was on crafting a Minimal Viable Product (MVP) design to effectively achieve the primary project objective.
Design Process
User Interviews
Competitor Analysis
Ideas exploration
Feature Set
Prototype
Usability Testing
Affinity Mapping
POVs & HMWs
User Personas
Site Map
Task Flows
Logo Creation
Brand Guide
Wireframes
UI Library
User Interviews
6 Participants Recruited.
Ages ranging from mid 20s to mid 50s.
All participants had engaged in recurring medical events in the past year for either themselves or their families.
Interview Questions
How do users currently track and manage medical appointments and treatments for themselves and their families?
What pain points and challenges do users encounter when remembering and organizing medical information?
How do family dynamics and responsibilities influence healthcare management within households?
What features and functionalities would users find most beneficial in a healthcare management app?
How do user reviews and feedback on existing healthcare apps reflect user expectations?
Affinity Mapping
Insights Uncovered
Users employ various manual and digital methods for tracking medical information.
Difficulties in organizing and finding information are common concerns.
Verbal communication within families is prevalent, but occasional forgetfulness is reported.
Users express frustration with regards to managing medical information for multiple family members.
Limitations in existing apps prompt users to seek more comprehensive solutions.
Consider features that cater to family needs, including separate pages, family member dropdowns, and shared calendars.
Prioritize an intuitive organization system that minimizes search efforts for users.
Incorporate communication tools within the app to enhance family collaboration.
Develop reminders not only for upcoming appointments but also for medication renewals and recurring medical events.
Implement features to aid memory and minimize stress due to mis recorded information.
Acknowledge users' preferences for independent setups and design the app to accommodate various user preferences.
Users look for an easy and super simple design to avoid any confusions.
Competitor Analysis
This proved to be a challenging task. I conducted research on the web, forums, and Facebook groups, collecting information about various apps from user interviews to understand the landscape. However, no single app dominated the market; instead, I encountered a variety of apps catering to different user needs. For my analysis, I chose to focus on these diverse apps, with Google Calendar emerging as the most frequently used indirect competitor.
Research Synthesis
The affinity maps brought clarity to recurring themes and identified critical pain points. These insights, distilled from the maps, facilitated the formulation of precise and empathetic POV statements, capturing the users' goals and struggles. Furthermore, the maps served as a springboard for generating HMW statements by framing the identified issues as opportunities for innovative solutions.
POVs
As a user who relies on hard copies, I need an app that enables seamless tracking of past and future medical events, eliminating the friction caused by forgetting essential documents.
As a user who communicates verbally within the family, I need a family-centric app that enhances communication and collaboration among family members for managing healthcare information.
As a user using multiple digital tools, I need an integrated solution that streamlines the use of Google Calendar, note-taking apps, and alarms, providing a centralized hub for medical reminder.
As a user who experienced stress due to mis recorded appointments, I need an app that aids memory, minimizes errors, and provides accurate reminders for medical events.
As a user looking for an intuitive organization system, I need an app that offers a simplified structure, minimizing search efforts and ensuring easy access to historical medical data.
HMWs
How might we improve the user experience for those who rely on hard copies and physical files by providing a more efficient and accessible solution?
How might we design a comprehensive family-centric app that accommodates various family setups and communication dynamics?
How might we integrate a reminder system that not only alerts users of upcoming appointments but also includes medication renewals and other medical events?
How might we assist users in recalling accurate appointment details, reducing stress related to mis recorded information?
How might we enhance the organization of digital tools to make it easier for users to locate specific medical events and information?
User Personas
The user interviews provided rich qualitative data, shedding light on individual behaviors, pain points, and expectations regarding healthcare management. The affinity mapping process allowed for the synthesis of these insights, revealing overarching themes and patterns. By distilling the collected information, distinct user personas were crafted, each personifying a unique set of background, behavior, goals, and pain points.
Feature Set
The competitive research enabled me to identify the strengths and limitations of existing solutions. Understanding user preferences and pain points through interviews allowed me to spot features that directly address real-world challenges faced by individuals managing recurring medical events. The user personas, played a pivotal role in shaping the user-centric aspects of the app, ensuring that the features align with the diverse user needs.
Site Map
The proposed site map for the healthcare app is designed with a user-centric approach, reflecting the identified needs and challenges from both the competitor analysis and user interviews as mentioned in the insights from these researches. The structure emphasizes simplicity, aligning with the insight that users value a straightforward and easy-to-understand interface.
Designed to reflect the prioritization of essential user features, this sitemap was crafted based on the understanding that users prefer a straightforward, efficient approach. There is a preference for a no-frills, easy, and quick experience, as overly complicated or feature-laden designs were likely to confuse and drive users away. The landing page defaults to showcasing upcoming tasks, with quick accessibility to family members' events and a history of missed events. Users can seamlessly create a new event from any of these pages.
Task Flows
Add a Family Member Flow: Introducing a family member is a foundational step for a family-centric healthcare app. It enables users to personalize tasks and medical events for each family member.
Uploading and linking Documents: This task flow focuses on the added functionality of the app – adding documents to the app and linking them to the relevant family member or event. It streamlines the process, ensuring users can easily upload documents, associate them with a family member, and categorize it according to event.
Adding Recurring Tasks: Recurring tasks are common in healthcare management. This flow enables users to efficiently set up tasks that repeat at regular intervals, aligning with the nature of many medical events.
Editing a Recurring Task: Users often need to modify existing tasks due to changes in schedules or other factors. This flow ensures a straightforward process for editing recurring tasks.
Delete a Recurring Task: Users should have the ability to remove tasks that are no longer relevant or necessary. This flow ensures that users can manage their task lists effectively.
Ideas
The journey to naming and branding the app was a thoughtful process, culminating in the name "Med Journal”. The name conveys the essence of a digital medical journal, aligning with the app's purpose of organizing and managing healthcare information. The color scheme of teal and lavender was chosen deliberately for their significance in the medical context. Teal represents trust, reliability, and calmness, while lavender is associated with wellness and tranquility. These colors collectively create a soothing and trustworthy visual identity, crucial for a healthcare app.
Logo Creation
The logo design process began with hand sketches, capturing various conceptualizations. After settling on the teal and lavender palette, I translated the chosen design into a high-fidelity logo using Figma, ensuring a visually appealing and meaningful representation of the Med Journal brand.
Lo-Fi Wireframes
For Med Journal's lo-fi wireframes, I drew from market analysis, the mood board, and task flows. Multiple screen versions were crafted, aiming for intuitive layouts that meshed with visual aesthetics. The iterative process prioritized user-friendly design, setting the stage for further development.
For the homepage/ landing page, I wanted to focus on the most important parts of the app. Creating new medical events, starring, sharing or marking them as complete. Also the user will have access to the main menu, their account, a search bar and a main navigation tab at the top where they can view their upcoming medical events, medical events according to family members, and any custom lists the users decided to make. They can also view calendar and sort their task from the bottom.
The Family member tab contains cards for each family member, clicking on these will take users to that particular members’ medical events. The user has the ability to add new members from here.
User will be able to tap individual events to see further details for the events, details like Event notes, categories, family member associated, custom list associated, time and date, recurring intervals and any documents uploaded. They will also be able to delete, edit, share and mark as complete the selected event from here.
Clicking on the create event button will bring user to this page where they can enter their relevant details, as little as just the event title to as much as including event details, family member, category, list, date and time, recurring interval, start and end times, and documents.
The users can view, add, manage and delete their documents either from the event itself or through the ‘my documents’ tab in the main menu of the app.
Brand Guide
Developing the brand guide for Med Journal involved a thorough exploration of colors, fonts, and visual elements to ensure a cohesive and engaging brand identity. Expanding on the primary colors of teal and lavender, I broadened the palette to include complementary shades, creating a harmonious color scheme reflecting the app's soothing and trustworthy nature. After extensive research on typography for medical apps, Sofia Pro emerged as the optimal choice for its clarity and modern aesthetic. The fonts and their sizing were carefully chosen to establish a clear and consistent typographic hierarchy. A mood board was curated to provide visual inspiration, aligning with the app's theme and contributing to a unified brand image.
Hi-Fi Wireframes
Moving from the initial lo-fi wireframes, I chose layouts that exhibited the best user-friendly and intuitive flow. Utilizing Figma, I incorporated the design principles outlined in the brand guide, integrating elements from the UI component library, including the logo, color palette, fonts, icons, input fields, buttons, and cards. This thoughtful process aimed to guarantee a seamless and visually unified representation of Med Journal's interface, adhering to the app's user-centered design principles.
UI Component Library
Creating Med Journal's UI component library involved consolidating essential elements like the logo, color palette, fonts guide, icons, input fields, buttons, and cards. I ensured visual consistency by aligning each component with the established brand identity. This comprehensive library serves as a foundational toolkit for maintaining a cohesive and engaging user interface throughout the app's design.
Usability Tests
Tester Demographics:
Number of Testers: 7
Age Range: 25 to 45
Task Flows Tested:
Create a new recurring medical event.
Edit an event.
Delete an event.
Complete an event.
Test Results
The usability tests showcased promising results, with nearly 90 percent direct success across all tested tasks, and a 100 percent when indirect success paths are included, demonstrating the app's effectiveness in guiding users through the desired actions. These positive outcomes underscore the user-friendly and intuitive design of the app, ensuring a smooth and effective experience for managing recurring medical events.
Check out the Interactive Prototype 🡒
