Product Navigation

A global sidebar for Gamalon's products.

process

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

team

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

duration

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.

Outcome

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.