Jupiter Canvas & Mimic UI

Client: Jupiter by Infocus
Projects: UI Design, Design System

Jupiter Canvas is a platform that manages Jupiter’s wall display systems. For this project, Jupiter’s engineering team had prototyped three UI’s that make up Canvas (Canvas, Canvas Admin, and Mimic) and needed a visual design under a quick timeline and tight budget. To make the most of both, I made a design system the focus of the deliverable, with a few primary screen designs to demonstrate how to implement the design in the user interfaces.

Prototype Audit

We started the project auditing the three existing UIs to understand what needed to be designed, similarities/differences between the UIs, and how we could clarify functionality with visual changes.

As a part of identifying design opportunities, we included addressing accessibility standards and responsive behaviors for the web-based UIs (Mimic and Canvas Admin).

Visual Positioning

Jupiter wanted us to create a look and feel for their Canvas product family. Our audit found no clear direction or standards for their digital products, so we put together a Visual Positioning — mood boards that demonstrate styling concepts. These helped us get a sense of what appealed to the client without committing time and budget to a full set of design explorations.

Exploration & Refinement

Based on the client’s feedback from the audit and visual positioning, we presented two design explorations. We selected hero screens from the primary Canvas UI that contained most of the elements we identified essential to the design system. In the refinement round, the client wanted to combine the color palette and dark mode from the first concept with the minimal style of the second concept.

Canvas

Canvas is the primary program that manages the user’s video wall/display. There are two primary screens associated with Canvas. Canvas selection allows user to switch between displays (“canvases”) and launches editing. Canvas edit is where users can set up or change a canvas by selecting and positioning sources.

Mimic

Mimic is the web-app that allows users limited management of their video displays from any device. Because Mimic is accessed via a web browser, this UI design needed to be responsive.

Canvas Admin

Finally, Canvas included a web-based admin UI that allows users to manage Canvas and Mimic permissions from any browser. The engineering team addressed deep content via nested tabs. While we could not address the underlying structure, we focused on making tabs and their content clearly associated.

All of the screens designed for the delivery scope were were built on a foundation of a design system. The design system provided information needed by the client’s engineering team for implementation, without designing every screen.

The design system was build on the concept of atomic design—defining the smallest “building blocks” and creating increasingly complex levels of components. I covered standard designs system elements, such as colors, buttons, inputs, modals, etc. as well as some Canvas specific components, including navigational elements.

Our client’s engineering team was delivered the screen design files, design system file, and a presentation detailing how to use the design system and its relationship with the design screen. We also held a hand off meeting to go over these details.