Developing an e-commerce platform for a physiotherapy clinic (part 1) — Case Study

Rita Martins
11 min readApr 26, 2020
Illustration by Icons 8

This week we were challenged to work on a local business and develop its own e-commerce site. After Beatriz Morais’s team called itself Team Julio after her cat, we decided to call ourselves Da Charlies after my dearest cat and Rafael Martins’s roommate’s very cute doggo. A new pet named Charlie is being arranged for Beatriz.

With this prompt in mind, we decided to work with a physical therapy clinic.

Problem

Due to the current COVID-19 crisis and the State of Emergency declared in Portugal, most businesses deemed non-essential were forced to close doors. In some cases, this means that people may be missing on the services they need.

When it comes to physical therapy, we believe that’s the case! Despite being a health profession, having physiotherapy sessions can be hard in a time when physical distance is the best vaccine. It’s positive that urgent cases still get their care, but we’re worried people who depend on physical therapy to improve their daily lives might be left behind.

Goal

With this problem in mind, our goal is to develop an e-commerce platform for a physiotherapy clinic to help their business, but also get physical therapy to the patients in a time of social isolation.

Illustration by Icons 8

Our proposal

Our proposal is to create a model that allows professionals to keep following the patients through online physiotherapy sessions and classes.

Design Process

Our team

Da Charlies are Rafael Martins in the Tiny Piano, Beatriz Morais in the Guitar, and Rita Martins in the Bass.

While I feel like we have a name worthy of the smallest Big Band ever, unlike our instruments our roles are very similar, and all fall in the same categories of UX Design needed for the project.

What I mean is that much like the previous project, we all tried to do as much of everything as we could, while also aiming to delegate a little.

Empathize phase

CSD Matrix

Introduced and suggested to us by our Lead Teacher, Hugo Rocha, CSD Matrix is a tool to define our Certainties, Suppositions (Assumptions?), and Doubts before we start on our project.

The goal is to put post-its with information about the project into each category and move them throughout the project from the Doubts and Supposition sections, so we finish the project with a mostly full Certainties section.

Although we found it super useful to get an idea of the direction we wanted to take with this project — especially as a preparation for the interviews — we ended up not using it much throughout the project. Still, it was a super valuable headstart!

Illustration by Icons 8

Interviews

Because the stakeholders know a lot more about their business and users at the start of a project, we started our week by interviewing some health professionals.

The clinic we chose to work on is from Rafael’s home town, and we were super lucky he was able to contact them and ask about their current practices as a physiotherapy clinic.

Beatriz was able to contact her friend also working as a physical therapist, giving us insight into other clinics’ practices.

While I was waiting to contact my own physiotherapist friend, I reached out to a Facebook group and got to talk with the amazing Sofia, who works at the Alfredo da Costa Maternity and still helps hospitalized soon-to-be moms.

With our interviews, we were able to identify two main pain-points:

  • Physiotherapists want to help their patients, but the ones who still can do it are limited to post-op cases or equally urgent cases;
  • Some clinics just shut their doors and have no alternative source of income.

Online Survey

While we were interviewing some professionals, we also got started on our survey with the insights we had been gathering.

Through our interviews with therapists, we were able to define some issues the patients could be facing at this time, so we tried to target those. But as we were looking into getting quantitative data, we also focused on not limiting our survey so much that only a niche would be able to answer.

So we were able to conclude that about 45% of the people surveyed trust online health appointments while about 43% were willing to attend online physical therapy sessions.

Business and Competitive Analysis

Rafael began looking into the clinic’s direct competitors, while the two of us worked on the survey. Thanks to that analysis, he was able to position our clinic in the market and realize in which way we could improve it.

Later in the project, we realized Rafael’s spectrum was very useful to illustrate where we wanted to go with the clinic but was not understandable to someone other than our group. So we brainstormed a little on that and came up with the final graph of where our clinic is and where we want it to be.

Define phase

Affinity Diagram

Illustration by Icons 8

With our interviews and survey complete, we built an Affinity Diagram to take a good look at our insights side by side.

After gathering our information into clusters, here’s what we were able to understand:

  1. Both patients and therapists missed the interaction and stated how important it was for them;
  2. A service like this should only be made available for certain kinds of patients like:
  • Patients at the end of their physical therapy treatments;
  • Patients who’d already had in-person sessions;
  • Patients with mild injuries.

3. Exercises should be done in the (online) presence of a physical therapist.

UX Strategy Blueprint

By Rafael’s suggestion, we decided to build a UX Strategy Blueprint, to better define what we had and what we hoped to do with it. It brought the focus back into our project.

User Persona

Thanks to all the insights gathered, Beatriz was able to define Filipa, our user persona, who proved to be very helpful for our User Flow, as well as Use Cases and Scenarios.

Inspired by Ofer Ariel’s design

Ideate

Site Map and Card Sorting

I’ll be honest here, I thought the Site Map was going to be easy-peasy. We were just thinking of adding a section to the website. We would add a membership for treatments under ‘Online Services’, a personal area, and that would be it.

We went back and forth a little on how to name the new sections and where to actually put them, and then left it to a closed card sorting to settle the deal.

The results we got pretty much bundled everything under ‘Online Services’, but thanks to our teachers’ feedback, we realized our changes had to go beyond that:

  • The ‘My Space’ card became a ‘My Profile’ icon;
  • ‘Store’ became its own card;
  • Under ‘Online Services” we put cards for Prices, Physiotherapy Sessions, Classes and an Exercise Archive

Use Cases and Scenarios

With the help of Beatriz’s persona, we were able to imagine 15 different scenarios in which our user needed our website and from there we were able to write 3 use cases for 3 chosen scenarios.

User Flow

The use cases helped us see a pattern that we could translate into a user flow. The user’s task was to schedule an appointment and ours was to make our “happy flow”.

At first, we thought that flow would be a patient seamlessly registering on our website. But later we realized that between registration and booking an appointment, the diagnosis/screening we deemed mandatory before access to any appointment represented a gap too big to belong on a happy flow. (Coincidentally, last Friday Ana Marques was a guest speaker at our class and I realized through her amazing prototype that such a wait could be part of a happy flow.)

With that in mind, we decided our happy path would entail a patient logging in and booking a single appointment with their therapist.

Brainstorming

Our flow was decided, so it was time to brainstorm some ideas on features and how the site would look like.

We started by brainstorming really bad ideas. Here are some of my favorites (and the solutions we found):

Not only was it great to unblock, but we also had some good laughs about it.

After that, we did one round of Crazy 8’s with an extra round to clean up our top 3, we voted on our favorites and went straight to concept sketching.

Prototyping

Concept Sketching

We actually mixed a bit of the concept sketching with the wireframing stage. It was also in this stage, with the prototype in mind, we realized that our registration flow, the first “happy flow” I mentioned earlier, wasn’t a “happy flow” and that we should focus on our login flow instead. We just wished we had realized that before putting in the work.

Lo-Fi Prototype

After designing our wireframes on InVision Freehand we started to prototype our first wireframe, so we could test it.

Testing

Useberry

For testing, we were recommended Useberry, since it records the testers’ flows and generates heatmaps based on where the users click.

Our first test was a success without much feedback from Useberry at first sight. We were also able to test personally with some users whose insights were indispensable, for once we were aware of it, we could see a pattern of behavior on the heatmaps we hadn’t seen before that backed up their claims.

Mid-Fi Prototyping

Thanks to the previous testing we were able to implement some changes on our mid-fi prototype that improved our users’ experience and reaction to the flow.

This time, I felt most of the feedback we got from Useberry didn’t really relate to the flow itself, but to our poor wording of the process and what a user could expect of the prototype. We got some valuable insights, nonetheless.

So here’s what we changed on our prototype through testing:

Illustration by Icons 8
  • We added a label to the “My Profile” icon, so people didn’t have to rely on recall alone to access their profile;
  • We also changed the “Book a Session” button to “Book an Appointment” because we found some users were confused with that;
  • Finally, we improved the scheduling page. Although we felt most the trouble the users were facing on this step was due to them not reading what was on the screen, we still decided to give them some feedback, just so they weren’t frustrated when they clicked the month input box and nothing happened, even though it wasn’t part of the flows.

You can watch a video of our happy flow below, or you can follow this link to go through the whole prototype!

Thinking about the FUTURE!

We were a little sad that some of our ideas were left out, so we decided to mention them anyway! Here are our next steps:

  • Creating an app for the clinic that can diagnose patients through AI and other sensors! WOW!
  • Creating a progress bar where patients can follow their improvement and the improvement of other patients! AMAZING!
  • A Buddy Program for patients to help each other, and for the elderly to be able to get some support with these new technologies. RIGHT ON!
  • A filter system that allows patients to choose their therapist based on gender, availability, and specialty. HOW ARE THEY DOING THIS?!
  • We had to give up on memberships for the time-being, BUT we would love for it to be a main feature of the service. MEDIC! SOMEONE JUST FAINTED!
Illustration by Icons 8

Key takeaways, Blockades, and Conclusions

Most of the week I felt we were taking a long time with everything. But I think most of it was because we had to wait, A LOT. We had to wait for our acquaintances to be available for the interviews, we had to wait to get the testing results, there was a lot of waiting involved. Of course, we tried to fill the time with other tasks we had to accomplish, but if our tasks were sequential, there wasn’t much to do but wait and accept we would turn in at 10pm again.

We also spent a lot of time discussing our options and features and everything, really. We all came from different backgrounds, so we all had very different perspectives to bring to the table. But when we entered the prototyping stage, we realized that all the time spent talking about what we were doing really streamlined our project. We guess that Einstein guy really knew a thing or two about stuff:

If I had an hour to solve a problem I’d spend 55 minutes thinking about the problem and 5 minutes thinking about solutions.

I also realized I don’t really like online testing. I mean, personally speaking, it’s great I don’t have to stress about interviewing people, something I struggle with a lot because I get Nervous™️. But throughout all the testing, I felt the most valuable feedback we got was from the people we talked with while testing, rather than the patterns and follow-up questions alone. I’m not ready to give up online testing, especially because it allows us to reach a broader audience while we’re unable to meet in person and interview, but I’d rather get qualitative data on this one.

Finally, I really enjoyed this week. Yes, it was tough, time-wise, but I felt like the three of us really managed to pull off something great, worked well together, and ended up with something we’re all proud of.

Thank you for reading!

Click here for part 2!

--

--

Rita Martins

UX/UI designer, illustration, and comic book artist from Portugal.