Carol

Overview

Carol is a minimal and beautiful lyrics app for macOS. Unable to find a quick and uninterrupted way to look up for a song’s lyrics, I designed and developed Carol.

Role

Product Designer, Developer and Illustrator

Problem

I am a huge music buff and often find myself heading to Musixmatch and Genius for my lyrics appetite. While working, I don’t want to open a new tab in my browser, head to Musixmatch or Genius if I want to look up for lyrics of a track every time. It’s a tedious effort which I always try to avoid. If you want to have a quick look of the lyrics without interrupting your flow, no existing product helps you with that. iTunes has the option to show lyrics but then again you will have to not only open the app but also click twice further to view the lyrics - something which you would not like to do every time. Earlier, Spotify also used to have the same feature to show lyrics as the track progressed. Musixmatch also released a newly fledged desktop app for lyrics. I tried it to find out that it is slow and only works as a window app. So for most of the options present, typical flow looks something like below. Imagine repeating this every time you want to view the lyrics.

I looked for alternatives only to find that there were none that matched my preferences. Most of them were having the interface from pre-macOS Yosemite era. It was then I decided to build one. The proposed solution -

The above proposal saves the hassle of opening an app from Desktop and gives the ability to view lyrics even if you are in the full-screen mode. Also, a nice simple keyboard shortcut can launch a menu bar app which means viewing lyrics is just one effort away.

Research

The vision was to have a way to get lyrics of a song without interrupting your workflow. I started by exploring the competitive products to gather information about what they are offering and what not. The number of such products was less than I expected so I knew I could not rely heavily on this process. As mentioned earlier, most of them were not updated for years. The one from Musixmatch had no menu bar support which I assumed is crucial for having an uninterrupted experience.

Apart from this, I asked some people a couple of questions -

1. How often they listen to music per day / week / month?
2. Whether they use any stream music service or not?
3. How often they look up lyrics of a song?
4. What lyrics services i.e. Musixmatch, Genius, iTunes or any other do they use?
5. How do they use these services - Mobile Apps, Desktop Apps, Web?
6. Do they feel some kind of interruption in accessing these services?

Wireframes

Iteration 1

Did not work because -

1. It wasn’t technically possible and only a line could be read properly at a given time.
2. The colour of bottom information bar depended on the artwork which could have caused contrast problems.

Iteration 2

This iteration actually went through development. It had a couple of problems -

1. Legibility issue.
2. No option to hide the artwork which might interfere with the text and create poor contrast.

Iteration 3

This is the final iteration -

1. Better contrast irrespective of the background album artwork as the text container is dark.
2. Option to change type size for better legibility.
3. Meta information display such as Explicit tag, etc.

Visual Design

Initially, the major challenge in visual design was to make sure the text is legible irrespective of its size and the background. After it was sorted I faced another challenge of having a consistent style of illustrations. These illustrations were to be used for various UI states. I have written an entire article for that - The State of Stateful UI. Here is the state transition flow -

Different views with consistent style of illustrations -

I also added a neat progress bar at the bottom to track how much lyrics you have covered. It works in sync with the scrollbar -

Icon

The idea was to design an imaginary creature which sends you the lyrics of a song magically (hence, the wings). I also tried to put some level of depth and details which can also be seen in other macOS apps.

Learnings

The first version I did, had legibility issue that I got to recognise only after release. Since the visual design was derived from the album art of the track, sometimes its colour would interfere with the text colour. Though I put a subtle gradient over the artwork which worked most of the time, it was not fail safe. For a lyrics app, this was a blunder as there was no option to hide the artwork. I realised these mistakes and rectified them in the next release.

I started with the development with the free tier of Musixmatch API as they were not responding to my query of accessing full API thinking that by the time I am done with development I would have access to full API. They replied after constant efforts from my side only to tell me that access to full API will cost at least $1000 per month. Currently, the app shows only 30% of the lyrics. For the workaround and to have an uninterrupted experience I provided an option to open the lyrics in the browser so that one can view the rest of the lyrics. I hope to change it soon as soon as I am able to get full API access.

That's all folks