Разбор кейса: сервис по предоставлению бытовых и фриланс услуг

В этом кейсе описан процесс создания сервисного приложения — QuickGhy. Дизайн-система была разработана для того, чтобы закрывать потребности пользователей. Над проектом работала команда QG Daksha.

Подход:

• Постановка задачи.
• Решение.
• Изучение информации по проекту.
• Знакомство с брендом.
• Обоснование необходимости в приложении.
• Целевая аудитория.
• Исследование пользователей.
• Персона пользователя.
• Карта пути клиента.
• Референсы.
• Дедуктивная методология.
• Поиск идей.
• Информационная архитектура.
• Разработка вайрфреймов.
• Брендинг.
• Гайд по стилю.
• Библиотека компонентов.
• Визуальный дизайн.
• Выводы.

🤔Постановка задачи

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

💡Решение

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

Читайте дальше ⬇⬇⬇

🔌 Изучение информации о проекте

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

👑 Знакомство с брендом

‍

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

Цель состоит в том, чтобы клиент максимально быстро получил желаемую услугу. В настоящее время компания находится под управлением Assam Startup; The Nest и Инновационного Парка IIM Calcutta. QuickGhy зарекомендовал себя как один из самых многообещающих стартапов в Гувахати (прим. город в Индии).

📱 Обоснование необходимости в приложении

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

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

🎯 Целевая аудитория

Стартап ориентируется на жителей городских районов Гувахати. Основная аудитория — это студенты, работающие люди или домохозяйки. Их возраст колеблется от 14 до 40 лет; у них хороший доход и они ведут нормальный образ жизни.

🧪 Исследование пользователей

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

👩Персона пользователя

🗺 Карта пути пользователя

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

🕸 Референсы

Мы проанализировали различные приложения в этой нише и нашли следующие референсы:

😠 Болевые точки

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

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

👨🏻‍🏫 Использование дедуктивной методологии

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

💡 Поиск идей

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

• Вход по номеру мобильного телефона с применением одноразового пароля.
• Оплата нескольких услуг одним платежом.
• Отображение хода выполнения заказа.
• Активное взаимодействие с горячей линией QuickGhy.
• Предоставление выбора из нескольких специалистов для оказания одной и той же услуги (например, косметологов).
• Расписание запланированных услуг.
• Предоставление экстренных услуг (например, ремонт при возникновении внезапной неисправности у автомобиля).
• Бронирование нескольких услуг одновременно.

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

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

🔨 Разработка вайрфреймов

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

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

🤵🏻 Брендинг

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

🎨 Гайд по стилю

Из вайрфреймов мы выбрали несколько важных экранов и поэкспериментировали с различными сочетаниями цветов и шрифтов.

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

• Мы перебрали много разных шрифтов, прежде чем остановились на  ‘Poppins’. Выбор обусловлен тем, что он позволяет создавать чистые и современные лигатуры.

• Мы планировали использовать одинаковые иконки со сглаженными углами, чтобы они соответствовали индивидуальности продукта.

• Сделав грубые наброски, мы снова вернулись в Figma и оценили, как различные иллюстрации будут сочетаться с компонентами экрана. А также то, как сделать компоненты более удобными для пользователя.

⚓ Библиотека компонентов

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

✨ Визуальный дизайн

Мы перебрали разные макеты. Использование библиотеки компонентов помогло нам ускорить процесс. Далее мы разработали экраны для приложения. На основе многочисленных отзывов мы постепенно улучшали визуальный дизайн.

Пошаговое руководство для знакомства с приложением

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

Регистрация/вход

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

Главный экран и Раздел услуг

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

Детали отслеживания заказа

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

Бронирование адреса и времени

Пользователи могут сохранять и менять адреса и время оказания услуги так, как им удобно.  

Настройки

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

Справочная информация и служба поддержки

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

Оформление заказа

Простая процедура оформления заказа позволяет пользователям легко оплачивать услуги.

🎁 Заключение

Основные выводы, которые мы сделали после реализации проекта:

• UX/UI дизайн нельзя изучить с помощью традиционного метода чтения учебных пособий. Практика и обратная связь крайне необходимы.
• Важно проводить множество итераций. Существует 100 возможных вариантов дизайна экрана, но только некоторые из них будут рабочими. Итерации дают представление о том, как будут функционировать макеты и какой из них лучше всего подходит для решения поставленных задач.
• Важно использовать функцию Constraints (функция Выравнивания в Figma) для разработки адаптивных экранов.

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