Редизайн веб-сайту Ntegrity – UX Design Case Study

Ntegrity - це відзначене нагородами агентство, що допомагає некомерційнии організаціям та державному сектору. Вони працюють з сотнями організацій щоб надихнути на зміни та сформувати впевненість в цифровому просторі.

Scope of work

Data collection

Client briefing / Platform Analysis / Customer Feedback analysis

UX Research

Target Audience Analysis / Competitors study / Jobs-To-Be-done

Design Phase

User Flows / UI Design / Clickable prototype

User Testing

Prototype Testing / Design interaction

Development

Arhitectior / Programing / Code review / Devops / Deploement / Cloud hosting

QA

Manual testing / Automation testing / Security scanning / Load testing

Технології

Для розробки сайту, наша команда обрала Nuxt.js в якості основного фреймфорку. Він містить всі необхідні заготовки, що дозволяють зробити розробку з серверним рендерингом легким та з високою швидкістю завантаження.

В співпраці з клієнтом, було розроблено декілька категорій користувачів та визначено, якою є їх ціль на веб сайті. Ми запитали себе: “Що отримав би кожен з них, якщо відвідає наш сайт?”. Відповіді дали змогу побудувати користувацький шлях.

При створенні візуального стилю, ми притримувались принципу “фокус на важливому”. Саме тому обрали мінімалістичний підхід. За рахунок використання вільного місця було привернуто увагу користувачів до важливого контенту.

Ми не стали змінювати кольорову палітру, проте додали до неї строгості. Поєднання яскравих та контрасних кольорів на сторінці дають змогу швидко виділити та зчитати головне.

Відшовхуючись від логотипу, в якості основного шрифта для сайту, був обраний Graphik LCG. Він стілює в собі впевненість та динамічність. У поєднанні з кольоровою палітрою шрифт створив основу для нового веб-сайту.

Ідентичність

Розроблена нова візуальна ідентичність дасть змогу візуально запам’ятати та підвищити впізнаваність бренду. Яскрава графіка та палітра нагадують про цінності, які були закладені брендом: позитив, пристрасть та цілеспрямованість.

За основу було взято систему відступів, яка дозволила розробити цілісну структуру з якою взаємодіє користистувач.

Створивши новий візуальний стиль, ми змогли виділити Ntegrity ceред конкурентів на ринку. За рахунок яскравих акцентів було покращено взаємодію з користувачем, представивши нові елементи навігації, елементи та блоки.

Так цей сайт адаптується під інші роміри екранів

На внутрішніх сторінках з’явився новий елемент стилю - геометричні об’єкти. Вони допомогли нам зв’язати сайт в єдиний стиль та одночасно зберегти контентно-орієнтований формат сторінок.

Команда розробників інтегрувала веб-сайт з CMS системою Storyblock. Модульна структура дала команді Ntegrity повний контроль над створенням нових сторінок, копіюванням та повторним використання розділів з легкістю та без додаткового програмування.

• Легка кастомізація блоків. Всі блоки, що придатні для управління, полегшують управління вмістом навіть у складних макетах. Є можливість створювати різні компоненти, які дозволяють повторно використовувати ці компоненти в інших місцях, поповнюючи їх новим вмістом кожного разу, якщо це необхідно.

• Проста ієрархія. Є змога створити свою власну ієрархію. Для запуску надійного середовища дуже важливо визначити різні етапи тестування вмісту, перш ніж він з’явиться в мережі інтернет.

• Журнал активності. Відстежуйте зміни та відновлюйте до будь-якого моменту часу. Трапляються аварії. Storyblok завжди дозволяє відкочувати зміни з необмеженою історією версій, а видалені елементи вмісту можна відновлювати зі сміттєвого кошика.

• Зміна розміру зоображення. Перетворюйте свої зображення на льоту.
  Storyblok перетворює, оптимізує та кешує зображення для швидкого перегляду та оптимізації.