Patient Portal App
A mobile app for healthcare workers to access patient information, manage appointments, and interact with healthcare providers.
OVERVIEW
Eastwood&Cleef, based in Tampa, Florida, asked me to design a mobile app for healthcare workers as a UX/UI designer. The app includes features like patient monitoring, sharing information among doctors and healthcare staff, getting real-time notifications about patient events, and more.
Because of strict non-disclosure rules and the HIPAA law in the medical field, I'll use fake names for patients, doctors, etc., and make some changes to parts of the app.
My role: UX / UI Design
Tools: Figma, Photoshop, Illustrator
Project date: 2023
Because of strict non-disclosure rules and the HIPAA law in the medical field, I'll use fake names for patients, doctors, etc., and make some changes to parts of the app.
My role: UX / UI Design
Tools: Figma, Photoshop, Illustrator
Project date: 2023
RESEARCH
Before we began designing, we needed to research the subject thoroughly and understand the needs of our audience. We did this by studying medical portals, articles, and videos.
We made a data collection board while researching business goals and user needs
After identifying user and business goals, we made a hypothesis about two types of users:
1. Doctors who are tech-savvy. They use technology in their work and communicate with patients through email, phone, and virtual consultations.
2. Doctors who find electronic work challenging, especially with user interfaces.
We planned to design the interface for both groups, but focused primarily on the second category, as solutions for them would also benefit the first group.
1. Doctors who are tech-savvy. They use technology in their work and communicate with patients through email, phone, and virtual consultations.
2. Doctors who find electronic work challenging, especially with user interfaces.
We planned to design the interface for both groups, but focused primarily on the second category, as solutions for them would also benefit the first group.
Main Persona
Secondary persona
Journey Map
PROTOTYPING
Before creating the prototypes, we developed a User Flow Map. After that, we designed Wireframe prototypes. We used the functional prototype of the web application as our main guide for understanding the structure.
User Flow Map of MVP
Group of Wireframes
VISUAL STYLE
Much of the visual design had already been established before I joined the project. We used colors and fonts from the design system. However, we also created some specific principles to ensure the app felt native to its platform.
Design principles board
MOCKUPS
This was my first time using the "Design System First" principle, where I created the design system before finalizing the layout. This approach helped with two main issues:
Ultimately, we used the UI patterns to assemble High-Fidelity prototypes.
- It allowed us to refine each component and its different states thoroughly.
- We could make changes or add new elements to the prototype more quickly if needed.
- There was no need to spend extra time developing components separately after the layout approval since everything was already prepared.
- It helped programmers focus better on developing components
Ultimately, we used the UI patterns to assemble High-Fidelity prototypes.