Болници Acibadem
Тип на проекта:
Уеб Редизайн
Извършени услуги:
Уеб дизайн,
UI/UX
Клиент:
Аджибадем Сити Клиник е една от най-големите групи лечебни заведения в България с водеща роля в предоставянето на медицински услуги в различни области на медицината. Създадена през 2016 г., групата е обединение от лидерите в болничното здравеопазване в страната - Болница Токуда и City Clinic, заедно с един от най-големите здравни холдинги в Турция - Acibadem. Проектът е колаборация с Algorithmity
Цели на проекта
Клиентът беше в процес на мигриране на платформата на уебсайта си и искаше да използва възможността да направят „фейслифт“ дизайна си и да има модерен облик. Те се консултираха с мен, за да дам съвети относно потенциални проблеми с използваемостта, както и решения за потребителските затруднения. Клиентът вече имаше изграден брандинг и семпла цветова палитра, но също така поиска изчистено и сериозно усещане за дизайна, за да съответства на престижния статус на болничния бранд.
Други области за подобрение бяха типографията, където беше необходима по-силна йерархия. Визуалният дизайн се нуждаеше от по-добър цветови контраст, тъй като някои секции твърде много се сливаха една с друга като едно цяло, а други области имаха твърде много контраст, който напрягаше очите на потребителя.
Подход
Започнахме първо, като изпратихме общ преглед на потенциалните проблеми с използваемостта.
Съдържание: Началната страница съдържаше голямо количество текст, което можеше да бъде прекалено за доста от потребителите. Също така, тя не показваше важната информация на първо място. Решихме това, като преместихме основни секции като „намерете лекар“ почти в най-горната част на страницата, премахнахме излишните текстове и банери и използвахме повече графични елементи като икони, за да подобрим сканирането.
Навигация и структура: Основният проблем тук е, че навигацията беше много различна от стандартните модели, не беше предвидима и имаше твърде много елементи. Решението на това беше винаги да се поставя логото в горния ляв ъгъл и да се намалят размерите му, да се намали броя на елементите в навигацията и да се избегне менюто тип „хамбургер“ в декстоп версията. Намалихме претрупването с елементи, като например премахнахме контейнерите с плаващи бутони, и комбинирахме подобни страници като „блог“ и „новини“.
Стил: Въпреки че текущата цветова палитра е добра, тя беше използвана лошо по отношение на контраста. Типографията можеше да се подобри. Оформлението не беше последователно и подравнено.
Следващата стъпка беше да покажа на клиента, че дори с прости промени в оформлението и съдържанието, показани на Wireframes, настоящият му дизайн може се подобри доста. Предишният дизайн не се придържаше към строг грид, затова въведох 5-колонен грид. След като обсъдих бизнес нуждите и организирах структурата на съдържанието, продължих с high fidelity mock up на началната страница, за да определя новия стил и посока на дизайна.
Творческа насока
Решенията
-
Финалният дизайн използва цветова палитра, която подчертава белите и по-светлите цветове, които подхождат по-добре на външния вид на уебсайт за болница. Използвахме фини разлики в сините нюанси, за да привлечем вниманието към отделните секциите, а по-тъмните цветове запазихме за важни функционалности като „намерете лекар“, CTA бутоните и икони.
Типографията беше модернизирана и структурирана, за да подобри четливостта, което беше от решаващо значение за този тип уебсайтове, които често имат страници с много текст. Добавянето на визуални етикети и икони, както и различни дебелини на шрифта, улесни побирането на цялата информация за лекаря в съответната кутийка от списъка с доктори, както и за страницата с детайли. Това също така помогна за разбиването на информацията за лекаря в лесни за смилане секции.
Основната навигация беше оптимизирана и намалена до 7 елемента. Лентата на най-горното ниво беше запазена за подчертаване на най-важните функционалности като записване на час и проверка на резултатите. Излишните елементи бяха преместени във футъра.
Друго предизвикателство беше да се избегне прекалено „стерилното“ и скучно излъчване на страниците, като същевременно се запази сериозния тон. Това беше постигнато чрез включване на фини полупрозрачни графични елементи, както и смесване на фонови изображения. -
Функционалността за запазване на час беше една от най-важните за този проект и затова трябваше да подобрим предишната версия, за да улесним сканирането на наличните лекари и часовете. Въведохме tertiary цвят, за да улесним маркирането на разликите в календара. Добавихме още информационни съобщения, за да помогнем на потребителите на възраст, на която не са толкова технологично грамотни, а те обикновено с преобладаващата възрастова група за уебсайтове за здравеопазване.
-
Дизайнът на страницата на Диагностично-консултативния център беше друго предизвикателство, тъй като тя представлява отделна структурна единица в болничната организация и следователно трябваше да има завладяващ и запомнящ се външен вид, което беше постигнато чрез малко по-различнo оформление и организация на секциите, с повече графични елементи, които да показват предимствата, които предлага.
Многобройните различни програми за превенция за мъже и жени също трябваше да бъдат показани по начин, който не е твърде повтарящ се и все пак да привлича визуален интерес. -
За страницата с отделенията най-важната промяна беше организацията и структурата на съдържанието. Предложих да направим най-търсената информация, като работно време, телефонен номер за връзка и бутон за уговорка, по-видима, затова ги поставихме в контейнер и ги преместихме в горната част на страницата. Оптимизирахме пространството, като комбинирахме повтарящи се елементи в карусели.
Като страница от йерархия на 3-то ниво, тя се нуждаеше от добро визуално представяне на страничната навигация, което трябваше да бъде консистентно за различните размери на устройствата. Можете да видите повече подробности за резултата по-долу в раздела „Мобилна версия“. -
Страниците с медицински дейности и списъка с отделения нямат голямо съдържание, но проблемът тук беше, че то е повтарящо се и твърде професионално за обикновен потребител, който не е медицински специалист. Наличието на хубави графични икони, достатъчно разстояние между елементите, както и подреждането по азбучен ред, направиха много по-лесно намирането на правилното място за вашия медицински проблем.
-
Страницата за контакти трябва да е ясна и сбита. Ето защо фокусът тук беше върху ясното сегментиране на информацията в кутии и с допълнителната помощ на икони, но без почти никакви ненужни визуални елементи. Оставихме само 1 снимка, за да покажем как изглежда сградата на болницата, но също така и за да балансираме оформлението на десктоп версиите.
Мобилна версия
Сътрудничеството с разработчиците ни даде гаранция, че имаме приятен и удобен за потребителя responsive дизайн. Многостепенната йерархия на уебсайта беше предизвикателство, защото трябваше да измисля ясно визуално разграничение между различните нива и поднива, което да се побере в мобилната версия, но също така да остане консистентно и за големи екрани. Друга област, която се нуждаеше от няколко итерации, беше функционалността „Запазване на час“, защото тя трябваше да показва много информация в относително малка площ за мобилни устройства.
