This is an internal project for my employer, CrystalCommerce.

The core component of our online software is the ecommerce system. Business users have access to an admin where they manage all aspects of their inventory.

This is part of an epic redesign of our entire UI and UX, so the visuals shown here include placeholder and tentative content.

This started out as an abstract feature idea provided by our CEO, as opposed to being presented as a problem to solve. He called it “Batman’s Toolbelt” and it was essentially a way for users to access powerful data, content, and actionable-insights about products in their inventory.

This project was a collaboration between me and the other designer at our company.

We started off with a discussion and some brainstorming. We asked ourselves questions such as, “What problems do our business users have, and how can this feature help them?”

To define the “problem,” we connected the feature idea to the fact that the “business” persona of our platform needs a lot of information about the products they sell so they can make informed decisions quickly about pricing and stock.

We also did research and investigation into the websites and data which the persona might use, to get ideas as well as see how we could improve upon existing options online.

Next, we looked at some of the challenges we were up against with this feature, which included:

• The admin interface was already relatively busy
• The amount of info shown could increase over time, so it needed to be space-agnostic
• The user is busy and needs quick access, without being taken away from the current page
• The info is contextual to each product, not to the current page

We decided the feature should be an additional “dimension or layer” within the UI of whatever page the user was currently on.

One thing I thought of, which is a solution to this issue within another industry, is the HUD from a video game. The player has the ability to pull up a holographic overlay which gives them access to information and resources in real time while they complete their mission.

An example of a video game HUD. This concept inspired my idea of the CrystalVisor overlay.

I created some rough prototypes in Figma and then presented them to the other designer so we could collaborate, iterate, and expand upon my ideas. We also got feedback from a few clients.

Click the preview below to play a short demo video of the rough draft prototype.

The video below shows an earlier concept, with overlay triggers on a separate layer which could be toggled on and off. This was discarded in favor of the icons always being visible in some cases, and in other cases being exposed when hovering on a product.

There is a CrystalVisor icon displayed next to (or on hover of) every product in our ecommerce system. Clicking the icon brings up the HUD overlay, which displays a potentially limitless stream of data and content, and the ability to dive deeper into a full screen view.

Due to the scalability and flexibility of CrystalVisor, we foresee implementing it in other experiences, and for other personas, in the future.

Note: the prototype shown below contains placeholders for features and elements which haven’t been fully specified yet.

Click the preview below to play a short demo video of the high fidelity prototype.