NX-IFY by

Client

Lexus was planning to launch its luxury crossover vehicle NX. To celebrate the launch, we put all of our efforts into creating a beautiful application together with TMRW from London.

CHALLENGE

Lexus was looking for an innovative smartphone app to engage their target audience with their new car model’s design around the campaign theme ‘Striking Angles. Lexus’ recent car design is dominated by polygons of sharp edges. The first part of the project was an experimental R+D phase where we gathered inspiration from all directions: nature, technology, and architecture.

Challenge
Challenge

Idea

Our team came up with the idea of turning the camera’s image into a real-time audio-reactive polygon art, which we created in two different visual styles. The user can take photos and videos and save them to the camera roll or share them on their social profiles right from the application. We also added a control, allowing the photographer to change the level of detail on the fly.

The wireframes

When defining an application we routinely start with low-level drawings and drafts in order to create a simple user journey with intuitive interactions. The app’s functionality was validated using wireframe prototypes.

Multi-platform
International Applications

Lexus wanted to offer the app for at least 90% of smartphone users so our team developed it natively for both iOS and Android parallelly. The app was released in 20 different languages and for 30 countries.

Nexus
  • Android icon
    Android
    • +
  • iOS icon
    iOS
iPhone
iPhone Preview

Design

Clean. Flat. Nx.

Visual Language - Icons

Visual language

We designed every interface element in a unique polygonal style to achieve more engagement with the NX’s design. Our team then animated most of the interactive elements and defined the transitions between the different states of the app.

Interfaces

To avoid typical boring lists and tools, we designed unique layouts respecting the main interaction conventions and reinvented traditional elements in an animated polygonal style.

  • Interface 01
  • Interface 02
  • Interface 03
  • Interface 04
  • Interface 05

Technology

Delaunay Triangulation in Real Time

Triangulation was the base of our real-time effects. The Delaunay Method maximizes the minimum angle of all the edges of a triangle with very good performance.

  • The Delaunay triangulation
    The Delaunay triangulation with all the circumcircles and their centers (in blue).
  • the Voronoi diagram
    Connecting the centers of the circumcircles produces the Voronoi diagram (in blue).

The Effects

We prototyped three real-time visual effects and selected two for the final release of the application. The first effect, Mesh, is more abstract and distances the result more from the original image. Decor on the other hand is an overlay on top of the camera’s image with filled and outlined forms.

  • Effect 1
    Mesh
  • Effect 2
    Decor
  • Effect 3
    Surface

Audio reactivity

An important request from the client was to create a multi-sensory experience. Therefore, we decided to include another dimension: the device’s microphone and an audio track. Users can switch between the two and control the audio reactivity of the input. The result is the dancing of polygons on the screen while the image is still.

Audio Reactivity - Waveform