• Case Study
  • Design System
  • UX

Configuration your Lambda

Progressive disclosure has a weakness when handling hierarchical objects as…

Progressive disclosure has a weakness when handling hierarchical objects as navigating between stages gets complex. Moreover, learnability for first-time users with finding secondary features gets difficult. I found this fact, the hard way.

Intro

Lambda function is proposed to solve this problem as an extensible framework allowing IT consultants, sales, engineers, and partners to write functions in python and other open sources that operate on a common dataframes structure and can be called from UI components with context passing.  

AWS Lambda is named after functions from lambda calculus and programming

A formal system in mathematical logic and computer science for expressing computation by way of variable binding and substitution.

Brief

Design easier Lambda function configuration & management. The interface should be intuitive for non-technical functional users can manage dataframes. Design should provide an easily interpretable framework for users to develop rich analytical functions.

Facts

  • Tools – FigMa, FigJam, DoveTail
  • Dec 2021
  • Role – Product Design, User Testing
  • Tasks- User Research, IA, Usability Study, Prototyping, Developer Handoff

What the was situation

  • User validation readout report revealed – Progressive disclosure was a speed breaker and undesired experience
  • SIGs user group confirmed the need for direct and better code editing support
  • Design System didn’t have code editor component

What tasks were employed

AB Testing

Progressive disclosure defers advanced or rarely used features/actions to a secondary screen, making applications easier to learn and less error-prone. Showing users only a few of the most important options. But settings and configuration pages don’t work that way. Have you ever heard a user complaining about too many links? Example: on your Smart Phone > Settings

The key difference between an Enterprise user vs Consumer users, is degree of data density desired. Enterprise users believe – See more, Do more

More columns & rows are better, even at the cost of smaller font size and tighter spacing

No, because when you are setting up or configuring the system – you need to see more and even better in one view if possible. Why?

  1. It gives a sense of control
  2. Cross-checking for mental verification
Misfire

This was a miss on my way – blindly following design patterns of progressive disclosure. With one action per page but resulting in multiple page jumps and modals. This UI was fixed with a newer pattern, with in-page configuration, object & attributes mapping, and code editing…

Monaco Code Editor

With proper RBAC, the code editing feature was made available to authorized users. This code editor also provided an extension to allow direct in-page editing and for advanced changes, jump to an external dev editing tool.

What actions were taken

UI Refresh

The page was redesigned to make a wider horizon for users to see configuration settings, on the same screen. Limiting progressive disclosure for deeper and focussed interaction.

Linked selections and their effects with visible, plus provide focused branching when needed Adding some visual language to enhance the experience to mimic natural actions.

Component

Code Editor component was missing the Design System & platform, and the SIG users group emphasized how important code editing capability was to expedite the configuration.

Speed mattered. I created a code editor component UI in Figma, an exploratory design with all complex features offered by the open source app. And presented to Dev team – initially, was pushed back on any new component development. My agenda was simple good design = good product, a few discussions later …

Dev showed some trust and was on board with building the new component. And sold the same idea to Design System as a federated approach, the application team will contribute the new component to DS & Platform.

Kudos to engineers – who found Monaco Editor, an open source tool that did the heavy lifting. Users got an excellent code in-page editor and a browser link – a new feature in Visual Studio creating a communication channel between the dev environment and browser.

What was outcome

Many design decisions are reversible and can be reverted on receiving valid rationale and insight. But action bias, on changing the standard UI pattern was a key factor in this success with the SIG and eventually customer delight.

The volume of change was not important – the magnitude of impact mattered. I don’t have any numbers to show the delight index. Mainly times, no complaint is an accolade as features that are disruptors, very soon become excepted features.