Tarjeta Sanitaria
What if Madrid's apps for medical appointments were a little different?
Project overview
The objective of this project was to merge two health apps - Tarjeta Sanitaria and Cita Sanitaria - into a single, user-friendly application.
The new app would combine the features of both apps, providing users with easy access to their health information and appointment booking in one convenient location.
The redesign will also aim to improve Cita Sanitaria's overall design, ensuring that it matches the modern look and feel of Tarjeta Sanitaria, which currently has a more updated interface.
The problem
Currently, users need to navigate two separate health apps to access their health information and book appointments. The design of Cita Sanitaria, the appointment booking app, is outdated and lacks the modern look and feel of Tarjeta Sanitaria, the health information app. Additionally, some features in Tarjeta Sanitaria redirect users to external websites, creating a fragmented and inconvenient user experience.
Goals
-
Create a single health app that combines the features of Tarjeta Sanitaria and Cita Sanitaria
-
Allow users to navigate their health information and appointments in a single convenient location
-
Eliminate the need for users to navigate to external websites to access certain features
Current apps
On the first row, we have some screenshots of the Tarjeta Sanitaria app, and below are some from the Cita Sanitaria app. As we can see, Cita Sanitaria has a more outdated look and doesn't have the same feeling as the other app
Log in Screen
The logo was partially covered by the phone's notch, so I lowered it down a little. The main issues were the buttons. The "Change user" button looked like regular text, so it wasn't intuitive for the user and I changed its look. Also, the buttons for choosing how to access the app (with password or with Face ID) were too low, therefore risking to be cut by the phone's edges and leaving too much white space in the middle. I decided to add icons to the buttons to make them more intuitive and shorten the text on them as well.
Home Page
Here, the articles seemed to take the user's attention from the main flow, which should be making an appointment or checking their health information. Instead, it seemed more fitting too have the articles in the section below, which was about prevention an promotion of health.
Website Redirecting
Right now, the Tarjeta Sanitaria app, redirects the user to a webpage in order to allow them to check their personal health information. This seems really inconvenient, and it would be a much more fluid experience for the user to have this information embedded in the app. The website overall, also has a not very user-friendly design, but we're not going to talk about it right now.
The Appointment - first step
Now, we're moving to the Cita Sanitaria app, to which we would have been redirected from Tarjeta Sanitaria, after clicking the "Cita sanitaria" button. Here, the first screen we would see, would be the one on the left, which has all the added users. After selecting the user, the screen on the right would appear in order to select the appointment specialisation. First of all, I decided to allow the user to access one account at a time, meaning that if they wanted to make an appointment for another person, they would have to select another user (either from the settings or before entering the app). Second of all, I decided to reorganise the appointment specialisations, so that they would be more easy to navigate.
The Appointment - selecting the type
Here, the main concern was to take the current design to a more modern one, that would match Tarjeta Sanitaria's. I decided to make the information displayed on top (specialisation, Dr's name and the medical center) look like a sanitary card, and make the appointment types more obvious for the user, since the current design was displaying them as little buttons with poor contrast.
The Appointment - selecting the date and time
The information at the top remained the same. For the appointments, I decided to add a heading saying "Next available appointments" for the selected (or the default) date, which is also displayed next to the heading. This eliminates the need for the clarification text at the bottom of the current design page. Also, I separated more clearly the date from the time of the appointment. I then moved the "Other day/hour" button from the corner of the screen and also added a button saying "Call us", in case the user needed help with the appointment.
Confirming the Appointment
Here the user has the details of their chosen appointment, summarised in a table. I decided to stick with the sanitary card look, so it feels more connected. I also reorganised a little bit the data and moved the button from the bottom of the screen so that it doesn't get covered by the edges of the phone.
Results
After asking a few people for feedback on this potential redesign and merge of the two apps, they were very pleased with the results. Users of these apps affirmed that it would indeed be better if the two apps were merged and the “Cita sanitaria” app had a different look, since right now it looks very old and some buttons are placed inconveniently.
In short terms, the users would rather have this new and merged design.
Next steps
Maybe propose the idea and hope for the best, or just hope that the app would get redesigned soon :'D