Clip

Capture your own music moments with lyrics and much more.

Clip is a new fun way to share your videos, with music and lyrics! With Clip you can create music videos with overlapping the lyrics of the song you chose. You can share these videos with the app community or on Facebook, Twitter, and Instagram. Texts can be customized to change color and font.

Musixmatch is a music player that shows you song lyrics meanwhile you’re listening to music. You can connect Musixmatch with Spotify, Apple Music and other music services. Musixmatch has a community of contributors from all over the world, that every day sync, add and translate lyrics.

The way the app works

Designing for people

You simply search for a song that you wish to become the soundtrack for your 20 second video or choose one from your phone’s music library. Hold down the record button to film your video. Then, the song’s lyrics can be found in Musixmatch’s database, they become overlaid on the resulting video, from which you can adjust the font and colour. You’re then free to post your video to the Clip app itself and optionally share on social networks.

When you think about a new feature to implement you have to understand the needs of the users. For doing it we analyzed the available data and did research on users through focus group, surveys and user tests.

Active Users: Over 1 million

Video: Over 150k per month

Platform: iOS

Lyrics: Over 14 million

Year: 2014

Active Users: Over 50 million

Lyrics: Over 14 million

Languages: 58

Platforms: Web, iOS, Android,

Active Users: Over 1 million

Video: Over 150k per month

Platform: iOS

Lyrics: Over 14 million

Year: 2014

Active Users: Over 50 million

Lyrics: Over 14 million

Languages: 58

Platforms: Web, iOS, Android,

Lyrics are all about feelings, memories and emotions. They remind us of something and we all connect some songs to our life. We wanted to have an easy way for doing that.

Designing the idea

Designing for people

Clip was the first major challenge I faced when I started working at Musixmatch in June 2014. As a new app without competitors, we had to experiment a lot and make usertesting for every change made. We did market analysis to define

When you think about a new feature to implement you have to understand the needs of the users. For doing it we analyzed the available data and did research on users through focus group, surveys and user tests.

the target like: teenagers, music lovers and lyrics enthusiasts. We made app beta versions, tested usability along with surveys and videos to understand the pain points.

I have created a mind map to define the information architecture and links between the pages. I designed in pencil the basic layout of the app with contents and icons. Then I realised the flow of all the app with which we managed to have a wider overview of the navigation.

As Clip being a new product, I had to think about the brand and then also about the app icon. Finally, I have prepared the guidelines in which I have collected the colors, fonts, icons and various elements used within the UI.

My tools

Data Analysis

Google Analytics

App Annie

Facebook Analytics

App Figures

User Research

Usertesting.com

Mindnode

Pencil & Paper

Team Management

Trello

Google Drive

Mail

Slack

User Interface

Photoshop

Illustrator

Sketch

Design System & Guidelines

Designing for people

Creating the guidelines was very important because it helped me make the design process faster.

The App Icon

When users search for the app in the app store, the first thing they see is the icon. That's why it's very important to attract attention and bring users to find out more about the app.

I tried to keep the icon simple so I started by using the letter "C", using bright colors inspired by our target audience, that is, teenagers.

With the addition of a circle at the top right I wanted to recall the shape of a camera.

Timeline & Discover

Designing for people

As an app that allows you to create a video portrait navigation foresee a vertical scroll. Following some usability tests, we found out that many users did not understand how to navigate the app. Then through the tips and a tour on the screen we explained how to navigate the app.

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Make a video & Share

Designing for people

The flow on which I worked a lot was the one about creating videos. I tried to speed up the process by reducing it to 4 steps: select a song, customize lyrics, record a video, share.

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Clip landing page

I worked on several aspects of Clip app, including online communication. I created the visuals for the social campaigns and the landing page on desktop and mobile. I worked with the team that created the official video of the app and the front-end developer.