The legacy product never had a complete design system, only limited style guides and a marketing brand kit. The conceptualization of the new app created an opportunity for a product-focused design system, which was built with efficiency and accessibility at it's core.
This feature is the heart of the Justuno platform. All modular components - designs, visitor segments, coupons, and martech integrations - are managed independently, but are brought together in the workflow builder. The workflow builder creates the automation experience and it's here where the experience is published to a user's website. Users are able to select design templates, edit them, configure coupon codes and third party app integrations, and manage if/then conditions and segments all from the builder, providing a unified focal point of the product.
The "why": users consistently shared feedback about wanting to visualize all the pop ups on their websites. Additionally, we observed that most users concurrently used marketing automation software, and would likely be familiar with a workflow builder.
Creating scalability in the app to accommodate our three main user personas has proven to be one of the most challenging parts of this product design, from how sophisticated the design studio should be to designing the team roles and Admin hub features. The resulting design choices were two-fold: create all the functionality for the Justuno product to scale to the needs of enterprise teams and agencies, as well as provide guidance, templates, and "smart" features to put SMB customers at ease in our product - similar to an automatic transmission car that also offers a manual shifting mode.
Much of the navigation through the app utilizes full screen overlays over the main "base" viewport , allowing users to quickly access other relevant sections of the app without losing their place in the current section they are working on. Overlay sections include account settings, asset library and brand kit, integrations, and more. A great example of this is the workflow builder, where all components of the app come together to publish experiences onto a website. The design studio, discounts section and integrations panel all needed to be accessible while building a workflow, which the full screen overlay model accounts for elegantly.