Primary Care Center in the patient’s fingers

Healthcare Digitalization is a reality

About the project

When I study new things, I love to put them into practice, and this project was about that. Besides that, it conciliated two of my work areas: healthcare and design, and this was amazing and so pleasant.

This project marked the culmination of my comprehensive UX and UI design course, where I executed the full design process—from initial research and discovery to final prototyping and testing. As a healthcare professional, I infused real-world insights into every stage, combining creativity with effective problem-solving. The project was both challenging and exciting, offering a unique opportunity to bring innovative digital healthcare solutions to the industry.

The project’s scope encompassed:

discovery phase;
brand identity creation;
Proto-personas;
sitemap;
user flow;
wireframes;
style guide;
prototyping.

Discovery phase

I initiated the project with a research phase, analyzing both public healthcare services and comparable private institutions. This analysis helped identify key opportunities to improve patient engagement and streamline processes. I employed methodologies like MoSCoW prioritization, the 5 Whys technique, and quick benchmarking. This way, I shaped a clear product vision centered on user-centric design principles.

Key answers for the future process:

For who? Focused on the diverse demographic served by primary care centers, with special emphasis on the elderly, pregnant women, and young children (INE – Statistics Portugal).
What problem? The goal was to streamline and automate routine processes, reducing wait times and administrative burdens for both patients and healthcare providers.
What are the key features and functionalities?

– Appointment Scheduling and Management: Efficiently book, reschedule and manage appointments.
– Patient Admission: Streamline the check-in process and collect essential patient information.
– Personal Health Records: Provide a secure platform for patients to access and manage their health data.
– Health Information: Offer a knowledge base of health tips and guidelines.

Visual Identity concept

When developing the brand identity for this healthcare app, Centro+Saúde (translated as “More Health Center”), I prioritized a short and meaningful name. After researching other healthcare app names, I concluded that the brand should reflect the core value of health.

Key design elements:

Color Palette: I incorporated Portugal’s national colors, green and yellow, to establish a strong connection with the local audience. Additionally, these colors were carefully selected to ensure optimal accessibility and contrast within the app’s interface.
The plus symbol as hearts: this iconic symbol serves multiple purposes. It not only represents the concept of addition or enhancement but also symbolizes the universal symbol for healthcare – the medical cross. Upon closer inspection, two hearts emerge, one yellow and one green, representing the love and care that is central to the institution’s mission.
Hands: as a healthcare institution staffed by dedicated professionals, hands are a powerful visual metaphor. They signify the act of caring, healing, and providing support to patients.

Proto-personas, representing the user

Personas are a crucial tool for understanding our target users. By developing detailed personas, we can gain insights into their needs, behaviors, and motivations. This was a fun part for me because I love to imagine stories.

For this project, I created two profiles: Domingos Pires and Francisca Abreu.

Domingos, a retired lawyer, aims to simplify access to medical appointments and exams, as well as receive health tips. He is described as analytical, hardworking, and extroverted, with hobbies including technical reading, beach walks, and golf.
Francisca, a preschool teacher, seeks to keep track of her family’s medical appointments and receive appointment reminders. She is characterized as creative, communicative, and sensitive, with interests in DIY projects and socializing with friends.

Sitemap

At this stage, I began constructing the app’s information structure, drawing on the information architecture principles.

Some themes had pain points where they should be located in the app, such as the separation of “schedule an appointment” and “admission for an appointment”. Those were only solved after more research about the service’s workflow.

Paying attention to the users’ needs, Domingos and Francisca, I kept in mind the importance of the calendar, admissions, and scheduled appointments. I didn´t forget Domingos’s worries about knowing more about health habits, and Francisca has to manage the primary heathcare of 2 kids.

This site navigation guide outlines a user-friendly structure for the healthcare services app. Key sections include:

Admissions – streamlined onboarding process for new patients;
Appointments – easy scheduling for consultations and follow-ups;
Personal information – secure access to medical records and personal data;
Health guide: a comprehensive resource for health-related information and tips;
Telehealth: remote consultations for convenient care;
Calender – personalized appointment calendars and reminders;
Family management – Information and healthcare management of other related family members.
Useful links – quick access to external resources and partner organizations;

User flow

This step was crucial to ensure that I understood the entire app picture in more detail.

The user flow for a medical appointment scheduling system showed the user steps through the different processes. It delves into the patient journey from appointment request to confirmation, including ticket issuance for confirmed and missed appointments and error handling for various scenarios.

This user-centered design ensures a seamless and intuitive experience for patients.

Scheduling an Appointment:
– If the appointment is confirmed, the user can generate a ticket.
– If the appointment is not confirmed, the user receives an error message stating.
Medical Appointment:
– If the appointment is confirmed, the user can generate a ticket.
– If the appointment is not confirmed, the user receives an error message stating.
Open Appointment:
– If a ticket is available, the user can generate it.
– If there are no available tickets for the day, the user receives an error message stating.

Wireframing

I meticulously crafted high-fidelity wireframes to refine the user interface and ensure a seamless user experience. Before diving into digital tools, I began with traditional hand-drawn sketches – low-fidelity wireframes – to explore layout options and visual hierarchy.

This stage allowed me to:

Identify key elements – pinpoint the most crucial information and interactions for each screen;
Establish visual hierarchy – determine the relative importance of design elements;
Uncover connections – discover hidden relationships between screens and streamline the user flow.

Style Guide

It was time to start the interface design and create the UI elements.

This was when I chose the app’s clothing, which influenced its personality and emotional impact on the user.

At this stage, it was important to consider accessibility topics.

I used website checkers, like WebAIM, to ensure that the elements had enough contrast and proportions for people with visual disabilities, like Domingos, my proto-persona.
I could not forget the elderly users and the difficulties associated.

The Prototype

The prototype phase brought the app’s personality and user-centric design to life.

During this phase, I could identify potential connection issues and refine user flows that were not as intuitive in earlier stages. The prototype allowed me to test and improve the user experience, ensuring the app was functional and engaging.

The heuristic test demonstrated points where the best usability practices and the best design approach were not applied.

Here are a few examples of key improvements I made:

Access to the tickets – One of the main challenges was improving the users’ access to their daily tickets. After testing several strategies, I decided to place the ticket access in the top menu for easy navigation. This minimal approach ensured that users could find and access their tickets with just a few taps, reducing the time spent looking for it (1:15 in the video).
Schedule an appointment or make an admission – I focused on simplifying the process for scheduling an appointment or obtaining an admission ticket. I decided to make this feature highly visible by placing a prominent, eye-catching button in the center of the bottom navigation bar. By clicking this button, users are immediately presented with two options to choose from: enhancing usability and reducing friction (1:24 in the video).

The resulting prototype is a streamlined, user-friendly digital healthcare solution that meets its core objectives while providing an intuitive, engaging experience.