Разбор кейса: дизайн приложения для онлайн-записи в салоны красоты

Каждого из нас когда-то выводило из себя утомительное ожидание в длинной очереди в салоне красоты. Ну, по крайней мере, у меня такой опыт был 😀.

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

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

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

1. Исследования

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

Проблема

Собрав данные, я смог выявить проблему. Профессора из Коимбатура (город в Индии) провели исследование и установили, что индустрия красоты и здоровья растет быстрыми темпами. Такой резкий рост становится причиной множества проблем, в том числе:

• Клиенты не могут найти ближайшие салоны или вообще не знают о них.
• Каждый салон предоставляет разные услуги, о которых потенциальные клиенты не могут узнать.
• Цены на услуги варьируются в зависимости от салона — их невозможно найти или узнать до посещения салона.
• Людям приходится ждать своей очереди, из-за чего они часто теряют много времени.

Решение

Рассмотрев все проблемы, я нашел для них следующие решения:

• Дать пользователям возможность искать расположенные поблизости салоны, чтобы помочь им сориентироваться.
• Все салоны должны предоставить список услуг, а также подробную информацию о них. Это позволит клиентам выбрать нужную услугу. Поскольку время оказания каждой услуги будет известно заранее, они смогут понять, сколько времени займет посещение салона.
• Цена услуги также должна отображаться рядом с ее названием, что позволит избежать неприятных сюрпризов.
• Бронирование времени посещения в выбранном салоне решит проблему ожидания в очереди. Люди не будут собираться толпами и смогут сэкономить много времени.

Пользователь

Целевая аудитория “Salone” — клиенты в возрасте от 20 до 40 лет. Они не любят тратить время зря, обожают технологии и Интернет, а также имеют возможность исследовать мир и открывать что-то новое.

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

Цель пользователя

Цель пользователя — с легкостью находить свободное время и бронировать посещения в салонах, расположенных поблизости. Процесс должен быть хорошо продуман и организован на всех этапах: от поиска до онлайн-записи.

Ценность проекта для пользователей

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

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

Ценность проекта для бизнеса

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

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

2. Пользовательский сценарий (user flow)

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

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

3. Информационная архитектура

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

4. Сетка

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

Кроме того, я добавил еще одну модульную сетку с шагом 4pt. Изначально я собирался использовать сетку с шагом 8pt, но остановился на 4pt, поскольку такой вариант обеспечивает большую гибкость.

5. Цвета

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

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

6. Типографика

Лично я предпочитаю не применять в проекте больше двух гарнитур. Здесь я использовал шрифты лишь из одной. Мы действительно можем создать в дизайне необходимую иерархию с помощью шрифтов разного размера и начертания из одной гарнитуры.

Для Salone я выбрал жирный, полужирный, обычный и тонкий шрифты из гарнитуры Inter.

7. Панель навигации

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

Ссылка

8. Вайрфреймы

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

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

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

9. Визуальный дизайн

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

Экран-заставка (splash screen) и экран регистрации

Я начал с разработки экрана-заставки и экрана регистрации. Первый из них представляет собой логотип Salone на фоне градиента, состоящего из фирменного цвета бренда и его оттенков.

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

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

Экран выбора местоположения

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

Основные экраны

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

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

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

Экран со списком услуг

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

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

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

Бронирование и подтверждение

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

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

Мои бронирования, избранное и профиль

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

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

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

10. Веб-сайт

Помимо мобильного приложения, я разработал десктопную версию Salone. Клиенты могут использовать как веб-интерфейс, так и мобильное приложение: вся информация будет синхронизирована, если пользователь зашел в систему, указав те же данные.

Главная страница

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

Страница выбора услуг

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

Страницы бронирования и подтверждения

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

11. Темная тема

Опрос, проведенный Android Authority, показал, что почти 90% людей используют на своих устройствах темный режим. Он действительно может быть удобным, поскольку позволяет экономить заряд батареи и меньше напрягать глаза.

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

Заключение

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