Close

Calypso Navigator

Picture

Reasoning

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.

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

New overall design of UI:
One of the orchestrated use cases:

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.

result

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