Product Navigation

A global sidebar for Gamalon's products.


requirements gathering -> low-fidelity prototyping -> heuristic evaluation -> task analysis -> visual design -> production


Matt Tharp, Jon Linton, Alan deLespinasse, Hanan Shoubaki, Ira Ladson


2019 / 1 month

Problem Statement

Gamalon wishes to be a A.I. hub for marketing professionals at SaaS companies. In order to do this, we are building a suite of A.I.-first products that plug neatly into the marketer's workflow. All of these products need to be tied together into a single interface and accessible via a left sidebar.


The Gamalon sidebar is a hierarchical menu and it allows users to access a suite of A.I.-first products as well as other housekeeping pages such as Preferences and Settings.

Selected Assets

A selection of assets from the prototyping process are presented here.

[Figure 1] An early paper prototype of the sidebar.

[Figure 2] An early medium-fidelity prototype of the expanded state of the sidebar.

[Figure 3] An early medium-fidelity prototype of the collapsed state of the sidebar.

[Figure 4] A screen from the second round of designs, which led us away from a light theme and to a darker one.

[Figure 5] A screen from the third round of designs, which involved an in-depth visual exploration.

[Figure 6] A labeled screenmap and visuals associated with te final design.

[Figure 7] A video showing the various animations associated with the sidebar's state transitions.