TouchTunes
UX/UI Redesign
There has been low retention rate from new users after the first time they purchased credits or picked a song to play on the jukebox. The current interface does its job, but functionally, it presented several issues; it was difficult to understand and navigate. I led the effort to improve the interface from usability and system perspectives
Roles:
Lead Product Designer
Responsibilities:
UX Research
User Interface Design
System Design
Team:
Kesha Patel, member
Minh Luu, member
Roland Dubois, mentor
Problem
The user interface of TouchTunes presents a significant challenge for new users, leading to confusion and discouragement, particularly for individuals who are unfamiliar with similar interfaces especially song queues card, main navigation system and music search. This lack of user-friendliness and inconsistency hampers the overall experience of an otherwise promising music enjoyment and sharing tool, resulting in low retention rates among new users.
The user interface of TouchTunes encounters usability issues on high-traffic screens, particularly the Home screen, where the main navigation displays the currently playing song and the upcoming songs. The current card design, utilizing horizontal scrolling, lacks usability as users find it difficult to determine whether the displayed info card represents the song title or the artist, particularly if they are unfamiliar with the song.
Furthermore, the placement of the search function in an unfamiliar location deviates from the common practice of having a search bar on top or within the navigation bar, following universal design principles.
While this does’t look terrible, it’s uncommon for users to use horizontal scrolling with a search bar right under it.
The lack of a navigational system in the app has resulted in a single-screen interface where all features, such as search, playlists, and credits, are located together. This absence of clear navigation has caused confusion among new users, making it difficult for them to locate specific areas within the app.
No cohesive navigation system in the app to guide users through different sections. The inconsistent font sizes further contribute to user difficulties in comprehending the content and overall user interface. Search results are not categorised.
The Diagram above showcase how many paths to get to the same destination/menu in the app. The interface suffers from a disorganized and cluttered layout, causing confusion and difficulty in navigating the app effectively. “And yes I had a headache myself making this diagram”
The cluttered and complex playlist generation process within the TouchTunes app. The presence of menus within menus, all serving the same function, leads to a lack of user-friendly design and usability issues. Additionally, the limited customization options further diminish the appeal of the playlist feature, resulting in users not finding it compelling enough for regular use.
RESEARCH
Several of the issues stated above were based on my observation whenever someone asked me about the app at the bar and experiences from using the app myself. To validate my problem statements, me and my team conduct a qualitative research; one on one interview with 10 current users from different bars in New York.
9/10
Users struggle to grasp the song queue system, resulting in uncertainty and missed opportunities to have their songs played.
7/10
Said they have to walk new people through the app and teach them how to use the app properly without wasting extra credits.
The Vision
Our redesign vision aims to create a seamless user experience by simplifying the interface, improving search functionality, enhancing navigation, and optimizing the song queue system. We strive to provide a user-friendly interface, quick song search capabilities, effortless navigation, and clear visibility into the song queue.
FEATURES
Home Screen with Vertically Scroll & Dynamic Elements
For a music app, I use the universal system that all users from all background and ages can use without the hassle of learning or getting used to a new design.
Song queue system is now showing the order of the song user requested, instead of hidden behind song queues or pay wall.
Improved Readability
Consistent design throughout the new Home Screen. I aligned every element to the left for faster scanning and set a clear typographic hierarchy by tweaking font sizes and weights for added emphasis on important elements.
Library/Playlist Curation
As this feature has not been utilised at all by all interviewees, because the current design are complex with usability issues with menu within submenu with the same function. Furthermore it lacks of customisation options, users do not find it compelling enough to use regularly.
8/10
Dissatisfy with the current searching system, frustrated over the significant amount of time it takes to find a song when they are tipsy!
10/10
Believe the current interface needs simplification, as the current app is too cluttered with many unnecessary features for a smooth user experience.
Categorised Search System
With new search bar right under “bar name” and “remaining credits”.
Instead of showing a list of unorganised search results (combining artists and everything else into one). The search system will now be categorised into 3 main categories: Songs, Playlist and Artist.
Adding bottom navigation bar
Providing a persistent and easily accessible set of navigation options to home, playlist and account setting options.
Removing lengthy sub menu on Home Screen due to the cluttered layout and utilise bottom navigation bar
I also enhanced the interface by incorporating visual elements and introducing actionable buttons. This encourages users to actively curate playlists, leading to more personalized and engaging experiences.
NEW DESIGN WITH PERSONALITIES AND ACCESSIBILITY
Introducing DARK MODE
I believe aesthetic pleasing designs can attract more users if it showcases a character that interests the user persona we are designing for.
Beside the new light mode, from our interviews the majority of the time users use the app at night, sometimes in dark clubs.
So I added a new dark mode that is more suitable for a night scene with new text values to comply with the WCAG colour contrast guidelines.
EXPLORATION
To address the prominent issue of the song queue card which has caused confusion to many users, I initiated explorations by critically analyzing the crucial information that holds significance for our users. This process was complemented by conducting user interviews, where the song queue card emerged as a major concern, mentioned by 9 out of 10 interviewees.
Here is an overview of the different versions considered during the iterative design process:
IMPLEMENTATION
After testing different variations of designs (A/B testing) and having a final design. We organised meetings with front-end and design stakeholders. We discussed the original problem and checked if the solution that we came up with will solve it.
We also allocated time specially for creating and documenting components based on successful variations. In other words, once a particular design variant proved successful through testing, we will then invest the time and effort to build a reusable component and document it properly to avoid potential technical debt and improve the efficiency of our design system workflow.
Results
A/B Test Performance: The A/B testing unveiled a significant positive impact of the new queue card design, particularly for new users who previously struggled with the current design and opted against further use of the app. Remarkably, 85% of these users conveyed that the new design resolved their confusion about when their selected song would play.
We noticed a 20% rise in the amount of time spent on the app, specifically during playlist curation. Interestingly, some users didn't exit the app immediately after the song request, citing that the new interface enticed them to linger and interact for longer periods. These increases underscore the enhanced engagement fostered by the new design and its effectiveness in promoting user interaction. Given that such significant improvement was realized through a mere visual UI update, it emphasizes the crucial role of meticulous design choices.
Componentization and Extension: In accordance with our agreement with the front-end team, we have componentized the new card design. Each variant was deconstructed into reusable components, which simplifies both implementation and maintenance across diverse areas of the application. Our findings showed a 32% decrease in time taken to complete search and play tasks, while instances of users accidentally purchasing the same song twice fell to zero. These results underscore the successful extension of the card design to various placements and bear testament to the effectiveness of the componentization process.