TringTrim — Chop a song into a Ringtone(UX/UI Design Challenge)
Recently, I was given an assignment of designing a solution for a —
Quick and simple ringtone maker that lets its users select any song from their phone’s library and chop off a desired part of the song to save it as a ringtone.
Before I get down to explaining my solution and everything, It would be better if you get to experience the application first. This would allow you to understand the approach better from both a user and a designer’s frame of mind.
Hit the link below to use the prototype:
Hope you had a nice experience, let me dig into my experience and challenges of building this solution.
My Process
Step 1: Understand the Problem/User Research
Let’s begin with the question of why do certain people require to put the desired song as a ringtone?
After scrolling through multiple articles and history about ringtones, I finally landed on a research by experimax which links a person’s ringtones to their personality, and this made perfect sense to me.
Humans are social animals, we are bound to interact with new people probably every day and we strive to leave a good impression, and at any time if our phone rings in the middle of a conversation we wanna make sure our ringtone choice isn’t breaking the deal for us.
My takeaway from the research is that there are broadly two types of user:
Standard Ringtone User: Using a ringtone already installed on your phone could mean that you’re down to earth and practical. You’re happy with the simple things in life and choose to spend your time on things that matter more than a ringtone.
Custom Ringtone User: If you stay current and use hit pop songs as your ringtone, you are a person who loves variety. You are adventurous and love new experiences. You probably do your best to stay aware of current trends and change your hairstyle as often as you change your ringtone.
My focus is gonna revolve around the 2nd type of user from here.
Step 2: Competitive Analysis/Market Research
Competition is always a good thing. It forces us to do our best. A monopoly renders people complacent and satisfied with mediocrity.
Nancy Pearcey
To conduct my analysis, I browsed through various applications on the web and play store in order to understand how the problem is being solved currently and to filter any usability issues.
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:
- 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.
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.
The inspiration behind the crop window came from Whatsapp’s video crop interface —
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 —
- 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.
- 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
1. Library and Files Tab
Smoothly locate your desired song using a quick search or manually detect it from a known folder.
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 —
Conclusion
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 :P
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.
That’s all folks!
I tried so hard and you got so far but in the end, it does matter. Cheers.
