Website redesign for medical services company
Case Study: E-commerce Project “Ironhack UX/UI Bootcamp”
Introduction
We can start by presenting the project, which we made the case study for.
This medical center is an old family business which has been in the market for 20 years, they had big success and want to expand their services in Europe.
The main concerns about the current website are that it’s old fashioned, badly structured, it has bad navigation and bad usability which all cause confusion for the end users.
Interview with stakeholders
To gain a better overview about the website, we interviewed the stakeholders to see the full picture of the problems & the weak points that the stakeholders might think of.
After interviewing the stakeholder we had a better overview of the main domain.
An interesting part was that a lot of the customers are local but there are international offers too which means they support both B2B & B2C business models.
Another part of their services is that they offer schools & big companies medical services like regular checkups, on the job training and many other services in form of long-term contracts.
Affinity Diagram
During the interviews with the end-users we found that one of the problems they suffer from is the long waiting time when trying to get an appointment whether by phone or by visiting the clinic.
Choosing the right specialist was also an issue for the end-users because there is not enough information that can help the client.
Another concern was the long-term scheduled appointments which caused the client sometimes to forget about it! Which raises the flag that having the client notified by E-mail or by SMS would be a necessary feature.
“Hard to decide which specialist to choose. If there is no online booking — it’s hard to match your own schedule with possible options talking to receptionists on the phone.”
“Hard to remember anything, usually everything goes well with making online appointments.
It’s important to do regular checkups once a year, for some chronical things maybe even once in half a year.”
“Usually make appointments via tel. call, but prefer to do it online, unfortunately not all medical centers have that option. ”
The gathered interviews gave us a conclusion that can be summarized with the following diagram.
User Persona
After gathering all the information we need, we have a better vision about the user persona which called Sacha:
Sasha is a successful guy with a full professional and overflowing personal life
He prefers to organize all his appointments on his Mobile.
He notices that he is spending most of his time concerning his work and less caring about his health.
He is frustrated with his experience of the appointment booking process because of the long waiting time.
User Journey Map
All started after Sacha realized that he was too busy arranging even regular check-ups and now he is a bit worried about his health and wants to start visiting his doctor regularly.
Scheduling long-term appointments was also a reason for why he has skipped all regular check-ups.
Having the previous problems led Sacha into frustration and a suitable alternative was to look for online appointments.
Problem Statement
At the end of our user’s journey we concluded the findings in 3 main points:
- Online booking to make the process easier and less time consuming.
- Notification system to remind the client of his scheduled appointments.
- Getting more information about the specialists in the clinic.
Visual Competitive Analysis
In the following chart we have an overview of the main competitors of our brand.
We made an analysis of each service they offer and the following are the insights built based on our research.
Market positioning map
User Flow
The following diagram describes each process the end-user can do.
Wireframing
As a first step we created our low-fidelity wireframe that concludes and shows how a user can interact with the website.
Mid-Fidelity Wireframimg
As a second step we create the mid-fidelity wireframe which gives a better perspective of the website and its building components.
Usability Testing
We ran through the usability testing phase to get feedback regarding the wireframing and we had positive feedback about all the issues except for one issue during navigation which caused the focus to jump to the start of the web page when clicking on a navigation item.
Brand attributes and moodboard
After gathering feedback about the mid-fidelity wireframes we worked on the visual competitive analysis to get our hands dirty and focus on the visual part.
Style Tile and Colors
At this stage we have good insights about our brands identity and the new adapted vision, we can introduce the style tile.
Final Design
At this phase, we can start implementing the actual website taking in mind all the previous considerations.
Adaptives Prototyping
Desirability testing
We’ve also conducted desirability testing that’ve showned that users see our website as clean, clear and useful.
The case study was written by myself and the project was led by Eleonora, Marie-Anne and me.
Conclusions
Working on this project was very helpful because I got new insights about the essential steps of designing a good UX and the ability to transfer it ito a good User Interface design. What I gained was the opportunity to speak with a Stockholder and converse with them besides that I gained experience from a real business project. Working with this project made me advance in Figma. Also helped me understand the User’s view point and getting better with style tile, Colors and understanding the steps for building a website or any Mobile applications.
Thank you for reading my article. Any feedback is welcomed.