What are we talking about?

Project: Design a responsive app and website that allows patients to check in to their family doctor's office, answer initial health screening questions, import informations and dave data.

What are the objectives?

Create an app and website that can be used to optimize time: there it is possible to schedule appointments, check in to confirm an appointment, answer initial questions so the doctor can have the information, in addition to importing relevant medical data, as well as test results. exams for return consultations, etc.

Main objectives: reduce time on phone calls to schedule appointments, reduce consultation time with pre-established standard questions, create relationships with patients so that they feel like returning - a feeling of home.

Who are the people we want to reach?

All.

Like most all apps made, this one would also like all users to use it to optimize time. However, the idea of the project is to make life easier for people with routines that are different from the "usual", who have difficulties in any area.

In summary for this project...

Google UX Design Certificate - Persona [Template].jpg

Google UX Design Certificate - Persona [Template] (1).jpg

Google UX Design Certificate - Persona [Template] (2).jpg

Competitive Apps

→ Doctor Anytime
→ Doctoralia
→ Saúde Vianet

→ Doctorsa

→ Nav Dasa

→ Docway

The apps mentioned above compete, directly or indirectly, with the app being developed in this example. They offer features like appointment scheduling and specialty searches, among others. However, they do not encompass the main idea of this project, which is to be a platform that stores medical information and sends it to appointments scheduled within the app.

All these platforms were used for comparison, inspiration, and other references, as I do not yet have complete guidance on the medical possibilities in apps.

User Map in the App (Initial Possibilities)

The user journey has been deliberately designed in an embryonic manner.

The main objective is to create a basic guide for using the app, highlighting its primary features: scheduling appointments, confirming appointments, and sending medical data.

Other functionalities are considered complementary and would be developed in a future project that requires these additional tools.

There are three options for the user flow:

Already a user of the app with a scheduled appointment:
The user accesses the app and finds information about their scheduled appointment on the home page. They can confirm the appointment through check-in or reschedule it. In this scenario, the user has already provided their information to the app.
First-time app access, without providing medical information initially:
The user is directed to a home page where they can schedule appointments and view other information. When scheduling a medical appointment, they will need to provide their medical information and confirm the booking.
First-time app access, with medical information already provided to the database:
The home page will be different from the previous one, as it will not show any scheduled appointments. The user can schedule appointments at any time, using the medical information they have already provided.

Sketch (Initial Thoughts)

My thoughts while creating this sketch were:

Simplicity: The user needs to know exactly how to perform each task.
Recognition and Memorization: Visual information should be familiar to most app users.
Formal and Subdued Aesthetics: Avoid bright colors and animations, as medical situations are often delicate. The design should be pleasant yet formal, with clear information arranged by priority.
Use of Buttons: Users should only need to type when necessary, such as for open-ended questions and informations, like email and password.

For the questionnaire, it should be clear and concise, maintaining a welcoming tone both in writing and visually. All information can be relevant since different users will use the app, but it's important to avoid overwhelming them with excessive details, ensuring clarity and prioritization.
This is just an initial sketch, which will likely be refined multiple times, but it already conveys the overall impression I want to achieve.

Wireframe (Initial Thoughts)

As you can see when comparing the sketches with the wireframe, there were changes - which was absolutely predictable and is already known in the design journey.

In addition to these changes, new screens were designed to fulfill a purpose: sending the personal medical information to be stored and making a simple appointment.

It is also important to highlight that there are gaps to be filled in this project - business gaps. Once there was a better crafted, detailed and constructed demand, they would cease to exist.

Design System

With the aim of saving time, I developed a Design System that includes the main components and essential information for the application. The project involved creating wireframes, planning the interface, and developing the graphic concept, all in accordance with Nielsen's heuristics.

The following decisions were made:

Main Colors:

Blue

#077ABB

Light Blue

#D6EEFF

It may contain throughout the project (color palette):

#FDFDFE #F7F9FF #EDF2FE #DFEAFF #D0DFFF #BDD1FF #A6BFF9 #87A5EF #3D63DD #3657C3 #395BC7 #1D2E5C

Gray

#62636C

#FCFCFD #F9F9FB #EFF0F3 #E7E8EC #E0E1E6 #D8D9E0 #CDCED7 #B9BBC6 #8B8D98 #80828D #62636C #1E1F24

Typography and Text Style:

Aa 123

Headline 1

Body 1

Body 2

Bold, 17

Headline 2

Semibold, 15

Medium, 13

Semibold, 14

Body 3

Medium, 12

"The old posters and signs in the traditional Montserrat neighborhood of Buenos Aires inspired Julieta Ulanovsky to design this typeface and rescue the beauty of urban typography that emerged in the first half of the twentieth century. As urban development changes that place, it will never return to its original form and loses forever the designs that are so special and unique. The letters that inspired this project have work, dedication, care, color, contrast, light and life, day and night! These are the types that make the city look so beautiful."

Mobile information, spacing & icons:

In our model, Grid Layout was used in:

Columns

Type Stretch

Gutter width 20px

Margin 24px

8px 16px 24px 32px 40px 48px

Functionalities:

Geolocalization:
Ease of finding doctors near you

Calendar:
All consultations from all specialties in the same place

Database:
All your information saved and easily accesible

Reminder
Appointment and exam reminders

The project itself

Usability Test

The usability test was done with an undistinguished audience - I just sent it to a group of people, without knowing which of them responded and which responses were from whom.

Two "challenges" were created in this test.

The first was that the user needed to add a family member within the app, this included adding them with their personal information. The beginning of this process started on the homepage and continued on other screens.

71% of those who participated in this process chose that the process was "very easy", followed by the two options - in equal quantities - of "so-so" and "could be easier".

In this "could be easier" option, the suggestion was to leave a button on the homepage just to add the family member instead of going to "my family".

The second challenge was scheduling an appointment for a family member who had just been added. This process also started on the homepage and was intended to determine whether it was visually easy to indicate where it should be and the number of screens needed for this process.

In this case, the option that users most selected regarding the degree of ease was "so-so", followed by "could be easier", and finally, "very easy".

Heatmaps

1st challenge

2nd challenge

For me, there was an impasse regarding changing the buttons due to doubts on the part of the family, but as the general opinions were that it was easy to complete this task as it is, the impression I was left with was that "opening the range" for more buttons would create an ocean of buttons with options, which would leave a lot of information on the screen.

This goes against the idea of behavioral economics, since the user would spend a lot of time searching for all the information they need, instead of everything being arranged in the same space.

At this stage, we worked with:
- Figma navigable prototype;
- Creation of a roadmap for the user journey;
- Test application by Maze;
- Pilot test to see if the prototype was following the correct flow;