• Case Study
  • UX

SaaS Multi-tenant Management

Supply Chain Architect is a multi-tenant management portal and architectural…

Supply Chain Architect is a multi-tenant management portal and architectural design that enables hosting for tenants and delivering SaaS apps. Primarily aims to provide the ability to configure models, data, user, and application lifecycle covering users’ roles from pre-sales, sales to implementors.

Brief

Design is a low code or no code design platform, offering a wider spectrum from drag-n-drop interaction to complex object design time UIs. SCA manages provisioning, entitlements, and end-to-end overview for SaaS apps.

Facts

  • Tools – FigMa, FigJam, DoveTail
  • Jan 2022
  • Role – Lead UX, Product Designer
  • Tasks- User Research & Interview, UI, Dev Handoff

What the was situation

As part of tenant onboarding, users need to set up the foundational data model, scheme, and process models. These complex and critical task is primarily done by customer IT admins or partner consultants.

Their requirement – need this process to be easy, the ability to work with code, and do bulk actions. Most importantly ability to switch between no-code to code.

What tasks were employed

As we were dealing with a complex and overwhelming amount of data & attributes, it was apparent the UI should be like consumer UX but under the hood needs to operate enterprise UX.

During SIG & user validation sessions – gathered data from day-in-the-life provided few directional UI like native file browser, tagging system, and browser inspect feature. Listed the desired features.

What action was taken

As an integrated UI where objects are linked and dependent the UI needed to follow a common design pattern with low cognitive load and repeatable actions.

Design provided the ability to clear view of the objects and possible actions – like Dimension, Interactions, Measure group, and Rule Sets. And each object were identified with a huge number of attributes – here tagging system allowed smart grouping and easy searching.

The ability to switch between no code to code was achieved using in-page Monaco Code editor components were bulk editing and direct code coding by advance user roles.

What was outcome

SIG anecdote – JSON code editing enhances the experience and provides quick mass changes. Established as a new UI component in the platform to be used across SaaS apps.

Introduce 3 new design system components: Nested cards with a panel, No-code to Code switcher, attributes, and master-details pattern