Esta.

web design

Esta clinic

Description
Dental clinic "Esta" provides the highest level of treatment from the best dentists in Moscow. The qualifications and experience of dentists and surgeons allow to perform the most complex procedures and operations.

The project was already started 3 months before. I joined the team as designer hire to improve the user experience and redesign UI. Worked on various types of challenges closely with developers, copywriter, co-founder and product manager.

Problem
The target audience of the site is divided into two groups: a new client and a regular one. To satisfy both types of clients, it was important to present the information clearly, highlight the benefits and show more daily life in clinic.

We have to minimize the errors in the form of application. Most of users put the wrong phone number and because of that the dentistry lost clients.

We have to catch and keep attention on the first 3 seconds of visiting the site.

Solution
A solution was to put the block with the CEO message as a quote.

Also add an auto mask with country code, that automatically verified the country where the user located.

A solution was to put a video about the clinic on the first screen.

Role: UX/UI Designer
Tools: Adobe Photoshop
Client: Esta clinic
Year: 2019 - 2021

https://esta-clinic.ru/

back

Process

Although no design process is as perfect as we'd like. We can roughly define the process in the following 5 steps. In the sections below, we'll go into more detail about each step and how we came to the final solution.

Desk research
Customer feedback

Empathize

Identify needs
Establish principles

Define

Task flows
Lo-Fi Sketches

Ideate

Hi-Fi mockups
User testing
Copy localization

Prototype

Launch tests on live
customers and evalute
results

Test

Empathize

We looked into what currently Existed and aimed to better understand what our customers were currently doing and why.

types of research
We looked at many different points of data — both qualitative and quantitative from internal sources, and qualitative from external sources.

phase 1

1

// Usage data

2

// User feedback

3

// Comparative analysis

internal

external

// Usage data

We had two data resources to work with. Data from Google analytics and Yandex metrics from a marketer. Data from an administrator who received oral feedback from patients. Since most of the data was on the main page, we decided to start working from it.

// User feedback

From the marketer, it turned out that users have errors when entering a phone number in the application.

We learned from clients that information about doctors and the personal appeal of the CEO inspires more confidence when booking an appointment. They also indicated that they would like to see more of the real life of the clinic on the site.

// Comparative analysis

After analyzing competitors, we realized that a video about the clinic on the first screen has a better effect on conversion.

Define

We decided to test the new layout of blocks with information about dentists. Also add a block with the clinic's Instagram and a block with photos. Test a new feature in the booking an appointment form.

phase 2

We run a workshop to expand the ideas of each of us and consult with the developers. The marketer suggested adding a block with FAQ. And I proposed to make cards with questions, by clicking on which, there will be a redirect to a landing page with a service.

// COLLABORATIVE IDEATION

Ideate

We worked through several different iterations and user flows to see what might be the most meaningful user journey for the purpose of this test.

phase 3

Based on the information we gathered in the workshops, we got to work on various wireframes both from a structural and an interaction perspective.

// USER FLOWS & WIREFRAME EXPLORATIONS

From testing to final idea

I want to show the result of changes that came after testing. And how this changes reflected the conversion.

phase 4

We tested the idea with a video about the clinic on the first screen . This showed us that the new user's attention caught and he / she continued scrolling to the next blocks .

// First block

Click the arrow to see approved version

Because of the feedback that "CEO inspires more confidence when booking an appointment" we decided to put the photo of the CEO and his speech instead of the separate quote.

// Quote

Click the arrow to see approved version

✅

Due to the fact that users entered an incorrect phone number, we decided to change the form. Added a function with a mask that automatically splits the phone number to the required amount of numbers. Thus, the amount of errors in the application was reduced.

We also added the ability to write directly in the WhatsApp, highlighting the name of the messenger in the corporate color. What increased the amount of appeals directly.

// Application form

Click the arrow to see approved version

✅

To immerse the user in the atmosphere of the clinic , we have added two blocks:

1. With real photos of doctors , treatment process and clinic photos

2. Instagram, where you can follow the work of the clinic in real time. Also, this feature allows to direct the traffic from website to Instagram and increase the amount of followers.

// Adding life content

✅

We decided to do FAQ cards, by clicking on which, the user will go to the secondary page of the website. There will be a response to the question and further information on the service.

We were testing this idea during one month. The marketer looked into data and the clickbait rate for these questions was minimal. We decided to put this block on the top of the website to short the time route of the user to this block . But the different location of the block didn't solve the problem . Therefore , this block did not pass the test and we removed it.

// Idea that failed testing