Annie Portfolio - Digital UI/UX Designer

Available for work

Say hello, let's talk

Available for work

Say hello, let's talk

About me

Resumé • CV

Case Study

Playground

Framer template

Contact

InfinityPath
Edoctor

InfinityPath Edoctor

InfinityPath
Edoctor

Web Dashboard Design Project

Application

Smart Device / IoT

AI Integration

Plant Care App

UI Design

User Research

User-Centered

Overview

InfinityPath eDoctor is a clinical web platform developed for doctors, nurses, and lab staff to manage medical records, track test results, and streamline communication in a healthcare setting.

The platform supports infinityPATH’s core operations, aiming to improve efficiency, speed, and accuracy in diagnostic workflows.

As the Digital Product Designer, I designed a cross-device dashboard to simplify complex medical processes, focusing on usability, clarity, and task efficiency for daily clinical use.

InfinityPath eDoctor is a clinical web platform developed for doctors, nurses, and lab staff to manage medical records, track test results, and streamline communication in a healthcare setting.

The platform supports infinityPATH’s core operations, aiming to improve efficiency, speed, and accuracy in diagnostic workflows.

As the Digital Product Designer, I designed a cross-device dashboard to simplify complex medical processes, focusing on usability, clarity, and task efficiency for daily clinical use.

Year

2023

Category

Healthcare, Productivity

Role

Digital Product Designer

My Role & Responsibilities

🔹 My Role

Digital Product Designer

Interface design, UX research, experience optimization

🔹 Responsibilities

✅ Develop dashboard & UX flow

✅ Design UI from wireframe to hi-fidelity prototype

✅ Optimize UX for doctors, nurses, medical professionals

✅ Collaborate with CTO to develop products

🔹 Collaboration

CTO (propose initial wireframe)

Developers (implement UI/UX into the system)

Doctors & Medical Staff (key users, provide feedback)

🔹 Tools Used

Figma (Wireframe, Prototype, UI Design)

Jira (Task management and documentation)

UX FRAMEWORK

🔷 Double Diamond Framework

A proven model for approaching complex UX problems through 4 key phases:

✦ Discover: Understand the problem

✦ Define: Narrow down core issues

✦ Develop: Design possible solutions

✦ Deliver: Final execution and validation

TARGET AUDIENCE

In the discovery phase, we identified the target users through stakeholder discussions and expert interviews with medical staff. Since eDoctor is an internal clinical system, we used Role-Based Persona Mapping and Workflow Analysis to understand their core needs.

Methods used:

👥 Stakeholder-Assisted User Profiling

👨‍⚕️ Doctor (General Practitioner / Specialist)

Goals

Quickly access patient records and medical history

View and interpret test results accurately

Make informed clinical decisions with minimal delay

Tasks

Search for and review lab reports

Request new tests or follow-up diagnostics

Communicate with lab staff or request corrections

Track status of pending results

Frustrations

Difficulties finding past reports due to poor filters

Lack of clear progress/status indicators

No notifications when new results are ready

No unified dashboard view for multiple patients

👩‍⚕️ Nurse (Clinical or Support Nurse)

Goals

Support doctors in managing patient care smoothly

Monitor and coordinate patient test schedules

Reduce time spent on administrative follow-up

Tasks

Assist in submitting test requests

Follow up on pending lab results

Notify patients or update records based on test outcomes

Prepare patient files for consultation

Needs

A simplified interface for multi-tasking

Quick view of which patients need follow-up

Real-time alerts for completed reports or delayed tests

Visibility into what’s been done vs. what’s pending

👩‍⚕️ Nurse (Clinical or Support Nurse)

Daily Actions

Receive and process test requests

Upload test results and attach relevant documents/images

Handle test discrepancies or errors

Update status of reports in the system

Pain Points

Incomplete or unclear test request forms

No structured way to report test discrepancies

Manual coordination with doctors for corrections

Workflow interruptions due to missing information

Tools

Discrepancy ticket management

Report upload module with annotation

Dashboard showing test queue and report status

Communication log or comments from doctors

Key insights gathered:

➤ Medical professionals have limited time and need fast, reliable tools

➤ Existing systems are either too complex or not tailored to their actual tasks

➤ Reporting delays affect clinical decision-making and patient trust

➤ Most tools lack history tracking and real-time collaboration features

✸ Primary Audience

Doctors, nurses, and lab professionals who need fast access to patient data, test results, and clear lab communication. Their work is time-sensitive, so they rely on tools that are fast, intuitive, and support accurate decision-making.

✸ Secondary Audience

Clinic and lab admins who manage operations, handle report discrepancies, and maintain interdepartmental coordination. Their focus is on visibility, ticket tracking, and workflow efficiency.

Realistic User Feedback

Detailed Insights

🧠 Cognitive Load & Workflow Disruption

Doctors and lab staff often feel overwhelmed by the interface. Key information is buried, spread across multiple tabs, or not surfaced at the right time. This disrupts clinical workflows and leads to frustration.
→ Users want clarity, not clutter.

🔔 Lack of Real-Time Notifications

There is no smart alert system to notify users when new reports are ready, referrals are completed, or test discrepancies are flagged. This causes delays and increases back-and-forth communication.

→ Users want timely, actionable alerts.

There is no smart alert system to notify users when new reports are ready, referrals are completed, or test discrepancies are flagged. This causes delays and increases back-and-forth communication.

→ Users want timely, actionable alerts.

🧾 Error Management & Task Ownership

Users have no structured way to handle incorrect or incomplete test reports. Without a ticket or discrepancy system, follow-up actions are done manually, leading to inefficiency and errors.

→ Users want a clear system to track, escalate, and resolve issues.

Users have no structured way to handle incorrect or incomplete test reports. Without a ticket or discrepancy system, follow-up actions are done manually, leading to inefficiency and errors.

→ Users want a clear system to track, escalate, and resolve issues.

📈 Missing Patient History & Status Overview

There’s no centralized view to monitor patient history, progress, or report status in one glance. This results in repeated actions and reduced decision-making efficiency.

→ Users want visibility and control over each patient journey.

There’s no centralized view to monitor patient history, progress, or report status in one glance. This results in repeated actions and reduced decision-making efficiency.

→ Users want visibility and control over each patient journey.

Problem Statement – How was it defined?

Doctors and healthcare professionals often work under time pressure and deal with multiple patients, tests, and reports daily. However, many internal systems they use are fragmented, unintuitive, or not built around their real workflows.

A key insight I received from a user was:
“I just want to open one place and know everything I need quickly, without searching through tabs.”

This revealed a critical usability gap in the current clinical systems:

Medical staff need clarity, not complexity.
They want information surfaced at the right time, not buried in layers.
Delays in reviewing or updating reports can directly affect diagnosis and patient trust.

This reveals a trust problem — users expect technology to guarantee success. When results don’t match expectations, frustration arises.

“I just want to open one place and know everything I need quickly, without searching through tabs.”

As a designer, I had to solve for:

Simplifying information access for doctors across patient reports, lab results, and appointments
Reducing mental load by streamlining navigation and prioritizing key actions
Designing with empathy for real-world clinical stress and urgency

Frameworks & Methods Used:

Jobs To Be Done (JTBD) (aligning UI with what doctors are trying to accomplish)

Collaborative Iterative Design Process

The project began with a raw, unpolished dashboard concept presented by the client, a basic web app framework without defined UX or visual structure. This early prototype served more as a directional sketch than a usable interface.

From there, I received hand-drawn drafts directly from the CTO, outlining his vision for how the product should work. These sketches reflected core ideas but lacked design logic, consistency, and clarity in interaction.

Through direct discussions with the CTO, we co-developed feature flows, restructured priorities, and aligned on a functional hierarchy.

I then translated those sketches into high-fidelity UI/UX designs. Each iteration was reviewed by the CTO, who provided feedback directly on the product screens. Together, we refined the design until it was production-ready.

Frameworks & Methods Used

➤ Co-Creation & Collaborative Design: Working closely with stakeholders

➤ Rapid Prototyping: Quick iterations for early validation

➤ Feedback Loops: Embedded review cycles with CTO after each stage

➤ Low-to-High Fidelity Workflow: Sketch → Wireframe → Final UI

Problem Statement – How was it defined?

A key insight I received from a user was:

This reveals a trust problem — users expect technology to guarantee success. When results don’t match expectations, frustration arises.

“I just want to open one place and know everything I need quickly, without searching through tabs.”

As a designer, I had to solve for:

Simplifying information access for doctors across patient reports, lab results, and appointments
Reducing mental load by streamlining navigation and prioritizing key actions
Designing with empathy for real-world clinical stress and urgency

Frameworks & Methods Used:

Jobs To Be Done (JTBD) (aligning UI with what doctors are trying to accomplish)

Collaborative Iterative Design Process

Through direct discussions with the CTO, we co-developed feature flows, restructured priorities, and aligned on a functional hierarchy.

Frameworks & Methods Used

➤ Co-Creation & Collaborative Design: Working closely with stakeholders

➤ Rapid Prototyping: Quick iterations for early validation

➤ Feedback Loops: Embedded review cycles with CTO after each stage

➤ Low-to-High Fidelity Workflow: Sketch → Wireframe → Final UI

Key Features

The eDoctor platform empowers doctors, nurses, and lab professionals to manage patient records, test reports, and diagnostics efficiently. Through real-time visibility, streamlined workflows, and smart communication tools, the app turns complex medical operations into clear, reliable actions.

🔎 Advanced Patient Record Search

Users can filter patient data by report status, assigned doctor, or test date. Smart search suggestions reduce time spent finding the right record.
→ Fast access to critical information in clinical settings.

🔔 Real-Time Notifications & Alerts

Doctors receive instant updates when new reports are ready or when referrals are completed. Urgent cases can be flagged for immediate attention.
→ Stay informed, react faster.

📝 Discrepancy Ticket Management

A dedicated system to report, track, and resolve errors or inconsistencies in test results. Presented in a Kanban-style layout for clarity.
→ Better accountability, fewer mistakes.

📊 Patient History & Report Timeline

Each patient’s test history is shown in chronological order with completion status. Doctors can quickly review past results, saving time in consultations.
→ Contextual decision-making with one glance.

The Solutions

Problem 1: Slow and Inefficient Search for Patient Records & Reports

🔹 Issue:

The platform lacked powerful filtering and smart search functions, making it time-consuming for doctors to locate specific patient records or test results.

✅ Solution:

Introduced advanced filters by date range, assigned doctor, and report status

Implemented auto-suggest search to help users find relevant information faster and with fewer clicks

Problem 2: Poor Visibility into Report Progress

🔹 Issue:

Users found it difficult to track the current status of medical reports, often leading to delays and missed follow-ups.

✅ Solution:

Added progress indicators with percentage completion and color-coded statuses for quick visual recognition

Integrated real-time notifications to alert doctors when new reports are ready or require urgent attention

Problem 3: Lack of Efficient Ticket Management for Report Errors

🔹 Issue:

Doctors needed a streamlined way to flag issues, request report corrections, or follow up on test discrepancies, but the system lacked any structured ticketing workflow.

✅ Solution:

Designed a discrepancy ticket system to log, track, and prioritize report issues

Introduced a user friendly-style interface to help users visualize, assign, and manage ticket status efficiently

Final Outcome & Reflection

As the Digital Product Designer, I collaborated closely with the CTO to design and complete the core product features and overall system structure. From early-stage concept discussions to final UI/UX delivery, I translated the CTO’s vision into a scalable, developer-ready interface.

While I didn’t directly conduct real-user testing or gather UX metrics due to the project’s internal nature, success was measured through:

On-time delivery aligned with product goals

Iterative feedback from the CTO and key stakeholders

Positive internal responses from target users (doctors, lab staff)

The developers continued product implementation based on the finalized design system, UX flow, and responsive layout I created. The project was considered a success internally, both functionally and visually, receiving direct approval from the CTO and leadership.