Lumiere

The Big Human team spent the first part of the project, the research and strategy phase, ingesting the current branding, identifying business goals, and understanding the Lumiere platform itself. Previously, the deep video learning suite was presented as “Lumiere powered by Latitude.” This framing confused users since Lumiere and Latitude are two different products with separate offerings. The goal was to reintroduce both under modernized, cohesive branding.

Latitude wanted to give users a feel for Lumiere’s highly interactive platform, so we had to ensure the website was as dynamic as possible. Part of the process was also making sure the company’s story was told in compelling ways and worked in sync with design and development.

Latitude and Lumiere are well-versed in the film and video world, and that’s where much of the website’s design inspiration comes from. Along with the name Lumiere, a French word meaning “light,” Big Human designers were also influenced by light waves, which is the basis for the primary animation featured on the homepage. We used a degree symbol for Latitude’s logo while Lumiere is represented by a prism, an optical object that refracts and disperses light.

With the brand’s existing colors of red and yellow as a starting point, we added purple, red, and orange to elicit the feelings of light and warmth. We then translated those colors into a branded gradient that added movement and acted as a nod to Lumiere’s creative intelligence and machine learning. A black background alludes to the darkness of a cinema, and the website’s side-scrolling was influenced by video and streaming apps.

The icons also mirror both logos, with white denoting the icons’ focus or purpose and the gradients acting as support. The font for Latitude and Lumiere was also chosen with intent. We used a rounder Sans Serif that was uncomplicated but friendly, representing how the company balances the accuracy of its data with the creativity of its insights. To bring life and interest to areas where content was minimal, we developed patterns to act almost like wallpapers.

Lumiere is highly interactive and engaging. To bring that same feeling to the website, we animated parts of the design that were previously static. Big Human designers used Adobe After Effects and an HTML5 canvas to make the design’s branded components more dynamic, 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 own team of application developers that use 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 CMS that’s easy to use and manage. Part of this migration included working side-by-side with the Latitude team to make sure they were fully up to speed with all of the new tech integrations.