Обзор проекта

Продукт

DEARFUTURE — интернет-магазин модной унисекс-одежды, аксессуаров и подарков. DEARFUTURE использует современную, неординарную и минималистскую эстетику, создавая опыт, в котором контент и функциональность выходят на передний план пользовательского опыта.

Проблема

Существующие интернет-магазины часто имеют загроможденный дизайн, неэффективные системы просмотра товаров и запутанный процесс оформления заказа.

Цель

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

Приступаю к дизайну

Карта сайта

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

Вайфреймы

Бумажные вайфреймы

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

Цифровые вайфреймы

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

Адаптивный дизайн

Поскольку клиенты DEARFUTURE будут посещать сайт с самых разных устройств, я начала работать над дизайном для дополнительных размеров экрана, чтобы убедиться, что сайт будет полностью адаптивным.

Прототипы

Чтобы подготовиться к тестированию, я создала прототип с низкой точностью, который вы можете посмотреть здесь. Я использовала этот прототип для проведения модерируемого пользовательского тестирования с 5 участниками.

Мой высокоточный прототип включает в себя изменения дизайна, сделанные после пользовательского тестирования. Посмотреть высокоточный прототип сайта DEARFUTURE можно здесь.

Финальный дизайн

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

Главная страница

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

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

Каталог

Информационная архитектура DEARFUTURE имеет структуру каталога. Каталог содержит категоризированные данные, причем верхний уровень состоит из равных элементов, которые могут содержать подчиненные элементы. Категории верхнего уровня DEARFUTURE группируют типы предметов (одежда, аксессуары, подарки и т. д.), поэтому их можно рассматривать по отношению друг к другу.

Принятие структуры каталога позволяет пользователям просматривать интересующую категорию, сравнивать товары друг с другом и просматривать сведения о конкретном товаре.

Страница товара

Чтобы помочь пользователям исследовать товары, я разработала отдельную страницу для каждого товара, находящегося на сайте. Моя цель состояла в том, чтобы разработать страницу, которая будет интуитивно понятной для навигации, более привлекательной с изображениями и демонстрирующей четкую визуальную иерархию. Отзывы позволяют пользователям принять правильное решение, а кнопка БЫСТРАЯ ПОКУПКА предлагает быстрый процесс оформления заказа.

Оформление заказа

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

Гайд по стилю

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

Логотип

Типографика

Заголовки

Текст

Цветовая палитра