Lumiere

Latitude and Lumiere are well-versed in the film and video world, so that’s initially where much of the brand and web design inspiration came from. For both brands’ primary color palette, we chose orange, red, violet, and purple to elicit feelings of light and warmth. We then pulled the colors into branded gradients throughout the website, platform, and iconography, with white denoting the icons’ focus or purpose. Lumiere’s video learning suite interprets and conceptualizes real-time user feedback, so we also developed a dedicated color palette for data visualization.

Almost all of Latitude and Lumiere’s designs are set on a black background to allude to the darkness of a cinema. For both brands’ typography, we intentionally chose a rounder Sans Serif that was uncomplicated but friendly, representing how the company balances its data's accuracy with its insights' creativity.

During the years after our initial engagement, Lumiere enhanced its features, expanded its partnerships, and connected with more audiences. To honor the platform’s evolution and prepare for its commercial launch, Big Human designers took another look at the logo design in 2024. Latitude’s wordmark has a degree symbol while the first iteration of Lumiere’s logo was a prism, an optical object that refracts and disperses light. 

Influenced by the name Lumiere (a French word meaning “light”) and the Latitude’s CEO’s fascination with space, the new logo takes the form of an eclipse — a circle with a glowing halo stylized in Lumiere’s branded gradient. It’s an understated metaphor for how Lumiere enlightens (or illuminates) users with deep data insights. (The reworked logo coincidentally aligned with the 2024 solar eclipse.)

Latitude frequently shares videos of its offerings, findings, and use cases, and every video is an opportunity to showcase the Lumiere brand. Inspired by how entertainment studios screen their logos before a film, our design team produced an animation that plays whenever a Lumiere video is shared; as the eclipse glides across the screen, its halo transitions between Lumiere’s brand colors, gradually revealing the Lumiere wordmark. We then translated the eclipse logo into a loading animation on the platform and leaned into Lumiere’s new space-themed art direction with more branded gradients and constellation patterns.

Latitude and Lumiere have three color themes: the atmospheric and immersive Umbra is used in areas where content is the focus, bold and expressive Corona is for high visual impact, and simple and clean White Light prioritizes clarity and legibility. Lumiere’s dark and light modes are solutions for Latitude’s internal teams; while Umbra’s cinematic feel is ideal for a video-centric platform, White Light is better tailored for presentations and printed collateral. Latitude and Lumiere’s multi-page brand kit includes guidelines for accessibility and usage of all visual elements as well as presentation templates.

The Lumiere platform is highly visual and interactive, so its website had to follow suit. To bring life and interest to areas where content was minimal, we studied how light waves move to design the primary animation on the homepage and branded light wave patterns that act as wallpapers. Big Human designers used Adobe After Effects and an HTML5 canvas to add movement to static components, creating an overall more eye-catching and engaging site experience. 

Like the platform itself, the site is best experienced on desktop, but the mobile version is just as interactive and performant. As with all of our projects, we made sure the website met accessibility standards on both desktop and mobile.

The development work for Latitude and Lumiere’s redesigned website allowed us to exercise a new skill. The Lumiere platform has its a team of app developers that uses Svelte, a newer programming language that makes building interactive web pages smoother and simpler. There isn’t a lot of documentation around the framework currently, but since the entire Lumiere platform was created with Svelte, Big Human engineers spent time learning the language and used it to build the new website from scratch.

While tightening the front-end development, we also helped Latitude migrate to a headless, easy-to-use and manage CMS. Part of this migration included working side-by-side with the Latitude team to ensure they were fully up to speed with all the new tech integrations.