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

    Очень часто в компании дизайн полностью зависит от дизайнера. Он может даже внезапно изменить его полностью, несмотря на протестующие крики «фронтов» и «мобильщиков». Мы придерживаемся другого мнения: внутреннее мировоззрение дизайнера или видение разработчика не должны сильно влиять на продукт. Дизайн продукта — это видимая часть бизнеса, с которой взаимодействует клиент. Дизайнер не может сам внедрять свои «хотелки», он должен ориентироваться на потребности клиентов. Хорошие продукты развиваются органично, с оглядкой на клиента. Это относится и к функциональному насыщению, и к дизайну.

    Дизайнер не должен быть носителем требований к приложению, бизнес должен диктовать то, каким оно будет. Кто бы ни работал над дизайном ePayments, и сайт, и приложение будут красивыми и удобными, а стиль не будет резко меняться на 180°. Этот принцип работает на пользу фронтэнду и мобильным разработчикам.

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



    С чего все начиналось


    Когда я только пришел в проект, приложение выглядело так:



    А до этого было вообще так:



    Что меня в нем не устраивало:

    1. Приложение не масштабировалось. Изначально у нас было 2 валюты (EUR и USD) и 2 карты (под те же валюты). Они были жестко связаны между собой как визуально, так и логически. Долларовая секция — долларовая карта и так далее. Потом добавился RUB и вся верстка начала «ехать». Для добавления новых элементов приходилось пользоваться костылями. У ePayments есть планы по расширению списка валют и нам нужно было придумать, как добавлять их без боли для клиента. Поведение на всех экранах должно оставаться прогнозируемым. Если на одном экране список валют обрабатывался конкретным паттерном поведения, то на другом экране паттерн работы с валютами должен был повторяться.



    2. Устаревший дизайн. Приложение выглядело очень «мусорно» и тяжело, хотелось больше воздуха и меньше лишних элементов. Зачем нам градиенты и «красивости», если через 5 минут в приложении начинают уставать глаза?



    3. Разница в дизайне. Для iOS и Android было 2 принципиально разных приложения. Если человек переходил с одной операционки на другую, он терял весь накопленный пользовательский опыт. Владелец Самсунга не мог подсказать владельцу Айфона, как провести операцию.



    4. Неоптимальный рабочий процесс. Когда у нас появлялся новый способ перевода средств из кошелька, эта задача попадала к аналитику, который делал мокап. Затем она приходила ко мне и рисовался экран для перевода. Потом мобильный разработчик превращал все это в код и утрамбовывал в приложение. Это нездоровый процесс, из которого можно было выкинуть 80% трудозатрат. Здесь можно сэкономить много времени, просто исключив из конвейера дизайнера. Если есть готовые элементы интерфейса, из них можно собирать окна переводов.



    Проектируем светлое будущее


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

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

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

    Важно было учесть, что продукт развивается «вширь». Сегодня у нас 3 валюты, через год может быть 33. Сегодня мы даем 15 способов перевести деньги, завтра их станет 115. В приложении могут появиться совсем новые сущности: виртуальные карты, покупка акций или другие услуги.

    Сбрасываем оковы ограничений


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

    Решение: заранее предусмотреть расширение, выбирать удобное позиционирование элементов.

    Главная проблема прошлой версии — масштабирование. Итак, есть у нас условный экран разрешением 480*720 px. И на нем горизонтально располагается 3 таба со способами перевода денег. Хорошо, завтра их станет 15. Кто в здравом уме будет скроллить направо 15 табов? Или нужно делать их микроразмерными, чтобы попасть в них можно было только детским мизинцем?



    В ePayments клиент имеет один кошелек с несколькими валютными секциями. Самый масштабируемый элемент мобильного UI — это список. Его можно почти бесконечно листать вниз совершенно привычным движением. Даже если элементов внезапно станет слишком много, всегда можно прикрутить фильтр или поиск.



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

    Кроме того, у меня были «бургер» слева и tap bar внизу. Самые важные операции мы разместили на нижней панели. Первым делом вы смотрите на баланс секций и карт. Потом можете отправиться в прием или перевод, посмотреть историю транзакций или обменять валюту. Все менее важное я убрал в «бургер». Теперь там лежит, например, партнерская программа, к которой обращаются реже.



    Окей, проблема решена, переходим к следующей.

    Оставляем различия в прошлом


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

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

    Нельзя сделать идентичные приложения. У «Гугла» есть Material Design, у «Эпла» — Human Interfaces. Но основные элементы мы делаем похожими. Сетка, большая часть контролов и расположение блоков стали одинаковыми. Элементы управления, которые отвечают за основную структуру, подстроились под гайды операционных систем. Самое простое решение — полностью портировать приложение. Но это, скорее, признак лени и незнания гайдов. А гайды пишут люди, которые в разы умнее нас, к ним стоит прислушаться.

    Первым мы обновили приложение на Android. Это было дешевле по «стори поинтам», этой операционкой пользуется большая часть наших клиентов. К тому же в какой-то момент у нас возник дисбаланс в команде мобильной разработки — в команде разработки на Android было больше людей и мы могли выделить часть из них на редизайн. Эта версия ушла вперед и версия для iOS теперь постепенно ее догоняет.

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



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

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

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

    То, что приложения стали похожими, отразилось на разработке. Теперь их проще тестировать, кейсы в Testrail одинаковые. Вся кейсовая документация дублируется — естественно, с поправками. Например, когда мы готовим фичу в приложении на iOS, у нее уже есть JSON от Android и разработчикам не приходится лезть в запросы.

    Отдаем бразды правления


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

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

    Сперва я отрисовывал индивидуально каждый экран. Потом группировал повторяющиеся элементы: списки, контролы, кнопки, иллюстрации, экраны подтверждения и так далее. Когда приложение было готово, у меня был полноценный компонентный UI.



    Посмотрите на элементы, у всех есть кое-что похожее:
    • заголовок
    • «назад»
    • дроплист
    • строка для ввода реквизитов
    • «далее»

    Эти элементы делаем заранее. Плюс готовим гайды по цветам, отступам и шрифтам. На выходе получаем конструктор, в котором разработчик превращает рисунок в условном Paint от аналитика в готовое окно перевода.

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

    Подводим итоги


    Мне нравится то, что мы сделали. Приложение стало красивее, это оценили клиенты. Фронтам и мобильщикам стало проще работать.



    Мы пока не в полную силу используем метрики, которые показали бы, как изменилось поведение пользователей. Так что сейчас можем судить только по рейтингу и отзывам клиентов. Рейтинг остался прежним — 4,6 на Google Play, 4,8 на AppStore. Большая часть негативных отзывов касается процесса верификации, он кажется клиентам долгим. А в положительных часто хвалят именно приложение.

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

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

    Ищете работу?


    Мы ищем сотрудников для работы в офисе в Санкт-Петербурге. Если вам интересен финтех, мы ждем вас. Ниже вы найдете вакансии и ссылки на соответствующие страницы hh.ru.

    ePayments
    Компания
    Реклама
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее

    Комментарии 42

      +16
      мы сделали мобильное приложение, которому не нужен дизайнер

      Рассказывает дизайнер проекта…
        +6
        Для iOS и Android было 2 принципиально разных приложения. Если человек переходил с одной операционки на другую, он терял весь накопленный пользовательский опыт.

        Спорное утверждение. У этих ОС базовые элементы интерфейса ведут себя по-разному. Я привык, что на iOS действие N выполняется вот так, а на Android — вот так вот. То есть не обязательно делать полную копию интерфейса, разные ОС диктуют свои особенности и это нормально
          0
          Согласен, поэтому мы упомянули о гайдлайнах. Все, что в них описано, делали по гайдам, чтобы не нарушать привычное поведение для клиента.
            0
            Специально установил iOS‐версию вашего приложения и зарегистрировался, чтобы проверить. И сразу же обнаружил, что жест «Назад» означает не назад, а открытие бокового меню. Это очень сильно раздражает, когда привычное действие приводит не к тому, что ожидается от его выполнения.
              0
              И, в результате, для часто применяемого возвращения назад приходится тянуться пальцем в левый верхний угол или задействовать вторую руку на с большом смартфоне, а на легко выполняемом жесте «Назад» висит почти никогда не нужное боковое меню.
            +8
            Так и не понял как вы избавились от дизайна переделав дизайн приложения.
            P.S. Как пользователь приложения Тинькофф, я промолчу…
              0
              Каюсь, слабо раскрыли то, как разгрузили дизайнера. В одной из следующих статей покажем путь от рисунка на салфетке до готовой фичи.
              +7
              Как мы сделали мобильное приложение, которому не нужен дизайнер

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

              Что с вами не так?
              На выходе получили серый бездушный продукт, который полностью отвечает потребностям бизнеса. Молодцы че.
                +5
                На выходе получили серый бездушный продукт

                Да, есть такое. Еще немного бы докрутили и можно писать статью «Как мы сделали приложение, которому не нужен пользователь».
                  0
                  Да, есть такое. Еще немного бы докрутили и можно писать статью «Как мы сделали приложение, которому не нужен пользователь»

                  «Как мы сделали приложение, которое ненужно».
                  «Как мы подумали и решили, что делать приложение ненужно».
                  Офф. «редизайнили» — как это у вас так получилось, наверное особенная какая-то магия?
                    0
                    Уже. Я много месяцев назад зарегистрировался на epayments, чтобы купить карту. Но они до сих пор не преодолели свои трудности с выпуском дебетовых карт.
                    А больше использовать этот сервис не знаю зачем нужно. Принять деньги и не иметь возможность сделать вывод?
                      0
                      Мы выпускаем карты, но пока только для граждан ЕЭЗ. И у нас можно сделать перевод на банковский счет (в 15 локальных валютах), дебетовую карту, ЯД, WebMoney. Вы не рассматривали эти способы? Почему вас интересует именно наша карта?
                        0
                        Почему вас интересует именно наша карта?
                        Потому что большая красная кнопка на главном экране приложения настойчиво предлагает её оформить.

                        Скрин
                        image
                    0
                    Для нас бизнес в первую очередь — клиенты. При создании яркого дизайна всегда есть риск «заиграться» и сделать неудобный продукт. Кстати, какие финансовые приложения для вас не «бездушные»?
                      0
                      Почему вы сразу оперируете такими понятиями как «яркий»? Вас бросает из крайности в крайность. Это не профессионально.
                      Для нас бизнес в первую очередь — клиенты.
                      Да действительно, и что вы знаете про своих клиентов?
                      Что вы даете своим клиентам?
                      Какие ценности вы вкладываете в свой облик?

                      Считывается – мы сделали как у всех. Расскажите вашему руководству и дизайнеру про Дитера Рамса например. Хотя современные ui/ux дизайнеры не хотят читать.
                    +1
                    А к чему приводят подобные установки и подход, можно прочитать в книге Алана Купера — «Психбольница в руках пациентов».

                    И я не говорю, что у до этого всё было правильно. Судя по описанию и картникам, в компании изначально не было ни квалифицированного дизайнера, ни квалифицированных программистов.
                      –3
                      Скоро наступит момент, когда катироваться будут только уникальные дизайны построенные на opengl. Это произошло бы уже давно, но проблема в том, что люди способные создавать подобныедизайны уходят дв ТВ или игрострой. Но процесс не стоит на месте и все больше и больше профессиналов остаются на уровнях ниже, тем самым задавая тон. Ещё немного и дизайн будет полностью цветной, переполнен инфографикой и моушен-дизайном, 3d. И подобные приложения будут расцениваться пользователями также, как приложения десяти летней давности.
                        +1
                        Да сохранят нас боги UI от этой дичи!
                        +6
                        Смотрел я на картинки замыленным глазом, поморгал и открыл консоль браузера — jpeg.
                        Пора открыть для себя степень сжатия по шакалам, «дизайнер проекта Тимур».
                          0
                          Здесь вина не Тимура, а моя, Михаила. У меня возникли небольшие проблемы с софтом и я не мог пережать картинки в PNG, но поделиться статьей очень хотелось. Вы правы, обещаю исправиться.
                          +2
                          Сейчас в наших планах привести продукт к одному виду на разных платформах, в том числе десктопную версию.

                          интересно, как десктопная версия будет выглядеть, если остальные разрабатывались для экрана «480х720»…
                            0
                            У нас есть планшетная версия для Андроида :) как только зарелизим новую десктопную версию, расскажем на Хабре.
                            0
                            Увидел скриншоты и подумал что про Монобанк будет статья :)
                              +1

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

                                0
                                Мне тоже их дизайн, по сравнению с этим, больше нравится. Я к тому, что при беглом взгляде на скриншот до спойлера, может показаться что это монобанк.
                              +5
                              Меня всегда умиляет когда разрабатывается экран ввода текста без открытой клавиатуры, как тут:
                              image
                              Как же выглядит этот экран с открытой клавиатурой, и сколько тапов надо для того, чтобы ввести данные и нажать итоговую кнопку?
                                0
                                А ещё некоторые думают, что клавиатура имеет фиксированную высоту, и не добавляют прокрутку в ситуации, представленной на картинке.
                                  0
                                  Выкрутил шрифт до максимального размера, что позволяет система, но так и не смог повторить проблему. Размер клавиатуры тоже максимальный, если что. Вероятно, пустое место незаметно жмется. Сейчас у меня довольно большая диагональ, но и на маленькой я подобного не замечал.

                                  P.S. а вот уменьшенная на скриншоте в посте комиссия относительно реальной — это лол.

                                  Скрытый текст
                                    0
                                    Ух… У них реальная комиссия больше 30%?
                                    Даже 30% как-то многовато.
                                      0
                                      Нет, вроде фиксированно 3 евро
                                      0
                                      Размер клавиатуры тоже максимальный, если что.

                                      Андроид запрещает клавиатуры большей высоты?
                                      0
                                      Сходил к отделу мобильной разработки и проверил. Клавиатура перекрывает часть экрана, рабочая часть скроллится.

                                      image
                                      +2
                                      ePayments, когда снова начнете выдавать карты?
                                      И почему на главной странице нет предупреждения, что выпуск карт приостановлен? Почему об этом узнаешь только после регистрации?
                                        0
                                        Судя по тому, что случилось с аналогичными системами (у которых тоже отбирали права на выдачу карт) — выдавать не начнут никогда, к сожалению. Надеюсь, это epayments не похоронит.
                                        0
                                        Тут очень много критикуют, так что я немного разбавлю: приложение реально удобное и красивое. А если его сравнивать с другими бансковскими приложениями, то вообще становится эталоном качества.
                                          0
                                          Спасибо, рады стараться :) если есть пожелания, напишите мне в комменты, доставлю его мобильщикам и дизайнерам.
                                            0

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

                                              0
                                              Когда ответите на мои вопросы?
                                              habr.com/ru/company/epayments/blog/437250/#comment_19661970
                                              0
                                              На Андроиде может оно так и есть, но не в iOS.
                                              0
                                              А кто первый придумал этот дизайн: monobank или ваша компания?
                                              0
                                              Судя по имеджам люди которые разрабатывают финансове приложение уверенны что 10$ == $10, 10₴ == ₴10, но вот сюрприз 100$ это какие-то тугрики но никак не сумма в USD

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

                                              Самое читаемое