Работа над сайтом началась после того, как мы спроектировали приложение для Айфона. Чтобы ускорить работу над сайтом и проще поддерживать продукт, мы повторили структуру каталога, которую использовали в мобильном приложении. Теперь текст и картинки для сайта и приложения подтягиваются из одной базы данных.
Делаем сайт по структуре максимально похожим на приложение: на главной странице показываем популярные услуги и рассказываем о сервисе, а каталог разбиваем на категории, объекты и услуги:
Страницы выбора объекта и услуги делаем визуально очень похожими на приложение:
По такому же принципу рисуем поиск, уточнение заказа и корзину:
Показываем клиенту.
Клиент принимает дизайн, но говорит, что на главной глаза разбегаются от цветных элементов, особенно, когда экран становится шире.
Договариваемся не перемешивать рассказ о сервисе с примерами услуг. Выносим рассказ о сервисе в отдельную колонку. Теперь более узкую колонку с примерами услуг стало проще воспринимать:
Утверждаем с клиентом главную страницу и пилим остальные:
Передаём макеты в разработку. По ходу разработки стало понятно, что к назначенному сроку не удастся реализовать всё задуманное. Вместе с клиентом принимаем решение пока отказаться от корзины, а личный кабинет упростить до экрана с подтверждением заказа:
По результатам тестирования использования сайта стало понятно, что многие клиекты не находят полный каталог услуг и думают, что всё, что есть на главной — это всё, что умеют делать Руки. Придумываем выделить поиск в шапке и поставить кнопку, ведущую в каталог, в заметное место в нижнем левом углу экрана; радикально уменьшаем количество плиток с услугами:
На сладкое — эволюция рук, которые держат листочек с уточняющими вопросами:
И ещё эволюция рук со звездочками на экране отзыва:
После окончания двух больших итераций дорабатываем в формате поддержки миллион мелочей: прогресс бар заказа услуги, новые категории, выбор своего города и оплату бонусами: