Как Заказчик настаивал на Comic Sans и другие закулисные моменты реализации сайта для проекта RICE

Расскажу о некоторых закулисных моментах реализации веб-сайта для проекта РИС по доставке блюд японской кухни, который был запущен в г. Хабаровск.

Моя роль в проекте – главный дизайнер.

Как и в любом подобном проекте в нашей студии на меня были возложены следующие задачи:

  • Взаимодействие с заказчиком, брифинг;
  • Исследование пользователей;
  • Прототипирование;
  • UI + UX;
  • Тестирование пользователей;
  • Контроль исполнения front-end.

Заказчик – Вадим: основатель небольшой японской кухни в Хабаровске.

Целевая аудитория

Мужчины и женщины в возрасте 18-30 лет, которые слишком заняты, чтобы ходить по заведениям, но в то же время желающие побаловать себя японской кухней.

Основная задача

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

Его основные функции:

  • Каталог товаров;
  • Корзина;
  • Список акции;
  • Информация о компании и др.

Дизайн-задача

Проведя брифинг с Вадимом понял, что онлайн-магазин должен быть минималистичным и функциональным, темным с использованием зеленого цвета (связь с посевным рисом – традиционным японским блюдом).

Фон и сам магазин должен быть темным, и вот почему:

Дизайн-философия заказчика

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

Вадим, заказчик проекта

– сказал Вадим, когда мы познакомились ближе.

Кстати, возможно, поэтому сейчас так популярны "темные темы".

User Research

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

Исследование проводилось в виде интервьюирования в общежитии, среди студентов, которые уже заказывают блюда японской кухни.

Результаты – ниже:

Вообще эта статья написана уже через год после запуска проекта. И только на момент её написания, по возвращении к результатам исследования, понял, что не реализована важная функция – поиск. Хотя исходя из ответов уже на первый вопрос становится понятно, что она необходима.

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

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

Comic Sans

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

Но мои дизайнерские аргументы против использования Comic Sans в проекте не работали, поэтому решил предложить Вадиму следующий ход:

я присылаю макет со шрифтом Comic Sans и 2 макета с другими, мною выбранными. Далее – Вадим показывает все 3 макета своим друзьям, знакомым и они высказывают свою точку зрения.

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

Проблемы в ходе реализации

В итоге мы все же запустили проект, но столкнувшись с некоторыми проблемами:

1. Фотографии плохого качества

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

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

Спустя некоторое время Вадим присылает их, но, видимо, нанятый фотограф оказался не совсем компетентен, либо был ограничен ресурсами – фотографии были не эстетичными и не подходили по композиции к макету. Тут уже и я промахнулся, т.к. поздно прислал требования по размерам фотографий.

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

2. Front-end

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

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

3. Кража (или нет) идеи

Еще на ранней стадии реализации проекта в городе кто-то запустил тоже сервис доставки блюд японской кухни и с таким же названием РИС.

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

Инсайты

А из самого проекта я вывел следующее:

  1. Светлый контент на темном фоне в большинстве UI/UX-случаях приоритезирует контент.
  2. Если дизайн, выполненный по требованию заказчика, не нравится дизайнеру – это не означает, что он плох. Возможно, Заказчик лучше знает свою аудиторию, их предпочтения. Но возможно и обратное – когда дизайнер лучше знает ЦА.
    И это, считаю, главная задача дизайнера – угождать дизайном не дизайнеру или заказчику, а конечному пользователю.
  3. Надо быть аккуратнее при работе с проектами, не рассказывая о нем кому-либо. NDA (non-disclosure agreement – соглашение о неразглашении) важен.
    Особенно касается стартап-проектов: у кого-то может иметься больше ресурсов и амбиций на реализацию, пока вы в это время усердно работаете над прототипом.

С дизайн-кейсом проекта можете ознакомиться на Behance.

На тот момент это был один из первых моих кейсов, над которым я корпел.

Результат должен был выйти следующий:

P.S. С тех давних пор все пошло не так, что теперь макет и реальность сильно разнятся, но все же ссылку на проект даю – ris-khv.ru.

0
38 комментариев
Написать комментарий...
shmitter

Статья напоминает переживания пятиклассника, который хотел покататься на коньках. Как он их надевал, открыл для себя как проще шнуровать. Потом его дядя Саша отвёз на каток, но дал покататься всего 40 минут, потому что надо было ехать назад. Надо было все 40 минут кататься, а не отдыхать каждые 15 минут, так бы больше получилось. Это важный инсайт, надо поделиться со всеми. Ещё добавить диаграмму количества проеханных кругов на катке от времени.
Автору желаю продолжать писать, к выбору тему подойти тщательно.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Рустам Байбулатов
Автор

Радикально поняли мои взгляды. Но, может, в некоторых моментах Вы и правы.

Ответить
Развернуть ветку
Рустам Байбулатов
Автор

Спасибо за критику. Мне полезно будет.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Александр Иванов

В двух словах: вокруг все долбоёбы, автор трудился как пчёлка, но похоже вместо мёда получил инсайты (три штуки).

Сайт мне не понравился. Статья вода.

А ну да, ещё мы выяснили, что после 30 суши не жрут в Хабаровске.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Рустам Байбулатов
Автор

Насчет воды: изначально писал сухо, но потом решил добавить эмоциональности, живости.
Но, видимо, не вышло.

Ответить
Развернуть ветку
Рустам Байбулатов
Автор

Если бы аудитория включала и 30+ – сайт пришлось бы делать визуально попроще, не таким дерзким.

Ответить
Развернуть ветку
Станислав Курочкин

Это у вас откуда такой домысел?

Ответить
Развернуть ветку
Рустам Байбулатов
Автор

"Темные темы" сейчас больше заходят молодежи.

Ответить
Развернуть ветку
Станислав Курочкин

Я повторю вопрос: это у вас откуда такой домысел? И ничего, что материалы японских ресторанов у нас в стране традиционно выполнены в темных тонах? Не только сайты, я про наружку, меню и прочее.

Кстати, а презентации Apple с фиг знает какого года – это тоже тёмные темы, которые заходят молодежи?

Ответить
Развернуть ветку
Рустам Байбулатов
Автор

Отвечаю: мой личный домысел, основанный на личном наблюдении.

Основная ЦА Apple – разве не молодежь? Apple – новаторы. Консерваторам новации не нужны. И Apple, кстати, зарубежный поставщик, а мы говорим про российский рынок, Хабаровский.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Станислав Курочкин

Объясните тогда, почему люди 40-50-60 лет пользуются айфонами, айпадами и макбуками, покупают себе их сами и следят за новинками?

Ответить
Развернуть ветку
Рустам Байбулатов
Автор

Сколько людей такой категории из Хабаровска покупают себе сами такие устройства?

Я вот точно не скажу, чего, думаю, и Вы не скажете.

Вся эта мысль – родившаяся из моего личного опыта, мало, чем подкрепляющаяся.

Ответить
Развернуть ветку
Khabib96

да вы упячку, видать, не застали

Ответить
Развернуть ветку
Виталий Асташкин

Так он и не дерзкий

Ответить
Развернуть ветку
Vasilii Panteleev

Вадим & Comic Sans

Ответить
Развернуть ветку
Рустам Байбулатов
Автор

Когда с Вадимом по телефону разговаривал, по-моему, он в таком настроении и был.

А вот, кстати, в следующим проекте с ним мне не удалось его переубедить и теперь аукцион по продаже автомобилей излучает радость 😄

Ответить
Развернуть ветку
Пётр Васильев
Надо быть аккуратнее при работе с проектами, не рассказывая о нем кому-либо. NDA (non-disclosure agreement – соглашение о неразглашении) важен.

Идея ничего не стоит. Если даже "украли" - это вина того, у кого "украли"

Ответить
Развернуть ветку
Стартапер-пессимист

NDA - это не про общие детали, а про имплементацию.

Если разработчики слили название сайта, домен, какие-то протитипы - то это уже украли.

По дизайну: читать белый текст на тёмном фоне очень сложно.

Ответить
Развернуть ветку
Рустам Байбулатов
Автор

Не подумал, надо было мне уточнить: читать белый текст на черном фоне – сложно, если текста много. Думаю, с этим и Вы согласитесь.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Рустам Байбулатов
Автор

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

Ответить
Развернуть ветку
aleksey sergeev

«Если дизайн, выполненный по требованию заказчика, не нравится дизайнеру — это не означает, что он плох.»

 
К сожалению, это означает, что он плох. Нельзя рисовать и предлагать то, что самому не нравится. 

Ответить
Развернуть ветку
Рустам Байбулатов
Автор

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

Ответить
Развернуть ветку
Pavel Soyfer

суши в Хабаровске стоят 1900₽…?

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

P. S.
я дорисовываю к макетам сайтов интерфейс браузера. вдруг покажется полезным советом :)

Ответить
Развернуть ветку
Рустам Байбулатов
Автор

Если память не изменяет, то таким образом показывал заказчику как будут разделяться тысячные доли. А уже здесь забыл исправить :)

Насчет мокапов – как-то я от них отошел пока.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Рустам Байбулатов
Автор

Одни минусы пошли, сам не ожидал, что туда уйду.
Душеньку вложил в дело, но что-то пошло не так :)
Что-то не так, видимо, делаю.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Рустам Байбулатов
Автор

Согласен.
Отправил сегодня знакомому журналисту статью на критику.

Ответить
Развернуть ветку
Альберт Штерн

А Вадим заранее знал что заплатил за какие-то там исследования? Ахахах

Ответить
Развернуть ветку
Рустам Байбулатов
Автор

Нет, это была моя инициатива.

Ответить
Развернуть ветку
Mikhail Dubovoi

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

Вставлю пару ложек дегтя:
1. Сетка контента сайта 990px.? Серьезно, в 2019-20 году??? Эта сетка морально устарела, при популярном разрешении 1366 можно сделать контентную область хотя бы 1140 или 1280, при этом можно показать больше товара на странице.
2. Плохая работа с типографикой, переносы, нет выделения главного элемента блока от второстепенного (например, цена очень замылена, а должна сразу быть видна).
3. Ужасный футер. Никто не ищет в подвале кнопку "войти" или "корзина" они там бесполезны, лучше добавить внутренние разделы: Доставка, оплата, акции, отзывы. Их пользователи ищут во вторую очередь.
4. Кнопки на разных экранах - существенно отличаются. При входе в ЛК одна стилистика, кнопка "в корзину" и "оформить" совершенно другие (в том числе шрифт). Так же шрифт в кнопках не выровнен относительно вертикального центра. Лучше придерживаться единого стиля.
5. Не понятно что подразумевает эта галочка http://prntscr.com/qn0y0y, пока на нее не нажмешь и нужна ли она вообще в корзине.
6. Два одинаковых смысловых блока подряд: http://prntscr.com/qn188k Можно разбавить их блоком "Акции" или "Успейте купить". Пользователю не будет понятно зачем так сделано, ведь по их мнению можно было бы табы сделать и на первом блоке.
7. Если большая часть контента выровнена по левому краю, то кнопку так же стоит разместить слева http://prntscr.com/qn19ip. А так она живет своей жизнью.
Однако, на экранах "корзина" и  "Оформление" вы как раз сделали правильно и кнопке самое место по центру.
8. В макете показано, что за 2 порции пользователь заплатит 100 руб, хотя на самом деле 200 руб. http://prntscr.com/qn1eqo
Кроме цены за позицию также стоит указать сумму этой позиции, чтобы не вводить пользователей в заблуждение.

Надеюсь, для своего портфолио вы сможете подправить некоторые нюансы макета и сделать его намного лучше.

Ответить
Развернуть ветку
Рустам Байбулатов
Автор

Спасибо, буду работать над ошибками.

Ответить
Развернуть ветку
35 комментариев
Раскрывать всегда