Ранее я писал про новое устройство Меркаты. Но вообще, кассовая программа Меркаты умеет работать на любом устройстве с операционной системой Виндоус или Андроид.

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

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

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

Смотреть на экран стало комфортней

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

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

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

Про это я уже ((http://blog.filippovonline.ru/all/ekosistema-uvedomleniy/ рассказывал).
А про обновления каталога и работу с товарами без штрихкода тут.

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

Кстати, прочитайте про новый корпус кассы.

Скоро я добавлю больше подробностей в описание (или не скоро)

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

Для работы над следующим обновленем сайта, в качестве дизайнера в команду позвали меня. До этого маркетологи успели сформировать концепцию обновления и построили её вокруг пользователей Меркаты, историй их успеха. В предыдущей версии↑ можно увидеть тестирование данной гипотезы, через замеры конверсии страниц с рассказами пользователей. Попасть на них можно через блок «Кому подходит Мерката».
А так сайт стал выглядеть после обновления

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

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

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

Новая версия уже доступна, но находиться в ß-версии и наполняется контентом.
Скоро я дополню статью большим количеством подробностей переделок по сайту.
(или не скоро)

Скоро здесь будет описание (или не скоро)

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

Кстати, матрасик грида тоже живой

Задача
Обновить страницу заказа блюд в кафе

Решение

Это ↑ скорее черновик идеи, в нём ещё много чего нужно проработать.
Ещё покажу эскизы с описанием работы.

Эскизы

Верх страницы занимает полоска навигации, она всегда видна и подсказывает текущее местоположение.

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

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

Календарь

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

По умолчанию выбирается текущий день календаря.
Например, представим, что сегодня 27 декабря — вторник

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

Ещё в карточке дня есть общая стоимость заказа, прелоадер-галочка обратной связи, адрес доставки и шкала «сытости», обозначающая сколько ещё можно заказать еды.
Замену блюд в заказе можно сделать двумя способами, удалив ненужное и добавив вместо него новое блюдо, либо просто выбрав новый, например, суп в меню и нажать кнопку «Купить»

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

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

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

Теперь меню выглядит так

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

Работать над проектом Меркаты увлекательно и очень интересно. Следите за обновлениями статьи и читайте подробный рассказ.

Попробовать новое меню в действии можно, пройдя регистрацию здесь.
Обновление меню 1.2

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

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

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

Проект разработан совместно с командой «Суперстрой»
(В ревью идей и разработанных макетов принимали участие: Веб-аналитик, директор интернет магазина, технический разработчик и главный редактор сайта)
Благодарю ребят за помощь.

Задача: показать в нескольких слайдах идеи обновления страниц различных сервисов Меркаты.

Ребята из анимационной студии «Атма студио анимэйшн» подумали в каком напралении можно развивать пользовательский интерфейс современных гаджетов.

еще видео.