Especialidades Médicas Tepepan

Identifying the business process

This is the first step in any of the jobs I take, as I usually like to understand the problem the client is facing before jumping into designing a solution. I met with the client and talked about what they usually do whenever a patient wants to book an appointment with a doctor, which consisted of big books where they recorded every single booking by hand.

The main intention of this first appointment was to gather out any relevant data and to identify the key pain points that needed to be addressed with the system.

Interview time!

After my initial meeting with the client I decided to prepare a more structured interview in which I would ask key questions to have a clear image of the main problem that needed to be solved.

My main goal for this interview was figuring out everything there is to know about the booking process and what the client (mostly the receptionists) would want to change about their current situation. Most of my questions were open-ended to encourage further discussion which would help me collect more relevant data.

Some of the questions where:

1. What do you like the most about the current process?
2. If you could only change one thing about it, what would it be? Why?
3. Do you ever feel like some parts of your work could be automated? Could you give me an example of this?

The solution

Once I was able to analyze the interview results, I realized a web application would fit the hospital needs, as they often take work to their homes and may need to access the system remotely. Also, one of the main pain points of the receptionists and manager is informing the doctors about their appointments, so I proposed a role-based system that will allow doctors to check on their schedules online.

As to the booking system should work, I imagined a full view calendar with different views for the month, week and day would suffice. For creating appointments, the receptionist must toggle the view to the specific doctor they want to make the booking for, select the preferred time and fill in the rest of the details.

The stack

When it comes to deciding which technology stack to use, I often think about the old saying "Less is more", in this case, the less setup and trivial work I have to do, the more time I have to think about what is important in every project I take. Solving the problem! That's why I chose to use Firebase alongside React for the development of the whole web application.

Prototyping

I usually use Figma as my main tool for prototyping, this tool allows me to move quickly and deliver value to the client as soon as possible.

After a bit of brainstorming and fiddling around with all the tools, I ended up with a quick mockup of the calendar view I'd like to use on the system.

Calendar view mockup.

Once I had that mockup, I modified it a bit to get the day view of a doctor.

Doctor view mockup.

Also, I designed a view of the form the receptionist must fill out to create an appointment.

New appointment mockup.

As you can tell, these are just mockups intended to be shown to the client as a guide on what the system will look like. The main concept I keep in mind when creating these is to not overdesign things. Since these can drastically change after I get the client's input on them.

Coding

For this project, I used the following open source libraries for speeding up the development process:

• react-big-calendar for creating the different calendar views.
• redux and redux-thunk for managing the state of the app and providing cleaner developer tools for debugging.
• react-redux-firebase, firebase , redux-firestore and redux-firebase for connecting the app to firebase and firestore.

Also, I created some firebase functions to integrate the application with external services like Sendgrid for sending transactional email or for exporting all apppointments from any date range to an excel spreadsheet.

The whole development process took around 2 to 3 months with bi-weekly appointments with the client to show newly implemented features and get feedback on what might need to change.

Testing and training

After the development of the application was finished, I started the testing and training process with the receptionists, during which I found some minor bugs that needed fixing before we could lose the old books and go digital.

Screenshots

Main view of the booking system.

View of a specific doctor's appointments.

Condensed view of all appointments in order.

Maintenance

Over the past year there's been constant communication between me and the client about certain situations that have occurred, including some bugs and problems on firebase's side. Also, I've kept the database clean by removing unnecessary information and completed appointments that have already been backed up.

Final thoughts

Overall, I'm very proud of what I accomplished with this project. The things I learned while developing the system have now made me a better programmer capable of handling more complex tasks and projects.

One of the key takeaways from this project is that organizational skills are key to designing and developing a system of this scale and importance. There were times during the development process where I felt like I was way over my head with work and complexity, but by dividing the problem into smaller bits and organizing myself on what to do and when to do it, I was able to make it all work in the end.