Редизайн веб-сайту Ntegrity – UX Design Case Study
Починаючи з 2012 року, Ntegrity допомогла сотням організацій зібрати мільйони пожертв та надихнути на дії.
![](https://a.storyblok.com/f/91677/1339x839/3c58acc488/ntegrity-banner.png/m/1340x0)
Клієнт
Ntegrity - це відзначене нагородами агентство, що допомагає некомерційнии організаціям та державному сектору. Вони працюють з сотнями організацій щоб надихнути на зміни та сформувати впевненість в цифровому просторі.
All big ideas first start as a problem. Mine was simple: every agency I worked with only looked after themselves, not their clients.
Scope of work
Data collection
UX Research
Design Phase
User Testing
Development
QA
Технології
Для розробки сайту, наша команда обрала Nuxt.js в якості основного фреймфорку. Він містить всі необхідні заготовки, що дозволяють зробити розробку з серверним рендерингом легким та з високою швидкістю завантаження.
Пов'язані сервіси
Аудиторія
В співпраці з клієнтом, було розроблено декілька категорій користувачів та визначено, якою є їх ціль на веб сайті. Ми запитали себе: “Що отримав би кожен з них, якщо відвідає наш сайт?”. Відповіді дали змогу побудувати користувацький шлях.
![](https://a.storyblok.com/f/91677/1340x652/036f161274/user-flow.png/m/1400x0)
Візуальний стиль
При створенні візуального стилю, ми притримувались принципу “фокус на важливому”. Саме тому обрали мінімалістичний підхід. За рахунок використання вільного місця було привернуто увагу користувачів до важливого контенту.
![](https://a.storyblok.com/f/91677/2680x2250/bcc55a1442/visual_1.png/m/1400x0)
Ми не стали змінювати кольорову палітру, проте додали до неї строгості. Поєднання яскравих та контрасних кольорів на сторінці дають змогу швидко виділити та зчитати головне.
Відшовхуючись від логотипу, в якості основного шрифта для сайту, був обраний Graphik LCG. Він стілює в собі впевненість та динамічність. У поєднанні з кольоровою палітрою шрифт створив основу для нового веб-сайту.
![](https://a.storyblok.com/f/91677/1340x1690/b267800e96/font-and-color.png/m/1400x0)
Ідентичність
Розроблена нова візуальна ідентичність дасть змогу візуально запам’ятати та підвищити впізнаваність бренду. Яскрава графіка та палітра нагадують про цінності, які були закладені брендом: позитив, пристрасть та цілеспрямованість.
![](https://a.storyblok.com/f/91677/1340x495/38fa7bf555/growth-fot-good.png/m/1400x0)
Дизайн система
За основу було взято систему відступів, яка дозволила розробити цілісну структуру з якою взаємодіє користистувач.
![](https://a.storyblok.com/f/91677/2680x1532/f77c80e318/design_system.png/m/1400x0)
Результат
Створивши новий візуальний стиль, ми змогли виділити Ntegrity ceред конкурентів на ринку. За рахунок яскравих акцентів було покращено взаємодію з користувачем, представивши нові елементи навігації, елементи та блоки.
![](https://a.storyblok.com/f/91677/2680x6788/6d20bed41c/result.png/m/1400x0)
Так цей сайт адаптується під інші роміри екранів
Інші сторінки
На внутрішніх сторінках з’явився новий елемент стилю - геометричні об’єкти. Вони допомогли нам зв’язати сайт в єдиний стиль та одночасно зберегти контентно-орієнтований формат сторінок.
![](https://a.storyblok.com/f/91677/2680x3728/f5760969e5/other_pages-2.png/m/1400x0)
Технічна розробка
Команда розробників інтегрувала веб-сайт з CMS системою Storyblock. Модульна структура дала команді Ntegrity повний контроль над створенням нових сторінок, копіюванням та повторним використання розділів з легкістю та без додаткового програмування.
Легка кастомізація блоків. Всі блоки, що придатні для управління, полегшують управління вмістом навіть у складних макетах. Є можливість створювати різні компоненти, які дозволяють повторно використовувати ці компоненти в інших місцях, поповнюючи їх новим вмістом кожного разу, якщо це необхідно.
Проста ієрархія. Є змога створити свою власну ієрархію. Для запуску надійного середовища дуже важливо визначити різні етапи тестування вмісту, перш ніж він з’явиться в мережі інтернет.
Журнал активності. Відстежуйте зміни та відновлюйте до будь-якого моменту часу. Трапляються аварії. Storyblok завжди дозволяє відкочувати зміни з необмеженою історією версій, а видалені елементи вмісту можна відновлювати зі сміттєвого кошика.
Зміна розміру зоображення. Перетворюйте свої зображення на льоту.
Storyblok перетворює, оптимізує та кешує зображення для швидкого перегляду та оптимізації.
![](https://a.storyblok.com/f/91677/1348x1005/138707f2fc/tech_dev.png/m/1400x0)
ARX Corporate website
Обговоримо проєкт?
Дякуємо, що догортали аж сюди. Давайте перейдемо до наступного кроку. Для цього надайте короткий опис вашого майбутнього проєкту у формі праворуч.