Home > User Experience > TringTrim — Chop a song into a Ringtone(UI/UX Design Challenge)

TringTrim — Chop a song into a Ringtone(UI/UX Design Challenge)

TringTrim — Chop a song into a Ringtone(UI/UX Design Challenge)

To my surprise, almost all the apps I tried had a very similar experience, nobody tried to reinvent the wheel or fix each other’s usability problems.

1. One major problem was in the editor itself, it gave too many options to a user to choose from.

The time it takes to make a decision increases with the number and complexity of choices.

Hick’s Law

2. My second problem was that the crop handlers did not move along when I traversed through the song. This was a major usability problem in my opinion.

Also, the overall user interface did not feel to be following a modern approach to interaction design.

Step 3: Brainstorm & Wireframing

The user flow was fairly simple, a user had 3 major checkpoints to reach their goal of setting a custom ringtone:

  1. Locate the song: There were 2 ways to do this — 1: If a user knows the name of the song, perform an elastic search on the whole library of audio files. 2: Sometimes an audio file might be received from WhatsApp or any other source, in this case, there is a probability of the file having a different name, hence, allowing the user to manually reach for the directory option.
Home Screen Wireframes

2. Crop the song: If we think of it, a ringtone has the ability to only last about 35–40 seconds depending upon the telecom subscriber’s set module. So it makes no sense to provide an infinitely large crop window to the user. For now, I am assuming a max limit of 40 seconds to be kept for the crop window. Secondly, there can be 2 ways of traversing a song — 1:By dragging the waveform, this might not be very intuitive and may cause a usability issue while traversing long waves. 2: By providing a seek bar(like a music player), this might have its own usability problems but for now I am gonna mix both these approaches to minimize error.

Crop Screen Wireframe

The inspiration behind the crop window came from Whatsapp’s video crop interface —

Ugh, that’s me

Users spend most of their time on other applications. This means that users prefer your app to work the same way as all the other apps they already know.

Jakob’s Law

Now coming on to the explanation of how the cropping would work —

  1. The user will have a resizable cropping window to select the duration of the ringtone(max 40s) and this window will only be resized (not move across song) when the handles are used. The traversal of the song won’t affect the position of this window.
  2. The traversal of song can be done either by moving the waveform left or right for small movements, or by using the seek bar for large movements.

And the last checkpoint would be saving and setting the cropped audio as the ringtone by clicking on done.

Step 4: High-Fidelity / Interaction Design

Locate Song

1. Library and Files Tab

Smoothly locate your desired song using a quick search or manually detect it from a known folder.

Song Player

Although it’s possible to get the desired file into the editor directly by clicking on the name container, in case the user chooses to play first, they still get an explicit indicator in the form of ‘CHOP IT’.

2. Editor

This is where the main functionality of the app resides.

Why Fade In?

We have all been into sensitive situations where we forgot to turn our mobile phones to silent mode, to be safe having a 4–5 second fade-in can save us from the embarrassment.

And on clicking done —


This was the most interesting assignment I have ever received in a recruitment process, and in a span of 2 days, it made me feel like competing in a designathon as a lone wolf 😛

New Learning: Unlearning and Relearning is a skill in itself, as a designer you have to let go of a lot of your own perceptions and build a connection with your users in order to empathize and solve problems correctly.

I tried so hard and you got so far but in the end, it does matter. Cheers.

Source link