DEFT — это интернет-магазин элитных дверей. Наша задача — сделать современный и удобный сайт компании. В наличии было техническое задание, которое предстояло переработать, и платформа бренда.
Вооружившись этой информацией, мы принялись уточнять детали. В итоге сложилось полное понимание того, какие задачи должен решать сайт.
Фрагмент из описания задачи в нашем Confluence
Начинаем изучать рынок, разбираться в потребностях и опасениях потребителей.
Аналитики не бывает много. Чем глубже мы погружались, тем больше появлялось информации, которую можно было использовать.
Переходим к сценариям. Собираем портреты пользователей и их цели. Есть две большие категории пользователей — обычный покупатель и дизайнер интерьера.
Дизайнер выполняет заказ на создание интерьера для конечного потребителя. Интерфейс сайта для него должен быть приятным, понятным и помогать находить нужные варианты дверей, а также помогать в презентации выбранных моделей конечному потребителю.
Конечный потребитель, кроме того что будет смотреть предлагаемые варианты от дизайнера, может сам выбирать нужные ему модели дверей.
В итоге получаем добротный документ, который можно использовать как фундамент для дальнейшего проектирования.
Собираем архитектуру проекта:
Сводим в таблицу категории и механику работы фильтра:
Картинка начинает складываться. Можно переходить к детальной проработке каждой страницы. Накидываем первые прототипы:
Согласовываем с первого раза. Тщательная аналитика на старте проекта всегда окупается. Прототипируем оставшиеся страницы:
Пора приниматься за дизайн. С концепцией определились сразу: минимализм, немного фешн, максимальная функциональность. Решаем не ограничиваться какой-то определенной контентной областью и задействовать весь экран. Четкие геометрические формы, без скруглений и всяческих плавностей, не кричащий цвет. Таким образом получаем строгий, современный и легкий стиль.
Перебираем с десяток вариантов первого экрана:
То же самое с блоком услуг:
В конечном счете, после многочисленных внутренних ревью, мы закончили с дизайном главной. В процессе решили делать скрытый футер, который появляется только тогда, когда он действительно нужен пользователю.
Переходим к внутренним. Дополнительно делаем макеты раскрытых пунктов фильтра в каталоге и модальные окна. Основная идея — минимум шума, большие фотографии, легкость, удобство заказа (минимум шагов). Получаем отзывчивый интерфейс, построенный на микроанимациях для взаимодействия с пользователем.
Адаптируем дизайн под смартфоны
и планшеты
Дизайн готов, собираем моушен с демонстрацией всех микроанимаций и передаем на верстку.
Затем — разработка и запуск.
Спасибо клиенту за возможность поработать над интересным проектом!