Kitchen Sink redesign was a crucial exercise as it formed the bulwark of a developer's component development before being deployed mainstream. This allowed the developer to see how the widget functions and if there exists any design discrepancy.

I being the sole designer, helped in getting the right blend of Citi theme and structure simplified for the developers.

Presently, it is now being used by the framework team in Citi. Happy to see the design being shipped and ready to use.

The redesign mainly captures three inputs from the user.

1. Basic widget [Name]

2. Variation [Name] - if multiple, then allow users to select more than one

3. Theme [Finite numbers]

By this, the system presents the correct combination of basic widget for which a developer can inspect (via the browser) and debug.

The design specs followed the same system design as is being developed for the current application. This helped the developer to refer existing design system and retro-fit code accordingly.

Search & Select

Variation division provides an option to the user to search for the variation to be debugged. For any basic widget, the development cycle could've extended to hundreds of variations.

Each variation, though unique in design has a name associated due to which the search functionality was something popular among the developers & consistently asked as redesign-feature update for the Citi Playground application.

Run Test cases

As part of being future proof, running test cases specific to each basic widget was also thought off. The output presents the status of test cases that were successful or have failed during the course.

Recently Viewed

A developer using their profile has access to their recently viewed basic widgets. The platform provides the variation selected within each basic widget and lists out the last 8 items [basic widgets] for reference.