Client: DJVJ

Year: 2020

Tags: Branding / Communication / Digital product / Experience design

Introduction

Habs Akram is a world-renowned Video Jockey (VJ) who has worked in the electronic music industry for over 20 years. He has directed screen content at world-acclaimed events such as the Glastonbury Festival in the UK and the Ultra Music Festival in Miami. He also directed visuals on many club nights, with renowned DJ's such as Carl Cox at Space Ibiza, Paul Van Dyk, Ferry Corston and bands such as Nine Inch Nails and Pet Shop Boys.

In the summer of 2018, a team from London travelled to the studio of CREMA™, in Malaga. For three days both teams worked to define the strategy and the basis on which a new digital product called DJVJ would be built.

Briefing

The project had a precise objective: to create a powerful application for mobile devices with an interface and functionalities that replicate all the tools used by video jockeys. A particularly important focus was placed on the user experience, designed for a generally amateur audience, interested in the world of visuals, music or who like mixing and editing their projections.

In addition to the design and development of the digital product, the creation of a brand and a 360º marketing strategy is required for its launching, with a very important component of ASO for optimisation in the Apps markets (Apple App Store and Google Play).

Research 1

Research and strategy

In the first phase of analysis, all the information about the process and the working methodology of the video jockey was collected. Knowing the technique, the type of content and, most importantly, how to connect the image with the music, was the main objective of this first part of the Research. These inputs allowed a mapping of essential information to address the project from a VJ perspective.

In the next stage, an in-depth study of all the tools and instruments for mixing live videos was carried out; from effect controllers to analogue devices, including the main programs used by professional VJs. Based on this analysis, a trend study was built around the type of interface and aesthetics of the software, and a complete investigation was carried out with all the functionalities and modes of each tool.

Special emphasis was also placed on understanding the community generated around audio-visual creation. The stakeholders present were defined, with special interest in those partners who would give the project a greater presence, including, for example, DJ Seb Fontaine and the device manufacturer Evermix.

Strategically, the brand and the product were centred around a conceptual image that connects three key ideas:

Freedom / Simplicity / Community

These concepts extend to every line of the project: branding, UX/UI design, App development and marketing strategy.

Project development

The DJVJ project was a great challenge for our development team. The requirements of UX, UI and functionality needed to emulate in real time the different devices, mixes and effects made it necessary to carry out the programming in the native languages of each platform, so we had to develop the project in parallel for iOS and for Android, coordinating ourselves so that the whole look and feel was the same in both systems. The complexity of the processes carried out by DJVJ at a visual level was so high that it squeezed the maximum capacity out of the hardware, reaching the limit of what one can do today with a telephone. In spite of the big differences in hardware and software between Apple and Android, a very similar result was achieved on both platforms and, in the end, an incredible user experience for everyone.

App testing

Prototype

In order to define the prototype of the App, we worked meticulously on the UX/UI design, analysing the usability and user experience necessary to fit the tools required on the screen of a phone. With all this information, the navigation flow was defined, and the wireframe is created, where the user is the centre, and simplicity is the link. The result is a prototype that shows 100% of all the aspects and points necessary for the design of the interface and subsequent development of the App: functionalities, effects, fusion modes, navigation flows, elevation system, buttons...

DJVJ goes beyond the aesthetics and functionality: it is about feeling the music through images.

Flujo de navegación

Interface design

In the interface design phase, the CREMA™ team focused on the usability of the controls and the simplicity of the set of elements, as well as providing an attractive aesthetic line with clean shapes and contours. The contrast, the hierarchy of the elements, the shapes, spaces, and colour have been worked on in order to find a useful, attractive, and usable App.

Color

The DJVJ colour palette is designed so that the user can perfectly distinguish each element: effect buttons, display monitors and potentiometers. For this purpose, two shades of grey were set up as the basic colours of the interface, combined with high gloss shades of purple and blue, so as a final result high contrast was achieved.

Elevation system

All the tools for conducting a DJVJ session are available on a single screen, where the different contents and effects can be selected through pop-up windows and drop-down menus. On the main screen you can see both the final mix and the channels that make it up, the parameters of each layer (such as speed or opacity) and a user-customisable effects button panel. Each channel allows you to separately control its sensitivity to the music the device is listening to.

Day mode and night mode

One of the factors considered when developing UX was the range of environments in which the system could be used. This led to the design of two parallel UI mode called Night Mode and Day Mode.

The App is generally intended for use in night-time environments, so the UI opens in Night Mode by default. This design imitates the professional DJ and VJ sets, which are usually quite dark, so they do not generate a large light reflection on the artist in a dark environment. In order to limit the interference with the environment, the Night Mode UI is very dark and offers light contrast only on controls relevant to this environment, so the user does not experience disturbing flashes. The Day Mode was designed for these environments, as it uses noticeably light colours that can be displayed well in very bright environments, even in direct sunlight.

This double UI offers users an excellent UX in all environments where they can work with DJVJs.

Light and dark mode

Marketing

All marketing and communication actions have been planned following the defined brand strategy, seeking the community of users, and transmitting the spirit of freedom and simplicity that surrounds the product. Launch actions, ASO strategy, and the product expansion strategy are still being elaborated.

It is a challenge that goes beyond the aesthetics and functionality as it is about feeling the music through images.

DJVJ exploits the full graphic potential of the best mobile devices on the market.

Marketing 1Marketing 2Marketing 3Marketing 4Marketing 5Marketing 6Marketing 7Marketing 8