Streamlined Patient Check-In & Health Assessment App

Timeline: January 1st - March 31, 2025

Project Prompt

Design an app and a responsive website that allow patients to check-in to their family doctor's office and answer initial health screening questions.

Project Requirements

Platform:
‍Mobile and web application
‍
Health Screening:
Patients must be able to answer initial health screening questions easily and quickly
‍
‍Daily Interaction and Engagement:
• Users can quickly check in upon arrival, filling out basic health screening questions.
• The app can remind users to complete their health screening questions or check in ahead of their appointment.

Research

1. Competitive Analysis: I analyzed various patient portal platforms that I have access to that provide patients with the ability to check-in, view medical records, and complete health screening forms.
2. Pain points Identified:

Complex Navigation - Many portal have unintuitive interfaces and too many options in menu
Limited Mobile Optimization - Not all platform are fully optimized for mobile devices, leading to an awkard or frustrating experience when filling out forms on smartphones or tablet
Long and tedious form - The check - in process often involves filling out long, repetitive forms that could be simplified or pre-filled based on user history.

3. How my app addresses these pain points

Simplified user flow
Clear Instructions
Mobile optimization

Planning & Architecture

In this phase, I focused on developing key elements to structure the user experience. This includes a sitemap to establish clear information hierarchy, a user flow to map out the step-by-step check-in process, and a storyboard to visually depict the user’s journey and emotional states during the check-in process.

User Flow

Sitemap

Storyboard

Design Process ( In Progress)

Design Focus
‍I focused on ensuring consistency in typography, colors, buttons, and other design elements. I used Auto Layout for responsiveness, enabling quicker design development for future web adaptation. Lastly, I ensured the core flow remained intuitive, easy to use, and focused on helping users complete check-ins with minimal friction.

Low Fidelity Wireframes

For this project, I followed a structured ideation process taught by Google's UX Design course. I began by creating multiple wireframe variations, exploring different layouts and interaction patterns. After generating several alternatives, I evaluated each element by starring the most effective solutions across different versions. This allowed me to make rationale-driven decisions for the low-fidelity wireframes, combining the strongest elements into a cohesive design that addresses the core user needs while maintaining simplicity and clarity.

High Fidelity Wireframes

Usability Study

Moderated usability test with 5 participants of varying ages, medical backgrounds, and familiarity with digital check-in tools.
‍Goal: To evaluate whether the current design flow feels intuitive and if users can complete key actions without confusion.
Tasks & Questions:

Located the upcoming appointment and point to it
Complete the check in for the upcoming appointment
Fill out the questionnaires
Navigate back to the home screen

Feedback & Observation:

Easy to complete each task and the flow is logical
Does not require too much typing, can complete the questionnaire very fast
After submitting the questionnaire, goes back to the home screen - unsure if the questionnaire is successfully submitted or not
There's no entry point to complete the questionnaire first before check in.

Second Iteration

Made design changes to address key concerns raised during usability testing.
‍Goal of the second iteration: Redesign the homepage and appointment flow to better support long-term app usage. Displaying everything on the home screen would lead to clutter and a poor user experience, especially if users had to scroll heavily through multiple upcoming and past visits.

Added a Navigation Bar - To avoid clutter and heavy scrolling on the home screen overtime.

Added a overlay for manage visit - New entry point for user who wants to complete the pre-visit form before check-in.

Final Prototype

Core feature of the app where it allows the user to check in to the upcoming appointment and then complete the health questionnaire.

This address the use case where the user wants to complete the questionnaire first and check in after.

Final Design Overview

The final design prioritizes a clean, action-focused home screen, a scalable appointment system with clear separation of upcoming and past visits, and a mobile-friendly bottom navigation bar. These decisions were made to ensure a smooth check-in experience that feels intuitive both for new users and long-term patients.