Как я решаю дизайн-задачи?

Статья написаная в 2018 году.

Эта статья для моих потенциальных клиентов, она покажет вам как я мыслю при решении разных, в том числе — сложных задач. Так же, она будет полезна для дизайнеров. Немного лирики. Когда вы ищите дизайнера, вы ориентируетесь только на визуальную часть, то есть смотрите на готовый и упакованный дизайн. И довольно трудно понять какая задача стояла перед дизайнером, и как он ее решал, то есть как он мыслил, ведь неясно как он будет справляться со сложной и нестандартной задачей. Может выйти так, что вы увидели красивый дизайн в портфолио, а на самом деле дизайнеру уже дали проработанный прототип и готовые качественные картинки, а он просто все это собрал. И вот, когда вы с ним начинаете сотрудничать, вы понимаете что этот дизайнер не улавливает, и не понимает вашу задачу, хотя, у него в портфолио классные работы. Вот почему я решил создать этот кейс, что бы вы смогли хоть немного забраться в мою голову, и посмотреть как я мыслю, как я подхожу к решению задач. G.

Может выйти так, что вы увидели красивый дизайн в портфолио, а на самом деле дизайнеру дали уже проработанный прототип и готовые качественные картинки, а он просто все это собрал


Valentain

Я расскажу вам про два блока из landing page, которые я разрабатывал для компании Valentain, и их нового продукта Парабейк. ЦА: B2B.

Парабейк — это готовая замороженная основа для пиццы.

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

Первый блок

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

Готовый первый экран
Мое письмо со сценарием для видео

Решение: Было много разных идей — некоторые из них отсеялись из-за сложной технической части, другие — были слабы. Осталась одна, которая решала свою задачу: Парабейк на столе. К нему прилетают топинги, и получается готовая пицца! Вроде просто, но с другой стороны — много смысла. Мы как бы показываем, смотрите как просто — топинги положил = пицца готова. Возможно, стоило бы показать весь путь — прилетают топинги, садятся на парабейк, затем, они улетают в печь, и прилетает готовая пицца. Затянуто, но реалистичней, поэтому, это тоже вариант, и его можно развивать дальше.

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

Второй блок

Задача: Нужно сравнить продукт парабейк с другими видами приготовления основы для пиццы.

Таблица с задачей
Прототип

Решение: В этапе прототипирования я понял, что можно не сравнивать Парабейк с четырьмя другими вариантами, а можно объединить их, и оставить только: Парабейк vs все остальные. Так, мы избавляемся от перегруза, и у нас появляется фокус: «вот есть мы, а вот все остальные». Так же, воспринимать информацию становится легче.

Вот есть мы, а вот все остальные

Готовый дизайн

В этапе дизайна я понял, что можно и вовсе отказаться от плюсов и минусов, от «да» и «нет», и оставить только — «нет необходимости» для Парабейка, и «придется потратиться» для всех остальных. Плюс, мы сократили высоту блока, и весь контент стало воспринимать еще легче. Сравните полученный вариант с первоначальной таблицей. Так же, использовав цвет — мы добиваемся зрительного восприятия, что там где темно и мрачно — плохо, и не эффективно, а где светло и контрастный цвет — хорошо, и это правильный выбор. Психология. Цвета выбраны не рандомно, а использовались фирменные, что бы усилить запоминаемость бренда.


Нумизмат

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

Задача: Разработать прототип одно-экранного сайта, в который нужно упаковать 13 смыслов.

13 смыслом в 1 экран? Такое возможно не перегрузив страницу, и при этом решив задачу? Возможно всё!

Какие смыслы (по приоритетам) должны быть заложены в прототипе.

1.Максимально реальную цену мы сможем озвучить только в нашем уютном офисе. Обоснование смысла: Не всегда по фотографии возможно определить качество. Бывали случаи, когда присылали фото одной стороны монеты, а когда они приезжали — на другой стороне монеты исцарапаны, и т.п. Не всегда получается определить подлинность монеты по фотографии. Мы проверяем вес монеты, удельный вес, просматриваем монету под микроскопом

2. Качественные, редкие монеты готовы купить выше рынка, в зависимости от нумизматической редкости и востребованности

3. Безопасность офиса и ваших денег

4. Официально подписываем договор

5. 7 дней в неделю

6. Бесплатная профессиональная оценка — в среднем за 5 минут

7. Выплачиваем до 2 млн. рублей в день обращения

8. Офис в 2 минутах ходьбы от метро Чеховская, Пушкинская, Тверская

9. Обмен ваших монет на наши монеты (* с учетом нашего интереса)

10. 17 лет на рынке нумизматики

11. Видео НТВ + 1 канал + Россия

12. 4 эксперта нумизмата со стажем от 10 до 30 лет

13. Оцениваем монеты любой сложности и всех направлений

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

Решение: Если это не был бы конкурс, то первое что я сделал бы, это расспросил — почему именно один экран, и так далее — задал бы разные вопросы, что бы глубже погрузится в задачу, и возможно, поняв истинные намерения, я бы пошел совсем другим путем, например: выбросил все лишнее и оставил только главное, или наоборот — немного увеличил длину лендинга. Но это был конкурс, и мне еще никто не заплатил, поэтому я решил расслабиться, и принять вызов (отдых в работе, если можно так сказать). Мне было сложно представить как можно упаковать всю эту информацию, и при этом не перегрузить страницу. Но когда есть вызов, задача — меня не остановить!

Прототип

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

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

хе хе

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

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

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


Sika. Дальний Восток.

Я разрабатывал дизайн сайта для компании: «Sika. Дальний восток», готовый кейс я не стал выкладывать, т.к. не считаю его интересным для клиентов. Но есть один примечательный, и в какой-то степени сложный блок, и мне бы хотелось рассказать о нем.

Задача: Рассказать о проблеме, рассказать о решении этой проблемы, и показать материалы, которые были использованы в работе.

Дизайн-решение этой задачи

Решение: Изначально клиент закладывал, что это будет не один блок, а как минимум два: проблемы и решения. И это можно было легко сделать, но я подумал вот о какой заморочке: вот человек видит проблему, и что бы соотнести с ней решение, ему нужно скролить вниз. Быть может, на дестопах это еще пойдет, но когда речь заходит о мобильниках, тогда — всё совсем плохо. Когда я понял это, то решил что эти блоки будут скомпонованы. Вопрос — как?

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

На мобильной версии мы решили проблему с двумя и более решениями — это свайп.

Leave a Comment