Calypso Navigator



Calypso application suite, written on Java for Windows desktops, originally had a main entry point application. It’s a main menu with Swing-Java feel UI, called Main Entry. Not only was the interface dated, but also users had constant issues with navigation, finding different pages and features, understanding the layout, and lack of feedback. It was customizable but even that was extremely complicated for users. This interface was the first thing that users saw and did not create a good impression.


Brainstorming Design

Whiteboard sessions

It was decided that the Calypso Navigator Main Entry needed to be completely redesigned and I started with brainstorming and sketches.

Several new conceptual UI layouts. Approach to the UI.

Information architecture

One of the orchestrated use cases.

User Flows

New icons were designed:

Partial implementation during the process:

These are the three main layout variations developed. The user can switch between any of these at any time:

Possible color schemes for the users to choose from:

To promote modern technology, I utilized SVG vector graphics, instead of raster PNG (for example, the loading spinner).

Read my blog post about SVGs here:   SVG – XML based vector graphics to replace GIFs and PNGs.


Although we faced some obstacles during implementation (such as the length of an animated transition could not exceed 200ms), the Calypso Navigator launched successfully and replaced the old and obsolete Main Entry. It utilized draggable tiles and sleeker icons and colors. It was built to be fully customizable by users and came with valuable presets out-of-the-box.

You can read more about it in the blog post – Design practice: How fast the transition animation for expandable panels should be.

To conclude, I want to share a screenshot from Phase Two of the project, for the Windows 7 Aero. It includes the smooth animation during mouse interactions (e.g. mouseover, rearranging tiles with drag and drop) that are carefully shown through shades, gradients, and colors.

Calypso Navigator high-fidelity mockup