Если бы у меня был час на решение проблемы, и моя жизнь зависела от решения, я бы потратил первые 55 минут на определение правильного вопроса, который нужно задать, потому что, когда я знаю правильный вопрос, я мог бы решить проблему менее чем за пять минут.
Очень похоже на правду, особенно когда создание продукта сводится к супер коротким срокам :) В этой статье мы продолжим рассказ «Как создать стартап за месяц и не сойти с ума» и расскажем немного о внутренней «кухне» дизайна ShowMePlace. А кто лучше всего может рассказать про дизайн? Правильно! Дизайнер. Поэтому в второй части сей истории, я передаю слово нашему дизайнеру Максиму С., чтобы он рассказал как мы пришли к тому дизайну, который имеем сейчас и как строился процесс работы над ним.
*дальше повествование будет идти от лица Максима
Исследования
Существует большое количество методов UX исследования. Каждый из них ориентирован на конечного пользователя и помогает определить кем является конечный пользователь, в каком контексте он будет использовать продукт и т. д. Исходя из того, что в нашем распоряжении было ограниченное количество времени, мы решили составить наш план исследований, а именно:
1. Empathy map
2. User Persona
2. Wireframe
4. High-Fidelity Prototyping
Empathy Map
Определившись с идеей продукта и собрав необходимый фидбек от коллег, мы сосредоточились на более детальном исследовании функций нашего приложения. Чтобы определить правильные вопросы, мы использовали инструмент Empathy map. Это помогло более детально визуализировать нашу идею, а именно: что чувствует наш пользователь? Что он видит и слышит, какие у него боли и потребности?
После чего был проработана User Persona - примерный портрет нашего пользователя. Это помогло понять, чем живёт пользователь, его желания и задачи, и в свою очередь исключило ошибки в дальнейшем проектировании интерфейса.
User Flow
На этом этапе мы начали собирать структуру приложения, отталкиваясь от двух основных сценариев для наших пользователей: «я хочу создать своё место» и «я хочу посетить место другого человека».
Составив последовательный user flow, мы снова возвращаемся к правильной постановке вопроса: Что будет важно? Какие этапы мы можем упростить, улучшить? Что, если путь пользователя окажется сложным? И наверно самый главный вопрос: что понятно для нас, будет ли понятно для других? У нас не было больших возможностей в выборе респондентов, поэтому в ход идут наши знакомые, друзья, коллеги по работе. Собрав необходимый фидбек, проанализировав его, мы начинаем собирать наш первый прототип.
Прототипы
На текущем этапе мы изначально сфокусировались на низко детализированном прототипе — Wireframe. Это помогло создать более осязаемую концепцию продукта. Wireframe отлично подходит для решения подобной задачи, так как они легко корректируются. Мы смогли показать в нём основные функции нашего приложения с учётом собранного фидбека, и разработать на его основе более детализированный прототип.
Проанализировав конкурентов, мы пришли к выводу что их интерфейс слишком перегружен. Всегда есть большой соблазн создать «швейцарский нож», который закроет все потребности клиента. Мы же сфокусировались именно на простоте интерфейса и его визуальной чистоте, при этом не упуская основные функции нашего продукта.
После создания прототипов мы снова возвращаемся к вопросу, какие проблемы могут возникнуть у пользователя? Проводим повторный сбор фидбека от наших респондентов. В этом нам помогает кликабельный прототипа в Figma, который приближает интерфейс наших прототипов к реальному опыту. Понаблюдав как пользователи используют наш прототип и еще раз проанализировав пользовательский сценарий, мы создали финальный вариант, который презентовали нашему жюри, где также получили полезный фидбек.
UI
С точки зрения дизайна, этот этап один из самых интересных :) Всегда любопытно наблюдать как интерфейс наполняется красками, иллюстрациями, и начинает выглядеть как что-то живое, осязаемое. В выборе цвета для нашего бренда мы остановились на мягком фиолетовом цвете. Мы отталкивались от двух факторов: цветовая гамма выделяющая нас среди конкурентов и пользовательское восприятие цвета. Дополнительный фактор: хорошее и контрастное отображение цвета на мобильных интерфейсах.
Для ускорения процесса разработки в создании визуального стиля, был создан детализированный Style Guide, а также наиболее часто используемые компоненты, что в дальнейшем помогло сократить время на внесение каких либо изменений.
И в завершении хотелось бы поделиться опытом создания логотипа.
Исследовав конкурентов, мы пришли к выводу что лучшим вариантом будет минималистичный и легко узнаваемый логотип, который в свое время будет раскрывать ценности нашего продукта и его задачи.
В его основу легли такие метафоры как: пользователь и его любимое место отмеченное на карте. Получился минималистичный логотип, который хорошо отображается на мобильном устройстве и легко считывается пользователем.
Можно бесконечно совершенствовать продукт, проводить 100500 исследований. Но самое главное - начать. Создание собственного продукта это максимально интересный опыт, которым нам было приятно с вами поделиться. Надеюсь этот краткий обзор был интересным, спасибо за уделенное время!