![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g d="M 0 0 L 40 0 L 40 40 L 0 40 Z M 20 40 C 31.046 40 40 31.046 40 20 C 40 8.954 31.046 0 20 0 C 8.954 0 0 8.954 0 20 C 0 31.046 8.954 40 20 40 Z M 8.324 19.826 C 8.324 19.826 18.324 15.723 21.791 14.278 C 23.121 13.7 27.629 11.85 27.629 11.85 C 27.629 11.85 29.711 11.04 29.537 13.006 C 29.48 13.815 29.017 16.648 28.555 19.711 C 27.861 24.046 27.11 28.786 27.11 28.786 C 27.11 28.786 26.994 30.116 26.011 30.346 C 25.029 30.578 23.411 29.538 23.121 29.306 C 22.89 29.133 18.786 26.531 17.284 25.26 C 16.879 24.914 16.416 24.22 17.341 23.41 C 19.401 21.522 21.424 19.595 23.41 17.63 C 24.104 16.936 24.797 15.318 21.907 17.284 C 19.209 19.141 16.492 20.972 13.757 22.775 C 13.757 22.775 12.832 23.353 11.097 22.833 C 9.364 22.313 7.341 21.619 7.341 21.619 C 7.341 21.619 5.954 20.751 8.324 19.826 Z" fill="transparent" height="40px" id="GxMSuylVu" width="40px"><path d="M 0 0 L 40 0 L 40 40 L 0 40 Z" fill="transparent" height="40px" id="pvSyxKlhX" width="40px"/><path d="M 20 40 C 31.046 40 40 31.046 40 20 C 40 8.954 31.046 0 20 0 C 8.954 0 0 8.954 0 20 C 0 31.046 8.954 40 20 40 Z" fill="rgb(52, 170, 223)" height="40px" id="fqjXdMdYW" width="40px"/><path d="M 1.386 8.142 C 1.386 8.142 11.386 4.038 14.854 2.593 C 16.184 2.015 20.691 0.165 20.691 0.165 C 20.691 0.165 22.774 -0.645 22.6 1.322 C 22.542 2.13 22.08 4.963 21.617 8.027 C 20.924 12.362 20.172 17.102 20.172 17.102 C 20.172 17.102 20.056 18.432 19.074 18.662 C 18.091 18.893 16.474 17.853 16.184 17.622 C 15.952 17.448 11.849 14.847 10.346 13.575 C 9.941 13.229 9.479 12.535 10.404 11.725 C 12.463 9.837 14.486 7.91 16.472 5.945 C 17.166 5.252 17.86 3.633 14.97 5.599 C 12.272 7.456 9.555 9.287 6.82 11.09 C 6.82 11.09 5.895 11.668 4.16 11.148 C 2.426 10.628 0.404 9.934 0.404 9.934 C 0.404 9.934 -0.984 9.067 1.386 8.142 Z" fill="rgb(255, 255, 255)" height="18.69485609571008px" id="t2uAwPQcu" transform="translate(6.938 11.685)" width="22.610182127057346px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g d="M 0 0 L 40 0 L 40 40 L 0 40 Z M 20 40 C 31.046 40 40 31.045 40 20 C 40 8.954 31.046 0 20 0 C 8.954 0 0 8.954 0 20 C 0 31.045 8.954 40 20 40 Z M 31.674 21.814 L 31.674 30.06 L 26.894 30.06 L 26.894 22.366 C 26.894 20.435 26.204 19.116 24.472 19.116 C 23.151 19.116 22.367 20.004 22.02 20.864 C 21.895 21.171 21.862 21.598 21.862 22.029 L 21.862 30.059 L 17.081 30.059 C 17.081 30.059 17.145 17.03 17.081 15.681 L 21.862 15.681 L 21.862 17.719 C 21.852 17.735 21.839 17.75 21.831 17.766 L 21.862 17.766 L 21.862 17.719 C 22.497 16.741 23.631 15.344 26.171 15.344 C 29.316 15.344 31.674 17.399 31.674 21.814 Z M 12.08 8.751 C 10.445 8.751 9.375 9.824 9.375 11.234 C 9.375 12.615 10.413 13.719 12.018 13.719 L 12.049 13.719 C 13.716 13.719 14.753 12.615 14.753 11.234 C 14.721 9.824 13.715 8.75 12.08 8.75 Z M 9.659 30.059 L 14.437 30.059 L 14.437 15.68 L 9.659 15.68 Z" fill="transparent" height="40px" id="ISi_LpFSY" width="40px"><path d="M 0 0 L 40 0 L 40 40 L 0 40 Z" fill="transparent" height="40px" id="aitXSklKK" width="40px"/><path d="M 20 40 C 31.046 40 40 31.045 40 20 C 40 8.954 31.046 0 20 0 C 8.954 0 0 8.954 0 20 C 0 31.045 8.954 40 20 40 Z" fill="rgb(0, 122, 185)" height="40px" id="F1i0ZJ804" width="40px"/><path d="M 22.299 13.064 L 22.299 21.31 L 17.519 21.31 L 17.519 13.616 C 17.519 11.685 16.829 10.366 15.097 10.366 C 13.776 10.366 12.992 11.254 12.645 12.114 C 12.52 12.421 12.487 12.848 12.487 13.279 L 12.487 21.309 L 7.706 21.309 C 7.706 21.309 7.77 8.28 7.706 6.931 L 12.487 6.931 L 12.487 8.969 C 12.477 8.985 12.464 9 12.456 9.016 L 12.487 9.016 L 12.487 8.969 C 13.122 7.991 14.256 6.594 16.796 6.594 C 19.941 6.594 22.299 8.649 22.299 13.064 Z M 2.705 0.001 C 1.07 0.001 0 1.074 0 2.484 C 0 3.865 1.038 4.969 2.643 4.969 L 2.674 4.969 C 4.341 4.969 5.378 3.865 5.378 2.484 C 5.346 1.074 4.34 0 2.705 0 Z M 0.284 21.309 L 5.062 21.309 L 5.062 6.93 L 0.284 6.93 Z" fill="rgb(241, 242, 242)" height="21.310000000000002px" id="o6M2aKQ5B" transform="translate(9.375 8.75)" width="22.298750190734836px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g d="M 0 0 L 40 0 L 40 40 L 0 40 Z M 0 20 C 0 8.954 8.954 0 20 0 C 31.046 0 40 8.954 40 20 C 40 31.046 31.046 40 20 40 C 8.954 40 0 31.046 0 20 Z M 26.819 29.38 L 30.795 29.38 C 31.739 29.38 32.5 28.616 32.5 27.676 L 32.5 15.46 L 26.819 19.723 M 9.205 29.38 L 13.181 29.38 L 13.181 19.721 L 7.5 15.46 L 7.5 27.676 C 7.5 28.619 8.264 29.38 9.205 29.38 Z M 13.181 19.721 L 13.181 12.335 L 20 17.45 L 26.818 12.338 L 26.818 19.723 L 20 24.835 M 26.819 12.335 L 26.819 19.723 L 32.5 15.459 L 32.5 13.188 C 32.5 11.08 30.094 9.878 28.409 11.143 M 7.5 13.188 L 7.5 15.46 L 13.181 19.723 L 13.181 12.335 L 11.591 11.143 C 9.904 9.878 7.5 11.08 7.5 13.188 Z" fill="transparent" height="40px" id="aYumWbwqF" width="40px"><path d="M 0 0 L 40 0 L 40 40 L 0 40 Z" fill="transparent" height="40px" id="lF7gvgt0E" width="40px"/><path d="M 0 20 C 0 8.954 8.954 0 20 0 C 31.046 0 40 8.954 40 20 C 40 31.046 31.046 40 20 40 C 8.954 40 0 31.046 0 20 Z" fill="rgb(255, 255, 255)" height="40px" id="RHVuhyowF" width="40px"/><path d="M 0 13.92 L 3.976 13.92 C 4.92 13.92 5.681 13.156 5.681 12.216 L 5.681 0 L 0 4.262" fill="rgb(52, 168, 83)" height="13.919999999999998px" id="tHFmJZ7qz" transform="translate(26.819 15.46)" width="5.68125000000002px"/><path d="M 1.705 13.92 L 5.681 13.92 L 5.681 4.261 L 0 0 L 0 12.216 C 0 13.159 0.764 13.92 1.705 13.92 Z" fill="rgb(66, 133, 244)" height="13.920000000000002px" id="jzClmnIgD" transform="translate(7.5 15.46)" width="5.681249999999984px"/><path d="M 0 7.386 L 0 0 L 6.819 5.115 L 13.636 0.003 L 13.636 7.388 L 6.819 12.5" fill="rgb(234, 67, 53)" height="12.5px" id="o2BEB_XY0" transform="translate(13.181 12.335)" width="13.63624999999999px"/><path d="M 0 1.709 L 0 9.097 L 5.681 4.833 L 5.681 2.562 C 5.681 0.454 3.275 -0.748 1.59 0.517" fill="rgb(251, 188, 4)" height="9.096556008021897px" id="WJhZsc21w" transform="translate(26.819 10.626)" width="5.68125000000002px"/><path d="M 0 2.562 L 0 4.834 L 5.681 9.097 L 5.681 1.709 L 4.091 0.517 C 2.404 -0.748 0 0.454 0 2.562 Z" fill="rgb(197, 34, 31)" height="9.0965560080219px" id="pvylEetGY" transform="translate(7.5 10.626)" width="5.681249999999984px"/></g></svg>)
AskBefore: портал клиник для берлинского medtech
Роль
Продуктовый дизайнер
Задача
Разработать портал клиник на основе существующего визуала и вписать его в экосистему продукта, опираясь на дизайн‑систему
Дизайн-команда
Наталья — CEO AskBefore курировала продукт, участвовала в принятии ключевых решений
Мария — дизайн-лид проводила дизайн-ревью, помогала принимать продуктовые решения
Я — продуктовый дизайнер спроектировала и разработала интерфейс под руководством дизайн‑лида и CEO
Вводные данные
AskBefore — берлинский medtech-стартап с двумя направлениями: сервисом обмена справками на ИППП и агрегатором клиник для сдачи анализов. Проект уже запущен в Германии и Румынии и планирует расширение по всей Европе и США.
Контекст
С помощью агрегатора клиник пользователи могут самостоятельно записаться на анализы без направления врача. Они заходят в сервис, выбирают удобные условия (местоположение, цену, тип биоматериала и др.) и бронируют подходящее время онлайн.
Для партнёрства с клиниками компании нужен был сервис, где они смогут самостоятельно управлять своими данными, которые отображаются в пользовательском продукте.
Цель
Отобразить партнёров в сервисе для пользователей, чтобы они могли записываться на анализы в наиболее удобные клиники.
Аудитория
Клиники, которые берут анализы на ЗППП.
Роли
Мы разделили пользователей интерфейса на 3 роли, опираясь на информацию, полученную от потенциальных клиник‑партнёров:
Администратор клиники
Менеджер по маркетингу
Операционный персонал
UX‑решения
Возможность заполнять профиль частями, не за один заход
Индикатор прогресса: «Что уже заполнено / что осталось»
Табличные интерфейсы, привычные целевой аудитории, работающей в Excel
Минималистичный дизайн, снижающий когнитивную нагрузку и вероятность совершения ошибок
Простые формы с понятной логикой ввода данных
Процесс работы
Поиск визуального решения, итерации
На основе варфреймов я разработала несколько визуальных концепций и передала их на ревью. В ходе нескольких итераций мы с командой определились с общей стилистикой и способом отображения сложных данных.
Мы выбрали таблицы и степпер, как наиболее удобные и интуитивно понятные для работы с большим объёмом информации.
Передача в разработку
Финальным этапом стала подготовка дизайна к передаче в разработку. Я финализировала экраны, проверила состояния и краевые ситуации и организовала файл.
Заключение
Работа над этим проектом научила меня принимать решения в условиях неопределённости и дефицита данных: запускать MVP, проверять гипотезы уже после релиза и итеративно улучшать продукт.
Стартап-опыт научил меня учитывать бизнес-ограничения, расставлять приоритеты и искать баланс между скоростью, качеством и пользой для пользователя.
