Case Study
UX/UI, Mobile, Desktop & Web Development
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.
02
Challenge
December Labs 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.
03
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.
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.
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
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.
