Case Study

Brain.fm

UX/UI, Mobile, Desktop & Web Development
for AI-composed Music-for-the-Brain Platform

Client

Brain.fm offers focus, relaxation & sleep support through AI-composed music, offering unique acoustic features that are designed to have effects on neurophysiology.

Challenge

Qubika was approached to help Brain.fm drive the look & feel of its brand towards a more personalized and communicative approach. From logo enhancements, a new color palette and brand book, brand collateral and marketing materials, a complete UX/UI makeover of Brain.fm’s website, mobile & web app to building Brain.fm’s MacOS desktop app, we took the lead on new concepts aimed at an intuitive enhanced user-experience.

Solution

Brand Refinement

When it came to our first challenge of refining Brain.fm’s personality, we opted for applying color psychology. To mirror Brain.fm’s features and offering we transformed the way the brand visually communicated with its user base towards a more transparent and approachable look & feel.

UX / UI Process

We then applied our updated branding to the entire Brain.fm eco-system, prioritizing straight-forward user experience and innovative brand-user communication through the concept of natural language.

Development

A detailed and well-documented UI Kit made the transition to the development of the new Brain.fm website and platforms seamless and efficient. In addition, we built a new MacOS desktop app that completed the 360-Brain.fm-ecosystem.

Deliverables

Branding
UX/UI
iOS & Android Development
MacOS Development
Brand Collateral
Marketing Materials
Web

Brand Refinement

Brand personality transformation

To help the Brain.fm brand grow towards developing a distinguished personality, we identified natural attributes and character traits resonating with the brand and its offering.

Brand Personality

Human
Direct
Friendly
Trustful
Transparent
Helpful
Effective
Professional
Warm

Personality in Proportions

Applying Color Psychology

A thorough deep-dive into color psychology resulted in an organic visual representation of mental states and songs within the platform.

We centered the selection and matching of each color and state around the feelings and senses we wanted to convey. As for the Brain.fm brand, we chose cool colors within the blue spectrum to emit the desired sensations of serenity, calm and comfort.

Each mental state has its own color.

The path towards a new user journey

We started our UX journey by rearranging and optimizing all platform-specific flows. We then moved over to creating user personas to clarify user types, empathize with them and understand their user journey.

Working side-by-side with the client, we were able to leverage existing insights and research.

Communicating through Natural Language

As part of the brand refinement, our objective was to make Brain.fm more human, friendly, direct, reliable and warm. One of the resources we leveraged to translate these attributes into our UX/UI was the use of natural language, resulting in a straight-forward and easily-understandable communication approach.

Visual Design

Last but not least, we applied our UX/UI to the entire website and platform.

Website

Live version

Webapp

App

Download the App

brain.com

Development

Bringing the new brand approach to life

Our thorough and detailed UI KIT facilitated the transition to our development team tremendously and allowed for reusable components when applying the brand new design to the website, mobile and web app. In addition, we leveraged the existing web app to build Brain.fm’s very own MacOS desktop app from scratch in Electron JS. Highlights include touch bar functionalities, enabling an offline mode for music consumption, and a high performance level.