Citi Odyssey Studio

A platform that allows developers across domain to modify widgets according to requirements. This is in addition to the Kitchen Sink application, wherein the developers are provided with a UI that is independent of all services.

With this, they can edit, modify, save & export widget accordingly. Since, the platform uses a secure SSO login, all resources and plugins will be readily available.

Presented below is the New User Sign-up & Existing User Login.

Intro Page

All users will land on the Intro page. This is specifically designed for developers who need a walkthrough of the Odyssey Studio. All available resources (as previously mentioned) can be accessed from this page.

The Home Studio

The page is bifurcated into Drawing Panel (edit) & Preview Panel (View). Any widget added to the drawing panel can edited. There is full control of modifying the widgets right up to the input methods.

The drawing panel helps in selecting the layout (Single/double), reset & move to preview actions. It also contains Body widgets & Footer widgets. Based on user selection, the widget placement differs.

Widget Selection | Elements

The Widget selection takes lace in three different modes. The first of which is the permutation & combination of elements or atomic components.

In the screens below, the user is selecting Label + Button and all the widgets from the first column, that has the combination of such elements will be listed in the second column of this modal.

On selecting a specific widget, the third column reiterates user's selection as a preview and awaits user's action (i.e. to Load).

Modify

The screens below highlight the process of editing and moving it to preview panel. An example of a footer widget is also showcased.

Widget Selection | List

This tab allows user to select from a predefined folder, a specific widget or a group of widgets.

Widget Selection | Favorites

Another tab selection for the user to select from a list of favorites.

On exporting a file from the preview panel, the user (in this case the developer of a particular domain) can export and configure the JSON details. Subsequently, they can then download the same.