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

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

Отрасль:
Manufacturing

Mobile Development

UX and design

Web Development

Software Product Development

Задача

Наш клиент – финская компания, основанная в 1921 году, создает “умные” и устойчивые среды с помощью энергосберегающих решений по управлению освещением на основе искусственного интеллекта. Компания хотела создать инновационный продукт, которого ранее не было на рынке. Клиент пришел к нам со своим видением реализации функционала веб-приложения и приложения для Android.

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

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

двух отдельных приложений для разных групп конечных пользователей

Клиенту требовалось веб-приложение для сотрудников Компании (“Инженеры”) для создания интерфейсов высокоуровневого управления освещением и переключения между различными сценариями освещения, а также приложение для Android для клиентов Helvar (“Конечные пользователи”) для настройки освещения в отдельном месте

Создание

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

Наша команда создала первоклассные инструменты с улучшенным UX для эффективного управления интеллектуальным освещением на уровне всего здания и помещений внутри него

Соблюдение баланса

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

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

Сроки реализации

Важным пожеланием клиента были сроки реализации проекта

Нужно было, чтобы решение было готово через 3-4 месяца. Поэтому наша команда, состоящая из UX/UI-дизайнеров, дизайнера продуктов, бизнес-аналитика, разработчиков веб-приложений и приложений для Android, незамедлительно приступила к работе.

Что сделано

Реализацию задачи мы разделили на процессы и этапы.

Подготовка проекта

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

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

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

Залы заседаний и зона ресепшн в офисном здании
Палаты пациентов и приемная в больнице
Номера и ресепшн в отеле или на круизном лайнере

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

Исследование и концепция

На этом этапе мы проанализировали работу, проделанную клиентом до обращения к нам. Например, у них уже были ранние концепции дизайна, основанные на их собственном дизайне продукта – Illustris.

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

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

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

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

Wireframing

Вот иллюстрация того, как идея папок была реализована на этапе wireframing.

Далее мы перешли к проектированию компонентов решения – менеджера пользовательского интерфейса и редактора пользовательского интерфейса.

Визуальный дизайн и разработка

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

UI Manager

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

Но, если для редактора мы могли использовать существующие продукты компании, такие как Illustris и сенсорную панель, то UI Manager пришлось разрабатывать с нуля.
UI Manager – менеджер пользовательского интерфейса это часть веб-приложения для инженеров, где сотрудники Helvar создают структуру папок, соответствующую реальному зданию. Мы предложили добавить область предварительного просмотра, чтобы инженеры могли легко выбрать тему, которая впишется в интерьер конкретного помещения.

Редактор пользовательского интерфейса

Редактор пользовательского интерфейса – это часть Android-приложения, ориентированная на конечных пользователей (офисных работников, пациентов больниц, туристов в гостиничных номерах и т. д.). Его интерфейс должен был оставаться понятным и лаконичным, несмотря на огромное количество функций, которые он предоставляет пользователям.

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

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

Базовый режим

для реальных конечных пользователей

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

Расширенный режим

для менеджеров зданий

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

Мы разработали программное обеспечение с неограниченными возможностями настройки, чтобы полностью удовлетворить желание клиентов Helvar и повысить узнаваемость бренда. Например, несмотря на наличие множества встроенных шаблонов, которые охватывают различные сценарии использования, мы пошли дальше, чтобы предоставить пользователям безграничные возможности настройки. Установив планшет в каждом номере, пользователи могут не только создать свою уникальную тему (например, в цветах отеля и с его логотипом), но и разместить на экране планшета любые необходимые кнопки и привязать к ним функции так, как им удобнее всего.

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

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

Ключевые особенности продукта

Масштабируемость

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

Устойчивость

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

Уникальность

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

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

Первое на рынке решение для крупных объектов, позволяющее управлять интеллектуальным освещением в помещении, на этаже или во всем здании с помощью цифровых технологий;
Снижение затрат на установку и обслуживание благодаря беспроводному управлению освещением;
Удобная замена устаревшей сенсорной панели;
90% пользовательского интерфейса может быть настроено для конкретного приложения и конечного пользователя;
Уникальные возможности брендирования

Мультипликативный эффект

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

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