Case Study

Brain.fm

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

Hero
01

Client

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

Client
02

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.

Challenge
03

Solution

Brand Refinement

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

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

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 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.

Brain Logos

Brand Personality

  • Human
  • Direct
  • Friendly
  • Trustful
  • Transparent
  • Helpful
  • Effective
  • Professional
  • Warm

Personality in Proportions

Personality 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.

Color Psychology Color Psychology
Color Pallettes Color Pallettes Color Pallettes
UX/UI

UX/ UI Process

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.

UI Process

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.

Communicating

Visual Design

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

Website

Live version

Visual Visual

Webapp

Visual Visual

App

Visual

Download the App

Development

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.

Video
Development Development Development

Let’s work together

Get in touch with our experts to review your idea or product, and discuss options for the best approach

Get in touch