Industry
Medical
Client
Optima Medical
Time Scope
2 months
Redesigning components of a medical website to improve accessibility and information clarity for patients
Overview
I joined the project as a freelance UX/UI Designer during the product development phase. Since the project scope did not include direct user research, my design decisions were driven by other accessible methods, including existing information about the users, heuristic evaluation and accessibility principles.
I joined the project as a freelance UX/UI Designer during the product development phase. Since the project scope did not include direct user research, my design decisions were driven by other accessible methods, including existing information about the users, heuristic evaluation and accessibility principles.
Problem
The original website lacked visual consistency and presented information in a way that was difficult to understand and scan quickly, especially affecting the Pricing Page.
The primary goals
Modernize the visuals of the page.
Create a clearer information hierarchy.
Ensure accessibility of certain components.
Process
The first thing I did was auditing the subpages I have been working on. I have taken into consideration the Heuristics, design patterns, accessibility and overall good practices while designing a website. I followed with the benchmark (analysing mostly medical clinics' websites) in order to identify the most commonly appearing patterns and solutions.
The first thing I did was auditing the subpages I have been working on. I have taken into consideration the Heuristics, design patterns, accessibility and overall good practices while designing a website. I followed with the benchmark (analysing mostly medical clinics' websites) in order to identify the most commonly appearing patterns and solutions.
The Big Mess: Pricing page redesign
The Pricing page was the biggest and most challenging page I had to redesign. Not only the offer was huge, but the initial view was cluttered and unintuitive to use. The categories chosen from the side menu were overlapping each other and there was a lot of inconsistency across categorization, resulting in information overload. On top of that, the pricing page included services that were not supposed to even be there, such as Neurology.
The Pricing page was the biggest and most challenging page I had to redesign. Not only the offer was huge, but the initial view was cluttered and unintuitive to use. The categories chosen from the side menu were overlapping each other and there was a lot of inconsistency across categorization, resulting in information overload. On top of that, the pricing page included services that were not supposed to even be there, such as Neurology.
Before
Before
In order to adress the issue, I removed the unnecessary positions, decreased the number of subcategories and implemented more logical and accurate services grouping. I ended up with four main categories, aiming for a solution easier to scan, understand and reach the important information.
In order to adress the issue, I removed the unnecessary positions, decreased the number of subcategories and implemented more logical and accurate services grouping. I ended up with four main categories, aiming for a solution easier to scan, understand and reach the important information.
After
After
"Before and After" component
Another component I needed to design from scratch was the view for "Before and After" photos, presenting procedures outcomes. I faced an issue - choosing between accessibility and aesthetic. I developed two versions of the component. The first one aligned with the client’s minimalistic vision, while the second was intentionally more high-contrast and optimized for seniors who were the main user group. I was worried that they could potentially have an issue with switching between the views.
Another component I needed to design from scratch was the view for "Before and After" photos, presenting procedures outcomes. I faced an issue - choosing between accessibility and aesthetic. I developed two versions of the component. The first one aligned with the client’s minimalistic vision, while the second was intentionally more high-contrast and optimized for seniors who were the main user group. I was worried that they could potentially have an issue with switching between the views.
The more aesthetic version is currently being tested, with a plan to transition to the more accessible model in the next iteration.
The more aesthetic version is currently being tested, with a plan to transition to the more accessible model in the next iteration.
Summary
The biggest challenge here was working within a pre-existing project and adhering to the constraints of an established design system. Due to these limitations, certain core elements, such as the footer, remained fixed. Another issue was the lack of data - there was no research process, and I was basically thrown into the project in the middle of it.
Despite these constraints, I aimed for successfully establishing visual consistency and implement a clearer information structure.
The biggest challenge here was working within a pre-existing project and adhering to the constraints of an established design system. Due to these limitations, certain core elements, such as the footer, remained fixed. Another issue was the lack of data - there was no research process, and I was basically thrown into the project in the middle of it.
Despite these constraints, I aimed for successfully establishing visual consistency and implement a clearer information structure.