Как за одной картинкой стоит 2-ух недельная работа

История о том, как мы проектировали конструктор для создания переписок

Как за одной картинкой стоит 2-ух недельная работа

Идея

Товарищ организует детские мероприятия. Для быстрого старта в Инстаграме ему потребовалось оформить отзывы. Клиентов было немного, а продукт хороший (выездная сахарная вата)

Он решил воспользоваться конструктором для создания отзывов. На выходе получались неправдоподобные отзывы он поделился с нами опытом

Телефон растягивается, когда сообщения не помещаются на экран  https://fakedetail.com/fake-whatsapp-chat-generator
Телефон растягивается, когда сообщения не помещаются на экран  https://fakedetail.com/fake-whatsapp-chat-generator

Мы решили сделать концепт конструктора для создания переписок по всем канонам проектирования: просто, понятно и удобно

Начало работы

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

Шкипер, у нас проблемы

Проблемы аналогичных сайтов:

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

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

Прототипирование

Проблемы выявили, переходим к проектированию сайта

Делаем ставку на последовательность и понятность функций сервиса

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

Проектируем интерфейс Сверху Вниз — Последовательность шагов пользователя на сайте:

  • Сверху панель навигации (выбор социальной сети — отправная точка)
  • Выбор ПО устройства
  • Рабочая область (Функционал + Что получается в процессе ). Важное отступление: Слева основной инструмент, справа - Второстепенный. Такой порядок был выбран из-за того, что пользователь читает и просматривает информацию Слева Направо, по важности. Предшествуют такому выбору и исследования Якоба Нильса (F-паттерн)
  • Целевое действие, Экспорт файла, находится в конце

Большую часть занимает инструмент и телефон

Как за одной картинкой стоит 2-ух недельная работа

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

Главное оружие

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

Чтобы правдоподобнее было

Какие отзывы без картинок? В инструментарий конструктора мы добавили картинки, и для особых случаев — голосовые сообщения и звонки.

Как насчёт 5 айфонов? 5 Айфон используются за редким исключением, но Конкуренты продолжают использовать элементы старого ПО

Чтобы решить проблему, мы ознакомились с актуальными Гайдлайнами мессенджеров и ПО. В процессе проектирования начали формировать дизайн-систему, с расчётом на то, что при выходе обновлений, можно было быстро среагировать на изменения. Старые — удаляем, новые — обновляем

Как за одной картинкой стоит 2-ух недельная работа

Адаптивность

У конкурентов неудобный интерфейс под планшет и телефон. В своём проекте мы учли эти детали и спроектировали конструктор под все разрешения экранов

Как за одной картинкой стоит 2-ух недельная работа

Итог

Конечный дизайн выглядит так

Как за одной картинкой стоит 2-ух недельная работа

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

Спасибо за уделенное время!

44
14 комментариев

Для быстрого старта в Инстаграме ему потребовалось оформить отзывы

нарисовать что-ли?

9
Ответить

Изобретен новый способ попрошайничества лайков на Behance с помощью VC 😁

3
Ответить

чья бы корова мычала

2
Ответить

о , какие люди )

1
Ответить

2-ух недельная работаДве недели работы двух ушей, так бы и написали.

А если серьезно, то недавно на VC была статья про склонение числительных, почитайте.

2
Ответить

Минутка душноты:

Очередной chat messenger generator.

Точнее, концепт очередного генератора чатов

1
Ответить

кинь ссылки
интересно какие концепты получились у ребят

1
Ответить