Как Заказчик настаивал на 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.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Рустам Байбулатов", "author_type": "self", "tags": [], "comments": 38, "likes": 7, "favorites": 17, "is_advertisement": false, "subsite_label": "design", "id": 100619, "is_wide": false, "is_ugc": true, "date": "Sat, 11 Jan 2020 18:35:48 +0300", "is_special": false }
0
{ "id": 100619, "author_id": 235914, "diff_limit": 1000, "urls": {"diff":"\/comments\/100619\/get","add":"\/comments\/100619\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/100619"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
38 комментариев
Популярные
По порядку
Написать комментарий...
15

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

Ответить
3

А если ещё почитать комменты/ответы автора ниже, то можно охуеть от его глупости и заблуждений.

там и 

людям 30+ Надо что попроще, дерзкие сайты нельзя

Apple пользуется только молодёжь

Тёмная тема не потому что на ней максимально выгодно контрастирует белый рис (древние 30+ рекламщики это давно просекли), а потому что так модно (у молодёжи)

люди переходят на тёмные темы, потому что так щас модно, а не потому что когда матрица экрана херачит в глаза белым весь день, глаза охуевают, появляется светочувствительность 👀 

белым по чёрному читать сложно

спросить друзей в общаге - это провести ресёрч.

получить ответы друзей - это инсайт

Ответить
0

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

Ответить
0

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

Ответить
0

Редко вижу статьи которые минусят. За что интересно?

Статью не читал)

Ответить
9

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

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

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

Ответить
1

Спасибо за изложение и пояснение 😉

Ответить
0

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

Ответить
–2

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

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

Ответить
–1

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

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

Ответить
4

Apple – новаторы. Консерваторам новации не нужны.

Приходишь такой в магазин и говоришь, — можно мне iPhone?
А продавец с порога. —вы новатор?
— нет, я консерватор, хочу чтоб всё просто работало и больше не думать об этом. У меня в компании других дел хватает.
— может вам ещё и за 30+?
— да 
— какой тебе эпол дядя, бери вон кнопочный, пошёл вон отсюда, консерватор ёбаный

Ответить
0

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

Ответить
–1

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

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

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

Ответить
0

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

Ответить
0

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

Ответить
2

Вадим & Comic Sans

Ответить
0

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

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

Ответить
1

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

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

Ответить
0

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

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

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

Ответить
0

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

Ответить
0

Соглашусь.

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

Ответить
0

По мне, так вы переборщили с виктимностью. В рамках закона, в краже виноват тот, кто украл. В рамках предусмотрительной жизненной позиции — виноват тот, кто не предусмотрел. 

Ответить
0

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

Ответить
1

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

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

Ответить
0

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

Ответить
1

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

Вставлю пару ложек дегтя:
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
Кроме цены за позицию также стоит указать сумму этой позиции, чтобы не вводить пользователей в заблуждение.

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

Ответить
0

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

Ответить
0

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

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

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

Ответить
1

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

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

Ответить
0

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

Ответить
0

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

Ответить
2

Нужно продолжать, Рустам. Поддерживаю вас. Нужно сделать работу над ошибками и следующую статью выкатывать. 

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }