Published in


E-Commerce Design for an Physiotherapy Clinic — Part 2

Recently, along with my team made of Beatriz Morais and Rita Martins, we designed the e-commerce for a physiotherapy clinic, going all the way to a mid-fidelity prototype. To see how far we’ve went, check out my previous Medium post in this link.

This time, the challenge proposed by Ironhack Lisbon was set. Time to take it to the next level and finish the challenge with full high fidelity project that includes both desktop and mobile versions. This means designing a responsive e-commerce that is based on our previous UX research and testing. This is the part of the Bootcamp where we starting shifting the focus from UX to UI.


From previous work, we analysed the impact of COVID-19 in physiotherapy clinics. We put our focus on a specific clinic located in Fundão, Portugal that offers a variety of services that range from osteopathy, passing by psychology to pilates classes.

The challenge was to enable the clinic to book online medical appointments through their website.

From there, we developed a mid-fidelity website version that enabled clients to access a “personal account” space; there, they could easily find information about their medical appointments, giving them power to schedule them and make online payments accordingly. This is where we left the project and where I am picking it up for this week.


Considering that the goal is to take the project from mid-fidelity to hi-fidelity, some complementary research was carried out. This meant that I was back at looking at health bodies to analyse their brand and services.

Benchmarking Analysis

I chose to conduct a competitive benchmarking analysis as a way to study best practices for a particular strategy or techniques of other similar entities to the clinic. The analysed entities were Hospital da Luz, Clínica CUF, Medicina Online by Multicare, amongst others. For this study, I set some goals of what I wanted to look at.

  • How are medical companies facilitating their online booking processes?
  • How are they setting the tone amongst their audience?
  • How do they organise information within their websites?
  • What are the best payment practices — prior to appointment, after?
  • What do their colours and typography say about them?

From that analysis, I was able to notice a few things:

  • Every entity allows their patients to choose their doctor if they want to.
  • Payments, when available online, have a separate section in the patients’ profile pages and usually done after the medical appointments
  • “Book Medical Appointment” is an option always present in the screen of the user
  • Clinics tend to be quite classical and use blue and yellow colours.

First Sketches and Prototype

“Mobile Version” Lo-Fidelity

As usual, I opted to use InVision Freehand tool to prototype my low-fidelity solution. The goal was to test the following key points.

  • What kind of information should be shown in the “My Profile” space?
  • How will I display the available times for selected appointments?
  • How does the appointment booking flow feel like?
  • How will I enable patients to choose their preferred therapist?

First Learnings

From that prototyping and respective user testing, I was able to point out a few necessary changes.

  • When it comes to health services, most patients prefer to make the payments after they had their online meeting.
  • The display of a full monthly calendar can be too small for the mobile version and it doesn’t make sense for a physiotherapy clinic that schedules appointments with little time in advance
  • The questions that patients truly ask and want to see in their profile are “How can I make an appointment” and “When is my next appointment”?
  • Interesting additional features could be the use of a progress bar to see how far they’ve come in their recovery, as well as tips and information on how to maximise their recovery.

“First the service, then the payment!” — José Paulo, 32, Bank Officer

Branding & Style Guide

This is the part of the project in which we start imagining life after mid-fidelity versions. This is also something new to me as, and I did take the time to learn more about typography, colour theory and other Adobe softwares such as Illustrator.

Setting the Mood

I made use of a Mood Board (link here, courtesy of InVision once again) to start gathering colours, notes and images that could visually describe the mood of what envisioned (no pun intended)

Branding Opposites Tool

I started by looking at the current image of the clinic. In a nutshell, I positioned the current brand of PhysioEdge in a 4 dimension scale in which I analyse its friendless, tone, audience reach and image.

Is it friendly? Does it appeal to younger demographics or is more classic? And why would I want to make it more appealing to younger generations?

The current version of the clinic is fairly classic and serious. However, considering that it is migrating to the digital world, creating more engagement with their customers and also considering their vast array of modern specialities — acupuncture, osteopathy, Chinese medicine, pilates, etc. — it shouldn’t be afraid to become more innovative, younger and friendlier.

The Style Guide

  • Logo: I wanted the logo to be simplistic, diverse and modern at the same time. Upon doing research, I noticed that hands symbolise a lot the field of physiotherapy but I felt that it did limit the clinic considering the amount of things it offers. Thus, the lotus flower was selected to the main image of the clinic
  • Colours: Research did show me that in medicine practices, there is a vast array of colours that are used for different purposes and be associated to different body parts — blue or green for combination of calmness and relaxation, yellow and orange that represent joy and happiness, shades of purple more targeted to women, red associated with cardiovascular treatments, etc. When one thinks about physiotherapy and similar practices, one can’t help it but to associate the field with body and mind connection, thus Blue seemed to be a good fit for the job. Using the Complementary Colour technique, Orange was the second colour chosen, with the plus of representing joy and happiness. This, I believe, could give the clinic a more modern and fresh image, contrary to its original part of dark blue and green.
  • Typography: for the typography, a mix of classic and modern seemed appropriate, having landed the choice on Aleo for headlines and Titillium for content.

Mid Fidelity

For the mid-fidelity, I designed the whole flow of the happy path that had been predefined in the previous project (in case you’ve missed it, find it in this link). Here, one can notice the updated “My Profile” with the option given to the user to book medical appointments immediately.

Another addition to the prototype came in the Payment section. Although undeniable convenient to make payments online and include in the booking process, I found out that for this sort of medical investment, people are more comfortable in making the payment later.

Thus, I included a third option in the payment method “I will pay later” that allows the patient to pay for the appointment after the service was perform. To do so, they can access the menu in their profile, go to payments and find their receipt and corresponding information to make the payment (a practice that is already being used by some of the entities analysed during the benchmarking phase)

High Fidelity

>> Link to Hi-Fi Prototype

The test results from mid fidelity resulted in a more elaborated My Profile section. In it, the patient will be able to find information about her own account, future events and the possibility to book appointments. It comes with the extra plus that when he/she starts a recovery programme, she can keep track of her progress as well.

Key Takeaways

Time management is really important, as I struggled a bit in making a better use of my time. I feel quite comfortable in UX and I spent a long time in it but when it came to materialise my findings, it proved to be a challenge. That was because I did extra work on the top of the first project and felt that I required to make some changes, but without running away from the previous proposition. That proved to be quite arduous as it is easy to lose the focus.

Other than that, I am happy that I experienced more with branding and know how one can build an image. This is a project that I will revisit soon surely :-)

Want to learn more?

If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!

Thanks for reading!



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rafael Martins

I’m a UX/UI Designer with 2+ years of experience in design thinking practices by conceptualising and crafting innovative services