Context

• American EMR is a software solution that addresses common challenges in current electronic medical records (EMR) softwares such as: outdated designs, limited features, and poor usability. This project aimed to create an intuitive, all-in-one patient app to improve practice management and patient care.

Overview

• Timeline: 1 week
• My Role: UX/UI Designer
• Tools Used: Figma
• Objective: Design an easy to navigate patient portal app.

Problem Statement

• Patients struggle with complex healthcare applications that lack an all-in-one solution for essential features such as appointment scheduling, medication reminders, payment processing, and medical records access. This leads to frustration and inefficiency in managing their healthcare, highlighting the need for an intuitive patient portal that simplifies and centralizes these features.

Goals

• • Simplify navigation
• • Enhance accessiblity for all users.
• • Create an intuitive, user friendly patient app.

Design Process

Visual Design

Branding

• Primary Color: Blue, chosen to evoke calmness, trust, and serenity, aligning with the app's healthcare focus.
• Secondary Color: Black, used sparingly for contrast and emphasis.
• Bankground & Cards: Light gray used for the background and white for cards, ensuring a clean and modern aesthetic.
• Typrography: Montserrat, sans-serif font for selected for its readability and contemporary aesthetic.

Prototyping and Testing

1. Highlights Section


Quick Highlights Section
After completing the home dashboard, half of the screen was still unused space and I decided to add a Quick Highlights section. This feature displays key patient information, such as medication reminders, upcoming appointments, and missed payments, allowing users to easily view and access important details at a glance.

Quick Highlights Version 1
In the first iteration, I designed widget-style cards with black titles and icons for visual recognition. To maintain consistency with the dashboard, I integrated the arrows and added a "details" label, indicating that the cards were clickable for more information.

Quick Highlights Version 2
After reviewing the first version, user feedback indicated the cards was too cluttered. To simplify, I removed the icons and "details" text, as the arrows already indicated clickability. I kept only the arrows, increasing their size to maintain continuity with the dashboard and improve visibility. With this iteration I aimed to allow users to quickly access important information without distractions.

Quick Highlights Version 3
However, after re-evaluating version 2 made the cards indistinquishable at a glance, this was a problem since users should be able to quickly view this information. I reintroduced the icons to maintain the design continuity from the dashboard while excluding the "details" text and this helped balance the visual load.

2. Back Arrow in pages


• Back Arrow in Subpages
• During user testing, I found that users struggled to navigate back to the previous page from the dashboard. I had designed thinking the home icon in the menu was sufficient but it wasn't intuitive. To address this pain point, I added back arrows at the top of each page, ensuring consistency with the dashboard’s arrow theme and providing users with a clear way return to the previous page.

3. Sticky Menu


The early iteration limited the menu to three icons. However, through user testing I discovered patients wanted more options for seamless navigation for frequent access to important info.
On the final design I added Medical Records and Notifications to the menu, removed the text under the icons to reduce clutter, and opted for filled icons to enhance visibility.

Figma Prototype

• To further showcase the design's functionality and flow, I’ve embedded the interactive prototype from Figma.

Highlights

Login

Understanding that patients may not be tech saavy, I kept the design minimal to ensure accessiblility for all patients. With a prominent CTA button, carefully colored and sized text, I designed an easy and frictionless login experience.

1. Login Page

Dashboard

Patients need an intuitive dashboard, so I choose a list layout with icons for easy identification. User feedback led to the addition of arrows to indicate clickable items, and a “highlights” section below displaying quick information like medication reminders and missed payments in a widget-style layout.

2. Dashboard

Appointments

This page features a toggle to switch between appointment types, with active and inactive states for easy identification. Underneath, each card displays details like doctor name, clinic, timing, and includes an underlined address link and a prominent button to book new appointments. This design enables users with quick and easy navigation to view and make changes to their appointment details.

3. Appointments

Bookings

Patients want an efficient way to browse doctors and book appointments. The bookings page lets them search and filter doctors or clinics, and find available providers with the prominent blue colored call to action “book” button.

4. Bookings

Prescriptions

Patients needed a simple solution to view active prescriptions and access refills. The secondary text under the header easily display the number of active prescriptions. I designed cards with prescription details (name, doctor notes, prescribing doctor). A blue refill CTA button provides easy access for users to manage their prescriptions.

5. Prescriptions

Medical Records

Alternative patient apps often separate patient records like lab results, health history, etc, making them hard to access. Facing this problem myself, I designed a centralized Medical Records page that consolidates all medical information in one place. It includes a patient card, live vitals through smart device integration, card for previous visit details, and a menu list for other records. This design ensures users can easily view and manage their health information.

6. Medical Records

Billing

The Billing page offers a clear, organized layout, allowing users to easily manage and view their billing information, past invoices, and missed payments.

7. Billing

Messages & Notifications

This page incorporates the toggle bar from the appointments page for easy navigation between messages and notifications. A search bar allows users to quickly find specific messages, while the notifications section highlights important information for quick access, ensuring users stay informed without clutter.

7. Messages & Notifications

Reflection

Challenges I Faced:

• Exploring Figma’s tools was exciting for my first project. A key challenge was not setting up an asset library, which would have streamlined the process and ensured design consistency. Balancing user needs with stakeholder constraints was also challenging. For instance, the development team raised feasibility issues for the appointment booking feature due to complexity or time constraints. Similarly, my initial payment UI concept faced challenges involving insurance coverage intricacies. These experiences emphasized the importance of early stakeholder collaboration to align scope and feasibility, saving time and effort.

What I Learned:

• I learned the importance of creating reusable design assets, such as components, variants, and instances, to streamline workflows and maintain consistency.
• I recognized how critical domain knowledge is to creating practical and user-centered solutions.
• This project reinforced the need to remain open to iteration and feedback, recognizing that good design is an ongoing process of refinement.

Next Steps:

• Moving forward, I plan to adopt asset libraries from the start, refine typography systems early on, and deepen my domain knowledge for better-informed designs. I aim to embrace continuous improvement, staying flexible and open to feedback to create better user experiences.