Case Study — Control Mi Hi-Fi Prototype

"Control Mi" is about music passion, a Raspberry Pi and feeling in control of a massive music library.

Flavio Lamenza
Draft · 4 min read

My client programmed a mini-computer called Raspberry Pi to control his powerful amplifier, TV, sound speakers and Hard-Drives with tens of thousands of songs.

The good news is that he programmed his Raspberry Pi to fit his needs to play flawless music.

The bad news, it takes him too long to type and find songs with this :

OSMC open source remote control

The Problem

He wants to easily access his music library and find songs to play on his Hi-Fi Stereo.

The Solution

Create an app to give him a search input and keyboard.

Wireframe

First screen: The user click on the search input.
Second screen: he writes the name of the song.
Third screen: Using predictive search some options of names of artists, playlists and albums are presented.
Fourth screen: The song is playing and the user can “quick add” a song to the top playlists.

Wireframe with some playlist options (on the 4th screen).

Name of the app

The name “Control Mi” is based on the musical note Mi. The idea is to combine his passion for music with “feeling in control”.

Research and Design Guide Lines

First of all, to start this process I went through John Maeda's Law of Simplicity and decided to work with:

Reduce — How simple and complex does it have to be?
Time — Saving time feels like simplicity.
The One — Subtract the obvious and add what is meaningful.

With this in mind it was time to spend some quality time creating the Mood Board. As you will see below, I created a Colour Palette and also a gradient following the colour pattern so I could have a better picture of the colours and feelings around my research.

The first Mood Board I created for Control Mi.
Interesting, but I was not happy with the contrast in these Palettes.
At this moment I was really happy by discovering this gradient mixing some of the colours.

Second Mood Board, And Why?!

At this moment (as you can see above) I had created four options of palettes and the combinations of colours was not working as a mix of contrast and hues. I then decided to carry on and experiment with a second Mood Board, which you see below:

Started with some delightful contrast of blues and orange.
Yes! I now have a powerful and beautiful contrast of orange/purple and also 3 shades of blue.

Typography

After I conducted tests with serifed fonts, I decided that Roboto had not only an amazing look and feel, but also loaded really fast on the screen.

Roboto, a font created by Google.

Google Material Design

I am following the Google Material Design Guidelines, because it has a visual language for my users that synthesises the classic principles of good design with the innovation and possibility of technology.

The Outcome

After testing, the app was turned into a clickable prototype that allows the user to do a search and find his specific song with only 4 simple steps.

Home screen of Control Mi with the Playlist "Classical" selected.

Link to test the Prototype:

In this link you will be able to test some playlists, interact with "Recent", "Artists", and "Albums". Also you may follow the main Journey to do a search for "Beck" and select to play "Sound and Vision".

https://marvelapp.com/562g691/screen/25980777