Стартовали новые рейтинги digital-подрядчиковУспейте принять участие! Предварительные результаты.
Вячеслав Козин
GAP | E-commerce редизайн
Вячеслав Козин
#Проектирование сайта#Дизайн сайта#Фирменный стиль

GAP | E-commerce редизайн

113 
Вячеслав Козин Россия, Нижний Новгород
Поделиться:
GAP | E-commerce редизайн
Компания

Uprock

Сфера

Маркетинг, дизайн, реклама

Регион

Россия, Москва

Сдано

Октябрь 2022

Задача

Проблемы:

- Интерфейс был неудобным, простым и скучным.

- Наличие множества мелких ошибок: недостаточное внимание к фото товаров, избыток пустого пространства и ненужной информации.

- Главная страница была перегружена нерелевантным контентом, из-за чего пользователи просто её игнорировали.

- Невосприимчивость информации: элементы интерфейса сливались, что усложняло взаимодействие с сайтом.

Решение

- Увеличить акцент на продукте, чтобы сайт эффективно продавал товары.

- Создать уникальный стиль и идентичность бренда, отделяя его от конкурентов и подчёркивая позиционирование.

- Подчеркнуть современность бренда и его соответствие трендам.

- Разработать современный, привлекательный и удобный для пользователей интерфейс.

1Визуальный анализ и заполнение брифа

Первым шагом стало изучение текущего сайта: я проанализировал и зафиксировал формы, цвета, шрифты и визуальные решения, которые уже используются. Это позволило сохранить восприятие бренда, сложившееся у пользователей, и применить эти элементы в будущем.

Имея перед собой поставленные задачи и представление о визуальной идентичности бренда, я приступил к заполнению брифа. Этот этап помог сформировать чёткое понимание процесса работы и определить ключевые ориентиры для редизайна.

2Конкурентный анализ, изучение структуры сайта и заполнение таблицы сущностей и технического задания

Следующим этапом стал конкурентный анализ. Я изучил сайты близких по айдентике брендов, таких как Uniqlo, Reserved и Zimmermann. Внимательно проанализировал их визуальные решения, структуру и способы привлечения клиентов. Особое внимание уделил их проблемам и недочётам, чтобы избежать подобных ошибок в своём проекте. Этот анализ помог определить уникальное торговое предложение (УТП) для GAP и лучше понять текущие рыночные тенденции.

Затем я разработал точную структуру сайта, оставив только полезную и необходимую информацию для пользователей. Также была создана таблица сущностей для товаров магазина, где я выделил ключевые атрибуты товаров по их значимости для пользователей и определил, какой контент должен сопровождать каждый из них. Это важный этап в создании любого интернет-магазина, так как товары – это лицо компании и ключевой элемент для клиентов.

Последним этапом UX-анализа стало составление технического задания. Я систематизировал всю собранную информацию, поставил чёткие задачи и был полностью готов к началу работы над проектом.

3Cоздание функциональных прототипов, первое приближение, поиск референсов и детализация

После завершения обширной UX-аналитики я приступил к работе с визуалом. Первым шагом стало создание функциональных прототипов для каждой страницы сайта. В них я детально указал все блоки, их содержимое и оценил полезность каждого элемента для пользователей. Затем я разработал первое приближение дизайна, чтобы наметить общий вид будущих страниц.

На основе прототипов и первых набросков я начал поиск референсов на платформах, таких как Behance, Awwwards, Dribbble, UIJar, Godly, Brutalist, Minimal Gallery, Httpster, Best Website Gallery и других. Эти ресурсы помогли мне найти современные, эстетичные и функциональные решения, которые соответствовали поставленным задачам.

Далее, сопоставив первые приближения и найденные референсы, я приступил к детализации страниц. Это были почти финальные версии, которые отражали мой замысел, подходили по визуальным решениям и соответствовали всем целям проекта. На этом этапе оставалось добавить медиа-контент и внести финальные правки для достижения идеального результата.

4Создание визуальной концепции, отрисовка адаптивов и финализация

На заключительном этапе, добавляя медиа-контент в готовые страницы, я выявил ряд несоответствий: где-то был избыток визуального шума, а где-то, наоборот, пустота или недостаток контента. Я тщательно проработал эти аспекты, устранил ошибки и внёс необходимые правки. В результате я получил финальные версии страниц, которые полностью соответствовали поставленным задачам, делая сайт современным, удобным, эстетичным и визуально привлекательным.

После этого я разработал адаптивные версии сайта для планшетов и мобильных устройств, а также создал полный и удобный UI-Kit.

Заключительным шагом стало оформление проекта в привлекательный кейс для публикации в портфолио. Это позволило не только продемонстрировать проделанную работу, но и подчеркнуть мой подход к созданию комплексных решений.

Результат

- Разработал редизайн 7 страниц интернет-магазина с проработкой всех состояний и адаптивных версий.

- Усилил акцент на продукте, сделав сайт более эффективным инструментом для продаж.

- Создал уникальный стиль и идентичность бренда, что позволило выделить его среди конкурентов и подчеркнуть позиционирование.

- Обновлённый дизайн отразил современность бренда и его соответствие актуальным трендам.

https://www.behance.net/gallery/159310619/GAP-E-commerce-redesign

Стек технологий


Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

Хотите заказать похожий проект?

Оставить заявку