Always offering a patient a way to book: IntegraMédica appointments

Summary

I redesigned a clinic network's appointment booking app so every patient leaves with an appointment, in person or by video. Successful appointments rose 52% after launch.

• Role: UX designer and front-end developer
• Team: Birchman Chile agency team working for IntegraMédica, a Chilean clinic network that is part of Bupa. I covered UX design and front-end development.
• Timeline: Started in 2019; launched during the pandemic
• Domain: Healthcare: appointment booking for a clinic network
• Problem: The previous booking app often left patients without an appointment: they had to hunt for a free day, and an empty day was a dead end.

My contribution

• Redesigned the appointment booking flow end to end, from specialty search to confirmation.
• Designed the availability calendar and the video consultation fallback.
• Built the design system and coded the front end against it.

Outcome

• Successful appointments: previous booking app to up 52%, after launch, during the pandemic

Key decisions

1. Mark every day with free slots by a dot on the calendar.

Instead of: A plain date picker, where patients only learn a day is full after choosing it.

Because: Finding a free day was the main friction. Showing availability on the calendar itself removes the trial and error.

Result: Patients pick a day that is known to have slots, so most attempts end in a booking.

2. Offer a video consultation whenever no in-person slot fits.

Instead of: Ending the flow with no availability and sending the patient away.

Because: The goal was that every patient leaves with an option. Each doctor card shows In person and Video consultation side by side.

Result: A full clinic day no longer ends the booking. This mattered more once the pandemic made video care normal.

3. Keep one task on screen: a short, guided flow with a visible progress bar.

Instead of: Restyling the previous version and keeping its structure.

Because: Patients come to do one thing, book. Search or select fields, one step at a time and a help panel to call or chat remove the reasons to give up.

Result: A focused path from specialty to confirmed appointment, on desktop and mobile.

4. Build the design system alongside the screens, on an 8px rule.

Instead of: Designing each screen on its own and fixing inconsistencies in code.

Because: I also wrote the front end. Tokens and grid classes that matched the design meant the screens could be built as designed.

Result: One set of type, colour, spacing, buttons, fields and cards across every screen.

What was unclear at the start

IntegraMédica already had a booking app. It worked, but patients often finished without an appointment: they searched for a specialty, picked a day, and only then found it was full.

The open question was what to do when there is no slot. Our answer set the direction for the whole redesign: never leave the patient without an option. Show where the free days are before they choose, and if no in-person slot fits, offer a video consultation in the same flow.

Process

Empathize and define

We followed the Design Thinking steps: empathize, define, ideate, prototype, test. The persona that shaped the work was a 27 year old sales executive in Santiago who books her father's ophthalmology appointments from her phone. She books for someone else, on mobile, in short breaks, so every extra step or dead end costs her.

A guided booking flow

Booking became a short guided flow with a progress bar: patient details, specialty, service, day and time, then review. Specialty and service fields accept typing or picking from a list. A help panel offers a call back or a chat with an agent, with opening hours, so a stuck patient still has a way through.

Availability you can see

On mobile, the week view marks days that have free slots. Choosing a day lists the doctors with times, each with In person and Video consultation tabs. The doctor page shows every free time for the chosen day, and the selection stays visible at the bottom with Continue.

Prototype

I wired the full mobile flow as a clickable prototype covering every path: in person, video, changing the date, going back to search. Testing it end to end showed where a patient could get stuck before anything was built.

Design system

The design system set Montserrat headings and body styles, a blue primary palette with teal, orange and magenta accents, and an 8px rule for margins and padding (8, 16, 24). It defined a 1152px content layout, grid classes for 2 to 6 columns, buttons in three sizes, text field states, action sheets, and hero and card patterns.

Outcome

Successful appointments rose 52% compared with the previous booking app, after the redesign launched during the pandemic.

Video consultation was already part of the booking flow when demand for remote care grew, so patients without an in-person slot could still book.

What I would do differently

• Track completion at each step from day one, so the 52% could be split between the calendar, the video fallback and the simpler flow.
• Test the flow with caregivers booking for parents earlier, since the persona showed they are a core group.