Case study

PatDat

PatDat helps healthcare staff document and retrieve

patient data quickly.

PatDat is a digital solution that
allows healthcare staffto document
and retrieve patient data quickly and
efficiently.

PatDat is a digital solution
that allows healthcare staffto document
and retrieve patient data quickly and efficiently.

End-to End App

5 Months

Tool: Figma

Solo project

End-to-End App

Jul - Nov 2025

Tool: Figma

Solo project

The problem:
During my internship in the healthcare sector, I noticed two recurring issues.

First, if a colleague was sick or unavailable, other staff had to search through paper files just to find basic information about a patient — which took valuable time.

Second, even in everyday situations, patient data wasn't quickly accessible. Staff had to dig through folders and paperwork instead of having the information ready at hand.

The goal:
Design an app and a responsive website that allow healthcare staff to document, store, and access patient records — making information easy to find for every team member, without wasting time.

The goal:
Design an app and a responsive website that allow healthcare staff to document, store, and access patient records — making information easy to find for every team member, without wasting time.

Research:
Since this was a practice project, I didn't want to take up healthcare staff's already limited time with interviews. Instead, I used AI to simulate conversations with healthcare workers, which gave me a useful starting point for understanding user needs.

In a real-world project, I would replace this with actual interviews — but for a first solo project, this approach let me move forward without disrupting people's work.

Key user needs I identified:

  • Digitalization of patient records

  • Ease of use for staff under time pressure

  • Fast, reliable operation

User journey map:

Design process:
I'll now walk through the design process for both the app and the responsive website — tablet and desktop — side by side.


For the app, I mapped out a user flow — since it follows a clear, linear sequence of steps. For the responsive website, I used a sitemap instead, which better reflects how users navigate between different pages and sections.

User flow:


Sitemap:

Sitemap:
…in contrast, there is a sitemap for the responsive website.

Usability study:
For the usability study, I gave 3 friends a simple task: log in, create a new patient, enter some data, save it, and log out. I also tested the flow myself.

The session revealed two clear pain points: participants didn't know where to tap to add a new note, and they struggled to find their way back to the homepage.

"I can not add a new note"

"How can I go back to the homepage…"

"How can I go back to the homepage…"

"I can not add a new note"

"How can I go back to

the homepage…"

"I can not add a new note"

Design improvements after usability study:

On mobile, the action to add a new patient was just a small icon — easy to miss. I replaced it with a larger, clearly labeled button. I also added a clearer way to navigate back to the homepage, addressing the confusion participants had during testing.

On desktop and tablet, I noticed users had trouble quickly identifying the current day in the calendar. I highlighted it in color to make it instantly recognizable.

From rough sketches to polished screens — here's how the design evolved at each stage.

  • Paper wireframe

  • Digital wireframe

  • Lo-fi prototype

  • Mockup

  • Hi-fi prototype

  • Paper wireframe

  • Digital wireframe

  • Lo-fi prototype

  • Mockup

  • Hi-fi prototype

  • Paper wireframe

  • Digital wireframe

  • Lo-fi prototype

  • Mockup

  • Hi-fi prototype

View prototype:

Conclusion:
As my first UI/UX project, this was both a learning and a design experience. I was studying theory through an online course while building the app and responsive website. Working alone meant I had to make all the decisions myself, including knowing when to stop iterating and consider the app or responsive website 'done'.

For my next project, I want to improve my understanding of layout and accessibility. Through this project, I realized that some clickable components had usability issues - they were either too small or too close to each other. I'm committed to applying accessibility best practices from the start in future projects.

Design desicions:
I chose turquoise because it's a color often associated with healthcare. The font was selected for its strong readability, which matters a lot when staff need to scan information quickly.