Acibadem Hospitals
Project type:
Web Redesign
Services:
Web design,
UI/UX
Client:
Acibadem City Clinic is one of the largest groups of medical institutions in Bulgaria with a leading role in providing medical services in various fields of medicine. Established in 2016, the group is a union of the leaders in hospital healthcare in the country - Tokuda Hospital and City Clinic, together with one of the largest healthcare holdings in Turkey - Acibadem. Project collaboration with Algorithmity
Project goals
The client was in process of migrating their website platform and wanted to use the opportunity to also "facelift" their design and have a modern appearance. They consulted with me to give advice on potential usability problems as well as solutions for customer pain points. The client already had branding and simple color palette, but also requested, clean and serious feel of the design in order to match the prestigious status of the hospital brand.
Other areas for improvement were typography where a stronger hierarchy was needed. Visual design needed better contrast as some sections were too much blending into each other as one, and some areas had too much contrast that strained user's eyes.
Approach
We started first by sending a review of the potential usability issues.
Content: The landing page contained a big amount of text, which could be overwhelming for many users. Also it didn't show essential information first. We solved that by moving essential sections like "find a doctor" almost to the most top part of the page, remove redundant texts and banners and use more graphic elements like icons to improve scannability.
Navigation & Structure: The main issue here is that navigation was very different from the standard patterns, it was not predictable and having too much elements. The solution to this was to always place the logo at the top-left position and scale it down, reduce items in the navigation and avoid hamburger menu in desktop version. Remove clutter like floating buttons container and combine similar pages like "blog" and "news" together.
Styling: Although the current colour palette is good, it was poorly used in terms of contrast. The typography could be improved. Layout was not consistent and aligned.
The next step was to show the client that even with simple layout and content changes shown on Wireframes their current design can benefit a lot. Previous design didn't adhere to a strict grid, so I introduced 5-column grid layout. After discussing business needs and organizing the content structure, I proceeded with high fidelity mock up of the home page in order to decide on the new style and direction of the design.
Creative direction
Solutions
-
The final design uses color palette that еmphasizes white and lighter colors which suit better the appearance of a hospital website. We used subtle changes in blue shades for drawing attention on sections and reserving the darker values for important functionalities like "find a doctor", CTA buttons and icons.
The typography was modernized and structured to improve readability, which was crucial for this type of websites which often have text-heavy pages. Adding visual labels and icons as well as different font weights made it easier to fit all the information of a doctor inside boxes for listing and for the detailed page. It also helped to separate doctor's background info into digestible sections.
The main navigation was optimized and reduced to 7 items. The top level ribbon was reserved for emphasizing most essential functionality as making an appointment and checking results. The redundant items were moved to the footer.
Another challenge was to avoid making pages look too "sterile" and boring while still maintaining serious tone. This was achieved by including subtle semi-transparent graphical elements as well as blending background images. -
Make an appointment functionality was one of the most important for this project and thus we had to improve the previous version to have available doctors and hours easier to scan. We introduced tertiary color to make it easier to code differences on the calendar. We added more informational hints to help users of age which are not so tech-savvy and usually are the prevalent age group for health care websites.
-
The Diagnotic Consultative center page design was another challenge, as it represents a different entity in the hospital organization and thus had to have captivating and memorable appearance which was achieved by a bit different layout, with graphical elements to showcase the benefits it offers.
The multiple different prevention programs for males and females also had to be shown in a way that's not too repetitive and still keep drawing visual interest. -
For departments page the most important change was content organization & structure. I suggested that we make the most looked for information like working hours, contact phone number and button to make appointment more visible, so we put them in a container and moved them to the top of the page. We saved space by combining repetitive elements in carousels.
As a 3rd level hierarchy page this needed a good visual representation in the sidebar navigation which had to be consistent across different device sizes. You can see more details of the result below in the Mobile version section. -
Medical activities and department list pages don't have big content, but the issue here was that it's repetitive and too professional for a regular user that's not medical professional. Having nice graphical icons, enough space between elements, as well as arranging in alphabet order, made it so much easier to find the right place for your medical problem.
-
Contact page should be clear and concice. That's why the focus here was to clearly segment information in boxes and with the additional help of icons, but strip it down of almost any unnecessary visual elements. We only left 1 photo to show how the hospital building looks like but also to balance the layout on desktop versions.
Mobile version
Collaboration with the developers ensured that we have a nice and user-friendly responsive design. The multi-leveled hierarchy of the website was a challenge, because I had to come up with clear visual differentiation between different levels and sub-levels that would fit in a mobile version but also stay consistent for dekstops. Another area that needed a few iterations was the "Make appointment" functionality, because it had to show a lot of information in relatively small area for mobile devices.
