A mobile app to streamline student medical communication
Project type: End-to-End App & Branding
Industry: Health Care
Tools: Figma, Notion, Zoom, Miro
Duration: Q2 2023
Project Overview
Problem Statement
From my experience working in a school district, I observed inadequate health communication between families and staff, consequently impacting students' academic experiences.
Objective
Create end-to-end application to help improve student health communication in education settings between families, health staff and office staff.
Methodology
Conducted user interviews and competitive analysis to gain insights into user behavior, needs and pain points. The solution was tested in a usability test.
Solution
Healthhub is an app that streamlines communication between families and school staff. It offers private direct messaging, document uploads, and health resources.
Exploring Competitor Platforms
I conducted a comparative analysis of student health management systems to gain insights into competitors' strengths and weaknesses, as well as to identify trends and innovation opportunities in the market.
-
Electronic Health Record
-
Manages health forms, allergies, medications, illness/injury tracking
-
Order medical supplies
-
Limited integration
-
Access/record student's immunization and visits
-
Upload documents
-
Input medication info
-
Track all screenings and assessments
-
Record health visits
-
Note daily medication and allergy action plan
-
Mass health statistics
-
Upload documents
-
Note screening results
-
Manage student data and health information
-
Input medical alerts
-
Emergency contacts
-
Student demographics
-
Health assessments
Key Takeaways
Observed Features
-
Health office visit documentation
-
Allergy Information Management
-
Health Screening Documentation
-
Student Health Office Notes
-
Medication Alerts and Management
-
Immunization Records
Opportunities
-
Communication functionality gaps
-
Mobile compatibility limitations
-
​Absence of customizable features
-
Lack of parent portal
-
Limited health resources
-
Restricted user access
Getting to Know User Perspectives
User Survey
Recruited users that actively use student health platforms
Target Audience
Student families, school medical staff and school admin staff
Survey Objective
Understand users' needs, preferences, and challenges.
Observed Findings
Through user interviews with families, medical staff, and administrators, a communication gap was identified due to the use of multiple platforms, which can hinder effective communication.
.png)
Prefer application over website for health communication
.png)
Challenges communicating with relevant student health groups
Obstacles locating health forms and relevant resources
Creating User Profile
Profiles were crafted using insights from user surveys to empathize with their experiences, comprehend their goals, needs, and challenges, and integrate their perspective into the product's design.
How might we help the users?
-
Chose to prioritize developing a platform for families after user surveys indicated their greatest struggle lies in communicating with school staff about their student's health needs
-
Develop an application that enables families to communicate with school staff and integrates additional health features for added convenience.
Brainstorming Feature Ideas Based on User Perspective
Drawing from the common challenges and needs identified among users, Point of View (POVs) statements and How Might We (HMW) questions were developed to guide the development of solutions that address challenges effectively.
Family Communication POV:
Families struggle to communicate effectively with school staff about our student's health needs.
​
HMW Facilitate Communication:
How might we communicate student health needs with school staff for better support and collaboration?
Health Requirements POV:
Families often lack understanding on health requirements, leading to confusion and missed deadlines.
​
HMW Inform Health Requirements:
How might we educate families about the necessary health information and requirements?
Health Resources POV:
Families encounter difficulties accessing essential medical related documents and additional resources.
​
HMW Access Health Resources:
How might we help families locate and stay informed about necessary health documents, resources, and updates?
Features Ideas
Geolocation Integration
Geolocation integration provides users with a map view of nearby health clinic facilities based on their current location and the child's medical insurance. This feature simplifies the process of locating healthcare services, ensuring quick access for parents and timely care for their children.
Document Upload Portal
The document upload portal allows users to easily upload essential health documents like doctor notes, medical records and vaccination records for a specific student This streamlines document management, making it convenient for parents to access and share important health information.
Secure Messaging
The integrated messaging system facilitates real-time communication among parents, administrators, and healthcare providers. This feature promotes efficient collaboration and enables seamless communication regarding student health issues, and updates, enhancing overall coordination and service delivery.
A User-Centered School Health App for Families
After gathering insights from school staff, medical workers, and families, I prioritized developing an app specifically for families in a school setting. This decision was driven by their central role in managing their child's health and their significance within the school's healthcare processes.
By providing user-friendly tools like geolocation integration, document upload portals, and an integrated messaging system, parents are empowered to efficiently navigate healthcare services and stay informed about their child's well-being, ultimately improving the child's academic experience. This focus on families fosters a user-centered approach, leading to better coordination in the school's health services and benefiting the entire school community.
Application Navigation Framework
After selecting the features to incorporate into the mobile app, I delved into the user experience by mapping out how users would access these key features. By prioritizing these features for usability, I ensured their seamless integration into the app's overall structure. This strategic approach not only streamlined the user journey but also enabled a focused and efficient evaluation during testing, leading to enhanced usability and effectiveness of the app.
Navigating User Task Flows
After generating the mobile app map, the next step is to determine how users would access the new feature. Constructing a user task flow will help visualize and understand the user journey of accessing the new feature.
Finding Nearby Care
Find Care
-
Open app on device
-
Navigate dashboard screen
-
Select "Locate Care" from dashboard options
Select Nearby Care
-
Enter address where you need medical care
-
App will display icons representing nearby medical care facilities
View Clinic Info
-
Select clinic icon
-
View clinic address and additional information
-
Confirm insurance coverage
Sending Direct Message to Nurse
Access Inbox
-
Open app
-
Navigate navigation bar
-
Select Inbox icon
Compose Message
-
Select compose message icon on upper right
-
Select recipient
Send Message
-
Click lower box to begin typing message
-
Send message
Uploading Student Medical Document
Access Document
-
Open health app
-
Select documents icon from dashboard
Select Document
-
Choose document type from drop-down menu
-
input description
Upload Document
-
Confirm upload
-
Progress bar to view document status
Blueprints for the Digital Design
After developing the user task flows and site map to access the features, wireframes were created. This progression aimed to enhance the user experience by visually optimizing the interface and improving usability.
Low-Fidelity Wireframe
Dashboard & Finding Care
-
Dashboard features easy navigation icons for quick access to sections like Health Office Visits, Locate Care, Student Profile etc.
-
Direct health articles are displayed below the icons for convenient info access.
-
Selecting Locate Care brings up a screen with a search bar and map, enabling users to find care services easily and efficiently.
Student Health Profile
-
Families can easily view their student's profile, including an image and quick links for convenient navigation.
-
This includes access to medical immunization records and health office visit history for comprehensive health tracking.
-
A settings tab located at the top right of the profile allows users to access a dropdown menu directly on the same screen.
Direct Messaging
-
Direct Messaging screen includes a search bar for finding previous messages quickly.
-
Top right corner features a compose icon for initiating new messages or replies.
-
Messaging interface displays conversations and messages below, facilitating seamless communication.
Translating Brand Elements into High-Fidelity Wireframes
The platform's UI kit features a professional color scheme designed to inspire trust, reliability, and a sense of calmness. Blue hues are utilized to instill trust and calmness. White and grey tones are chosen to convey simplicity and sophistication, ensuring a sleek and professional aesthetic. Additionally, friendly illustrations are incorporated to boost approachability and foster a welcoming ambiance across the UI design.
After establishing the format in the low-fidelity wireframes and crafting the UI kit for the platform, I integrated everything to create the high-fidelity wireframes. These were then used to create a comprehensive prototype, connecting all screens to simulate the app's functionality. This thorough prototype allowed for usability testing to evaluate the effectiveness of the app flows and user interactions.
High-Fidelity Wireframe
Usability & Testing
Testing
I recruited 6 medical school staff to assess my initial prototype, evaluating task completion effectiveness and the overall user experience of the feature.
Feedback from these tests is crucial for guiding future design iterations. It validates current design decisions and informs future modifications, ultimately enhancing the overall user experience.
​
My main goals are:
​
-
Observe how users complete specific tasks.
-
Determine pain points users may experience.
-
Evaluate overall usability and efficiency.
-
Gather additional feedback on overall experience.
Results
4 out of 6 users completed the tasks independently and without confusion.
6 out of 6 users expressed enthusiasm for the new mobile app idea.
​
Participants provided feedback suggesting additional features for the live stream, such as a larger button with text on entry page to identify what arrow button means, simplifying dashboard view to quick links (moving Health articles to own page), contact search bar, and a more refined profile navigation.
Iterations and Enhancements
After conducting user task flow testing with 6 medical school staff members, I utilized their feedback to enhance the user experience. I implemented the following modifications based on their input to improve the usability of the features.
Edits on Entry Page
-
'Skip' font slightly darker font for better accessibility.
-
Added 'Next' on button to provide explicit guidance, reducing ambiguity and enhancing experience.
-
Added indicator dots aiding users in tracking progress and understanding their current position within a multi-step process.
Dashboard Reorganization
-
Added dashboard icons for quick access to frequently used features, minimizing navigation time and ensuring a streamlined experience.
-
Added separate page for Health Article access.
-
Featured profile image on the initial page, offering a personalized link to the user's profile.
Inbox Search & Position Title
-
Added search bar for quick contact access.
-
Incorporated job titles with contact names for instant context, enhancing communication through well-informed interactions.
Refined Profile Navigation
-
Streamlined profile navigation with visual icons for each link, making it more intuitive.
-
Improved visual focus by removing the grey background, drawing attention to icons and links.
-
Incorporated a notification icon within the visual icon to alert users of recent document uploads.
Final Interactive Prototype
Navigating Obstacles & Iteration
One key challenge was allocating enough time for testing my solution design. This meant diving deep into user interviews, crafting specific questions, and collaborating with Spotify artists and users.
I had to edit my designs multiple times to ensure a smooth and consistent integration of the new feature. This experience taught me that the design process isn't always linear; sometimes you need to go back and make adjustments. Iterating and coming up with new ideas is just a regular part of UX design.
Prospective Goals & Objectives
I would like to test my design further and identify features for improved user-friendliness. Since completing this project, Spotify introduced a "Jam" session feature, letting users join others' music sessions.
Exploring how this could be integrated or creating a dedicated tab for various collaborative music experiences on Spotify is an exciting idea. Sharing this concept with Spotify could also encourage more social opportunities on the platform.