The post has been translated automatically. Original language: Russian
Why did we redesign about 80% of the SaaS product logic?
At first glance, the online store menu seems like a simple thing. The buyer selects a category and proceeds to the products.
But there is a lot hidden behind this one action. The menu should work equally well on computers and mobile devices, support large catalogs and multiple category levels, match different store designs, and display correctly in non-standard locations.
This is exactly the task we faced when developing the Multi-level Menu.
When small fixes stop working
The application has been developing gradually. We've added new settings, improved the experience on mobile devices, and adapted menus to different site structures.
Over time, each new feature began to affect more and more of the existing logic. The change for computers could affect the mobile version, and the new placement option required checking with different containers and page structures.
As a result, we realized that further addition of individual fixes would complicate product support and slow down its further development.
Therefore, in version 7.0, we have redesigned about 80% of the application logic.
The main difficulty wasn't writing new code. It was necessary to preserve the existing settings and the usual menu behavior in stores that have already used the application.
What users got
We have redesigned the logic of loading and displaying the menu, reduced the amount of code loaded on the page, and added local caching.
According to our internal tests, the menu works up to four times faster in some scenarios. For store owners, this means faster loading, fewer delays when opening categories, and more stable operation.
But version 7.0 wasn't just about speed.
Products can now be displayed directly inside the menu categories along with images and prices. Store owners can choose the number of columns and limit the number of items they download so as not to overload the large drop-down menus.
We have also expanded the design settings. Users have gained more control over the position of images, text alignment, colors, margins, and special icons.
For category images, you can now choose which part should remain visible when cropping: top, center, or bottom.
Version 7.0 also introduced a menu focus mode. When the menu opens, the rest of the page can be darkened so that the customer's attention remains on the categories and products.
More flexibility for different stores
We have separately redesigned the menu behavior on computers and mobile devices. Improved mobile navigation, scrolling, menu locking, and support for multiple category levels.
Now the menu can be shown only on selected pages and it is easier to place it inside non-standard blocks and containers of the site.
Managing the directory structure has also become more convenient. Store owners can reassign the root category, change the order of menu items, work with additional or disabled categories, and upload their own icons.
The settings panel is available in English, Russian, German, Spanish and French. Its interface has also been upgraded to the current version of Vue.
What we have learned
The main conclusion is that user requests often show the real limitations of the product better than internal assumptions.
We also realized that compatibility is a product feature in its own right. Users don't have to understand containers or selectors. From their point of view, the application either works in the right place or it doesn't.
Finally, refactoring only makes sense when users can feel the result. Faster speed, stable performance, and useful new scenarios are more important than the very fact of rewriting the code.
Multi-level Menu 7.0 has already been released and is available to all users.
How do you understand that small improvements are no longer enough and it's time to rethink the basis of the product?
Почему мы переработали около 80% логики SaaS-продукта
На первый взгляд меню интернет-магазина кажется простой вещью. Покупатель выбирает категорию и переходит к товарам.
Но за этим одним действием скрывается многое. Меню должно одинаково хорошо работать на компьютерах и мобильных устройствах, поддерживать большие каталоги и несколько уровней категорий, соответствовать разным дизайнам магазинов и правильно отображаться в нестандартных местах.
Именно с этой задачей мы столкнулись при развитии Multi-level Menu.
Когда небольшие исправления перестают работать
Приложение развивалось постепенно. Мы добавляли новые настройки, улучшали работу на мобильных устройствах и адаптировали меню к разным структурам сайтов.
Со временем каждая новая функция стала затрагивать всё больше существующей логики. Изменение для компьютеров могло повлиять на мобильную версию, а новый вариант размещения требовал проверки с разными контейнерами и структурами страниц.
В итоге мы поняли, что дальнейшее добавление отдельных исправлений усложнит поддержку продукта и замедлит его дальнейшее развитие.
Поэтому в версии 7.0 мы переработали около 80% логики приложения.
Главная сложность заключалась не в написании нового кода. Нужно было сохранить существующие настройки и привычное поведение меню в магазинах, которые уже использовали приложение.
Что получили пользователи
Мы переработали логику загрузки и отображения меню, уменьшили объём кода, загружаемого на страницу, и добавили локальное кэширование.
По нашим внутренним тестам, в отдельных сценариях меню работает до четырёх раз быстрее. Для владельцев магазинов это означает более быструю загрузку, меньше задержек при открытии категорий и более стабильную работу.
Но версия 7.0 была посвящена не только скорости.
Теперь товары можно показывать прямо внутри категорий меню вместе с изображениями и ценами. Владельцы магазинов могут выбирать количество колонок и ограничивать число загружаемых товаров, чтобы не перегружать большие выпадающие меню.
Мы также расширили настройки дизайна. Пользователи получили больше контроля над положением изображений, выравниванием текста, цветами, отступами и специальными иконками.
Для изображений категорий теперь можно выбрать, какая часть должна оставаться видимой при обрезке: верхняя, центральная или нижняя.
В версии 7.0 также появился режим фокусировки на меню. Когда меню открывается, остальная часть страницы может затемняться, чтобы внимание покупателя оставалось на категориях и товарах.
Больше гибкости для разных магазинов
Мы отдельно переработали поведение меню на компьютерах и мобильных устройствах. Улучшили мобильную навигацию, прокрутку, фиксацию меню и поддержку нескольких уровней категорий.
Теперь меню можно показывать только на выбранных страницах и проще размещать внутри нестандартных блоков и контейнеров сайта.
Управлять структурой каталога также стало удобнее. Владельцы магазинов могут переназначать корневую категорию, менять порядок пунктов меню, работать с дополнительными или отключёнными категориями и загружать собственные иконки.
Панель настроек доступна на английском, русском, немецком, испанском и французском языках. Её интерфейс также был переведён на актуальную версию Vue.
Чему мы научились
Главный вывод заключается в том, что обращения пользователей часто показывают реальные ограничения продукта лучше внутренних предположений.
Мы также поняли, что совместимость — это самостоятельная функция продукта. Пользователи не должны разбираться в контейнерах или селекторах. С их точки зрения, приложение либо работает в нужном месте, либо нет.
Наконец, рефакторинг имеет смысл только тогда, когда пользователи могут почувствовать результат. Более высокая скорость, стабильная работа и полезные новые сценарии важнее самого факта переписывания кода.
Multi-level Menu 7.0 уже выпущена и доступна всем пользователям.
Как вы понимаете, что небольших улучшений уже недостаточно и пришло время пересмотреть основу продукта?
Share
