top of page
Group 9437-2.png

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.

schooldoc.png
Focus_logo.png
School care.jpeg
powerschool-social-thumb.png
  • 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 

Brainstorming_edited.png

Recruited users that actively use student health platforms

Target Audience

Avatar 82
Avatar 103
Avatar 108

Student families, school medical staff and school admin staff

Survey Objective

Documents_edited.jpg

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.

Group 3 (2).png

prefer application over website for health communication

Group 1 (1).png

challenges communicating with relevant student health groups

Group 2.png

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 may 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 a Solution

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:

I'd like to explore ways to incorporate a direct messaging system that enables efficient communication with school administrators and healthcare providers, ensuring timely updates and coordination regarding child.

HMW Facilitate Family Communication:

How might we facilitate seamless communication between parents, administrators, and healthcare providers for timely and effective collaboration?

Feature Ideas:

- Integrated Messaging

- Document Commenting

- Notification System

- Resource Sharing

Health Documents POV:

As a parent juggling various responsibilities, I'd like to explore ways for families to upload and update child's health documents, ensuring they are easily accessible for school administrators and healthcare providers.

HMW Foster Family Health Awareness:

How might we streamline and simplify the process for parents to upload and manage essential health documents?

 

Feature Ideas:

- Mobile Document Upload Portal

- Document Needed Notification

Family Health Locator POV:

I'd like to explore ways to incorporate a tool that allows families to easily find and navigate nearby health facilities, ensuring quick access to families.

HMW Foster Family Health Engagement:

How might we empower parents to quickly locate and access nearby health clinic facilities for their child's needs (vaccinations, checkup, urgent care etc.)

 

Feature Ideas:

- Geolocation Integration

- Search and Filter Functionality

- Access to Nearby Clinic Flyers 

Features to Incorporate in Mobile App

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.

Integrated Messaging System 

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

Screen Shot 2024-03-16 at 7.51.42 AM.png

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

Screen Shot 2024-03-16 at 7.51.26 AM.png

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

Screen Shot 2024-03-16 at 7.51.59 AM.png

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.

Screen Shot 2024-01-11 at 9.56.58 AM.png

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

Group 9445.png

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.

Screen Shot 2024-01-13 at 2.35.52 PM.png
Screen Shot 2023-12-08 at 10_edited.jpg

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.

Screen Shot 2024-01-13 at 2.36.11 PM.png
Screen Shot 2023-12-08 at 10_edited_edit
Screen Shot 2024-01-13 at 2.36.29 PM.png
Screen Shot 2023-12-08 at 10_edited.jpg

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.

Screen Shot 2024-01-13 at 2.37.06 PM.png
Screen Shot 2023-12-08 at 10_edited_edit

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.

bottom of page