![](/assets/images/dist/moka-nail/main-img-1.jpg)
MOKA NAIL CLUB
Сайт з онлайн-курсами для майстрів манікюру
Цілі
Зробити повний редизайн інтернет-магазину "Містер Волет" зберігаючи стиль брендбука, виключаючи незручний функціонал для користувачів та покращення продуктивності сайту.
![](/assets/images/dist/moka-nail/default-logo-1.png)
Завдання
- Аудит існуючого сайту
- Складання ТЗ та плану робіт
- Виявлення болю ЦА
- Аналіз конкурентів та пошук кращих рішень
- Новий дизайн сайту
- Верстка та підвищення продуктивності
- Розробка
Команда проекту
1x Project Manager
2x Web-designer UX/UI
1x Front-end developer
1x Back-end developer
Редизайн
До редизайну
Перший екран не відповідає законам УІ, адже він надто високий, складно побачити фото повністю. Також відсутні пояснення при вході на сайт, тому користувач може загубитися в навігації.
![](/assets/images/dist/moka-nail/default_prototype-1.jpg)
Після редизайну
Перший екран виглядає гармонійно, чітко репрезентує цілі своїм відвідувачам, рекламує саме курси з манікюру, викликає довіру завдяки фото майстра, спонукає до реєстрації на курси.
![](/assets/images/dist/moka-nail/default_prototype-2.jpg)
Главная страница до редизайна
До редизайна главная страница стала однообразным каталогом схожих товаров, более того, мы не можем пользоваться фильтрами. Поэтому пользователь теряет концентрацию, отсутствуют акценты.
![](/assets/images/dist/moka-nail/default_prototype-3.jpg)
Главная страница после редизайна
Мы разнообразили главные блоки. Показали описания последних курсов, их цены, количество уроков, блок с электронной книгой, отзывы, фото с инстаграммы и т.д.
![](/assets/images/dist/moka-nail/default_prototype-4.jpg)
Список курсов до редизайна
Список курсов представлен картинками, выполненными в разных стилях, не имеющих фильтров и видно немного информации о курсе.
![](/assets/images/dist/moka-nail/default_prototype-5.jpg)
Список курсов после редизайна
Страница курсов выполнена в одном стиле, доступны фильтры для удобства поиска, указанные цены, можно вместить большее описание курса.
![](/assets/images/dist/moka-nail/default_prototype-6.jpg)
Додали сторінку контактів
Страница контактов помогает пользователям сайта без проблем связаться с авторами курса.
![](/assets/images/dist/moka-nail/default_prototype-7.jpg)
Використовувані технології
![](/assets/images/dist/teh-logos/bitrix-logo.png)
![](/assets/images/dist/teh-logos/logos_sas.png)
![](/assets/images/dist/teh-logos/logos_prom.png)
![](/assets/images/dist/teh-logos/logos_googleapi.png)
Обсудим проект?
Крутой проект начинается с заполнения этой формы.