Сайт

Идея главной страницы появилась и была согласована с клиентом ещё во время работы над логотипом:

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

То ли по техническим причинам, то ли ещё по какой, но от идеи пришлось отказаться. Оставили одну витрину с лицами преподавателей и добавили больше отзывов:

Потом дожали перебивочные этажи о сервисе и с приглашением стать репетитором:

Поиск пришлось переработать, чтобы он стал узнаваемее и оброс явным кол ту экшеном — кнопкой «Найти»:

Ещё была небольшая проблемка с картинками предметов в шапке. На ВР больше сотни предметов, на них все картинки рисовать очень долго. Договорились с клиентом нарисовать только для самых популярных:

Потом оказалось, что лицензия на шрифт Curbe, которым мы хотели набирать названия предметов и кое‑какие другие штуки, для ВР из‑за его большой посещаемости будет стоить бешеных денег. Клиент попросил придумать, как обойтись без использования шрифта. Нарисовали свои надписи:

Изучаем настоящие анкеты репетиторов на старом сайте, чтобы понять, с чем мы будем работать:

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

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

Вдохновляемся страницами квартир на Эир‑би‑эн‑би и подобных сервисах. Начинаем долгую проработку анкеты:

Наконец, получили макет, который смело можно показать клиенту:

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

Получился список с мини‑анкетами репетиторов, которые подошли под заданные критерии:

На фоне всё время шла работа над значками для фич репетиторов:

В чате пользователь общается с репетитором, чтобы обговорить детали и договориться о первом занятии. Эволюция дизайна:

Жёлтые баблы сообщений совсем мимо. Появляется гипотеза, что весь чат нужно поставить на фон. Тогда один из баблов можно будет сделать белым:

Контурные баблы не нравятся. Пробуем заливку:

Синяя заливка не очень. Пробуем двинуться в сторону тёмно‑серо‑синей:

Получилась слишком тёмной. Делаем светлее:

Спустя десятки мелких доработок получаем макет чата для показа клиенту:

Несём клиенту анкету, список репетиторов и чат:

Клиент принимает дизайн, но выдаёт пару десятков замечаний. Принимаемся за доработку и тюнинг дизайна:

Через неделю выкатываем обновлённые макеты:

Чтобы убедиться в работоспособности дизайна, подставляем информацию из настоящих анкет репетиторов в наши макеты. Например, вот как по‑разному может выглядеть блок с ценами у разных репетиторов:

Продумываем возможные состояния чата с репетитором:

Рисуем вспомогательные страницы:

Собираем набор элементов дизайн‑системы:

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