UX-DESIGN OF THE UMMC CLINIC
HEALTHCARE CENTER WEBSITE

VISIT WEBSITE
Project start
October 2016
Website launch
April 2017
Ongoing collaboration
Customer

UMMC European Healthcare Center is the largest healthcare and diagnostics facility in Yekaterinburg.It includes a multi-disciplinary clinic for patients of all ages, a pediatric clinic, a center for Tibetan medicineand a dental clinic. The staff includes 287 doctors, and a total of 497 healthcare personnel.

Objectives

Create a new website which will:
- attract more patients;
- strengthen the loyalty of long-standing patients;
- reduce the call center’s workload.

Integrate the internal information system into the website so that the price list and  schedules of all doctors on the website will be up-to-date.

AUDIT AND UX-DESIGN

The first thing we did was to audit the old website: we found out where the visitors are coming from and what search queries lead to the website, and also analyzed the inbound traffic. From the information we thus obtained, we determined the scenarios of the behavior of new and returning customers depending on what they are looking for and how they find their way to the website.This way we identified the priority trends, specialists and healthcare services  from the point of view of both t business and among users. We designed the website structure and prepared 35 page prototypes.

WE'LL HAVE THE AUDIT CASE SOON

AUDIT AND UX-DESIGN

The first thing we did was to audit the old website: we found out where the visitors are coming from and what search queries lead to the website, and also analyzed the inbound traffic. From the information we thus obtained, we determined the scenarios of the behavior of new and returning customers depending on what they are looking for and how they find their way to the website.

This way we identified the priority trends, specialists and healthcare services  from the point of view of both t business and among users. We designed the website structure and prepared 35 page prototypes.

WE'LL HAVE THE AUDIT CASE SOON

EUROPEAN
HEALTHCARE CENTER

To get started we prepared mockups for the customer funnel of a specific user scenario, from visiting the home page to scheduling an appointment.Using this funnel as a reference, we had the page design approved, and we prepared the rest of the mockups. Overall 45 screens and 7 UI kit files.

To get started we prepared mockups for the customer funnel of a specific user scenario, from visiting the home page to scheduling an appointment.Using this funnel as a reference, we had the page design approved, and we prepared the rest of the mockups. Overall 45 screens and 7 UI kit files.

VIEW MORE

HOME PAGE

HOME PAGE

Each page is a modular construction, consists of blocks of content.

Each page is a modular construction, consists
of blocks of content.

date
title
description
tags

REGISTRATION

REGISTRATION

The patients can select by themselves how they wish to schedule an appointment.

The patients can select by themselves how they wish to schedule an appointment.

Selecting by specialization

Selecting the doctor by specialty (to find a surgeon, for example);

Selecting by specialization

Selecting the doctor by specialty (to find a surgeon, for example);

Selecting doctor by name

Searching for a specific doctor by name (based on a recommendation or previous experience);

Selecting doctor by name

Searching for a specific doctor by name (based on
a recommendation or previous experience);

Need help making an appointment

Giving name and telephone number so that a clinic administrator can call back the patient;

Need help making an appointment

Giving name and telephone number so that a clinic administrator can call back the patient;

Selecting a manipulation

Choosing a specific service or manipulation when doctor referral has already been given.

Selecting a manipulation

Choosing a specific service or manipulation when doctor referral has already been given.

CONTENT BLOCKS GROUPING

The site has an adaptive design that can easily handle any screen resolution because of underlying base grid and modular structure.

CONTENT BLOCKS GROUPING

The site has an adaptive design that can easily handle any screen resolution because of underlying base grid and modular structure.

Context banners

Context banners visually break up large text blocks into smaller ones thus facilitating information perception. They help customers navigate between pages for an optimal scenario and get to their final goal faster: select a doctor or find out how to prepare for the appointment.

Context banners

Context banners visually break up large text blocks into smaller ones thus facilitating information perception. They help customers navigate between pages for an optimal scenario and get to their final goal faster: select a doctor or find out how to prepare for the appointment.

PATIENT’ ACCOUNT

PATIENT’ ACCOUNT

A patient Personal Account will be available on the website in the near future. A history of all visits to the clinic and the results of the examinations will be stored in the patient's account, where the patient can also make an appointment with the doctor or check appointment details.

A patient Personal Account will be available on the website in the near future. A history of all visits to the clinic and the results of the examinations will be stored in the patient's account, where the patient can also make an appointment with the doctor or check appointment details.

A patient Personal Account will be available on the website in the near future. A history of all visits to the clinic and the results of the examinations will be stored in the patient's account, where the patient can also make an appointment with the doctor or check appointment details.

INTERNAL PAGES

We prepared 45 screens: pages for doctors, medical  specialisations  and departments,  news and promos section, as well as the price list and the website search page.

INTERNAL
PAGES

We prepared 45 screens: pages for doctors, medical  specialisations  and departments,  news and promos section, as well as the price list and the website search page.

ICONS

We designed a custom icon set for the website.  The icons are visually consistent with the UMMC Clinic logo and have the same color scheme in order to provide the stylistic consistency.

ICONS

We designed a custom icon set for the website.  The icons are visually consistent with the UMMC Clinic logo and have the same color scheme in order to provide the stylistic consistency.

...and more than 20 vector icons

COLORS

#bac3cb
#f1f3f4
#8499a7
#edf2f5
#232427
#fe5403
#ff8500
#ffeed9

COLORS

#bac3cb
#f1f3f4
#8499a7
#edf2f5
#232427
#fe5403
#ff8500
#ffeed9

FONTS

Core sans
H1
bold, 48px
bold, 24px
h2
medium, 40px
H3
bold, 20px
medium, 14px
H4
bold, 14px
Regular text
regular, 16px
Menu title
MENU ITEM
Заголовок меню
пункт меню
Core sans
H1
bold, 48px
bold, 24px
h2
medium, 40px
H3
bold, 20px
medium, 14px
H4
bold, 14px
Regular text
regular, 16px
Menu title
MENU ITEM

COPYWRITING
AND EDITING

Apart from UX design, we created content. Half of the old website pages about specialist consultations, disciplines and services were missing text. Before launching the new website, we have written mini articles that help the patients understand when they should visit a specific doctor.

RESULTS

We launched the new website on April 16 2017. Within the first 2 months, visit depth and session duration have improved, despite the fact that website content is still being added, which could have caused both metrics to deteriorate. We are continuing to monitor the changes.

visit depth
session duration
bounces
old website
3.29
3:03
14%
new website
3.96
3:20
13.7%

RESULTS

We launched the new website on April 16 2017. Within the first 2 months, visit depth and session duration have improved, despite the fact that website content is still being added, which could have caused both metrics to deteriorate. We are continuing to monitor the changes.

visit depth
session duration
bounces
old website
3.29
3:03
14%
new website
3.96
3:20
13.7%

REVIEW

REVIEW

Speaking about the process, the guys have accomplished an incredible feat: they did not have the opportunity to start on a clean and fully controlled environment, but had to work on legacy developments instead. JetStyle have performed the complex task of linking the website to our healthcare center's business management system; now you can schedule an appointment with any doctor online, depending on the doctor's schedule and workload on a specific date. The functions of the website are intuitive; enabling the website to be informative, useful, convenient and ergonomic!

The new, stylish and clean European website design now fully complies with the name of the clinic: "European Healthcare Center". Easy administration of the website by the clinic's employees makes day-to-day content additions a breeze. All this has been accomplished in a fantastic time frame – 9 months. That is how our new website was quickly and enjoyably born.

The following areas of expertise of JetStyle were a nice addition to the core ones: the guys did copywriting of small articles for the website. Not only do they speak their web design-specific geek-speak, but they are also well versed in good old human!

Their large and all-round team enables them to tackle any issues at any stage of negotiation and approval. If we cannot accomplish something we have envisioned, then JetStyle suggests several alternatives with the same functionality, all suitable for implementation. The guys are always contactable (literally 24/7/365), and most importantly JetStyle are flexible (when necessary, where necessary and to the appropriate extent)

Borova Natalia Vladimirovna,
Head of Marketing

THE TEAM

Project Manager
Vyacheslav Anisimov
Project Manager
Oleg Frolov
Project Manager
Yury Romanenko
Web Analyst
Evgeny Kuznetsov
Designer
Artyom Kupelsky
Designer
Svetlana Shitova
Developer
Ivan Marchenko
Developer
Ivan Bogdanov
Developer
Dmitry Cheburakha
Copywriter
Renata Khusainova

Find out how we can make solution like this work for you!

Other projects

We work on many wowable and thrilling projects. Here are a few more of them: