Hungama :
complete redesign.
Completely redesigned the interface of the Hungama Music App, while also integrating the OTT video streaming feature. Ensuring that both functionalities are seamlessly delivered with an exceptional user experience that met industry standards.
INTRODUCTION
As the sole UX Designer for the firm, I had the opportunity to completely overhaul the Hungama Music App, now available for download on both Android and iOS platforms. The Hungama app was designed to be an “Entertainment Super App” to offer users a one-stop-shop for both music and video content consumption. The app is targeted towards users in tier II and tier III cities in India, who can enjoy a wide range of entertainment content at affordable prices.
My responsibilities as the UX Designer included conducting extensive Design Research, running Design Sprints, creating User Flows, Rapidly Prototyping multiple screen design ideas, and User Testing to choose the best solution. I designed the app for multiple devices, including mobile, tablet, website, and OTT, while also consulting on the UI design of the app and completing all UI-designed screens.
Furthermore, I assisted in integrating the app into Xiaomi Music, Vi (Vodafone Idea) Music, Oppo and Vivo Music, ensuring a seamless user experience across all platforms.
Design brief
Hungama Music and Hungama Play were two separate apps for audio and video streaming respectively. However, to make content discovery easier, it was decided to merge the OTT platform into the audio app. As the UX designer, I was brought in to lead the complete redesign of the Hungama Music app. The interface of the music app was outdated, prompting a complete redesign. Henceforth I was given a brief to -
"Completely redesigning the interface of the Hungama Music App, while also integrating the OTT video streaming feature. It was crucial to ensure that both functionalities were seamlessly delivered with an exceptional user experience that met or exceeded industry standards”
Problem Statement and Vision:
As two of the previous applications were being merged, the abundance of different content types and multiple feature sets posed a risk of confusing the user, as noted by the Hick-Hyman Law,
“The time it takes for a person to make a decision increases as the number of possible choices increases”.
The existing outdated UI and poorly organized iconography only exacerbate this issue, with many features and content elements not being utilized to their full potential, ultimately leading to a poor user experience.
Vision: Our redesign for the Hungama Music app has a clear vision to improve the following areas -
Navigation: The navigation system will be simplified and arranged in a proper hierarchy, ensuring easy access to different features and content types.
UI Design: A new design system will be created to update the entire user interface.
Functionality: All features and arrangements will have clear directions on what each function does, and provide obvious feedback to users.
Accessibility: The app will be made more inclusive to different users.
UX Process
To begin the redesign process, I conducted comprehensive research on various music and video streaming applications to understand their strengths, weaknesses, and unique selling points. Through open-ended conversations with different user demographics, I gained insights into how audio and video streaming media fit into their daily lives.
Using the insights gathered from primary and secondary research, I developed "How Might We" questions and generated potential ideas/solutions for each issue identified which was noted down in Miro Board’s sticky notes.
I utilized this data to create the entire Information Architecture of the application,
Subsequently, Multiple Prototypes were created based on these ideas and were reviewed with the product management team to select the best prototypes.
Finally, the prototypes were User-Tested to determine the best-performing solution.
Ideation
Although the UX process was quite messy, we were able to glean valuable insights and generate a wealth of creative ideas, which were carefully cataloged and organized within the Miro board.
Making the information architecture
Drawing from the insights we gathered, we developed a comprehensive information architecture that ensures users can seamlessly navigate and access the content they desire.
Wireframing
After developing insights from user research, I proceeded to create multiple low-fidelity wireframe prototypes. These were discussed with the product management team to determine the most effective prototypes.
high fidelity prototyping & testing
High-fidelity wireframes were created to enable actual users to interact with those wireframes to identify their touchpoints, pain points, and areas for improvement.
Ui foundation & design system
To establish a brand new design system, we began by cataloging and grouping every page and functionality in the existing wireframe.
Before beginning the UI process, we held a meeting to determine the specific adjectives that we wanted the brand's design to visually communicate. Words which stand out were Super, Bold, Fun, Premium, Playful and Elegant.
To establish a brand new design system, we began by cataloging and grouping every page and functionality in the existing wireframe.
A systematic approach was employed to identify all the common atoms, molecules, organisms, templates, and pages that comprise our UI components in a methodical manner. In addition, we adhered to a consistent color palette that includes blue to not only express our brand but also differentiate us from competitors.
introducing the revamped application!
Ui language for inclusivity
Based on a Research, we found that 90% of internet users in India prefer using their local language to complete tasks online. Therefore, we made the decision to offer users the option to choose their preferred app language.
dynamic music player
We have implemented a dynamic music player that offers a more seamless music experience to our users. As we understand that the transition to a new system may be challenging, we have included a tooltip feature to guide users along the way.
For a more immersive viewing experience, users can simply turn their phone to enjoy the music video in full-screen mode.
everything related to a movie in just one page
The Movie section provides users with a comprehensive collection of all relevant content and information related to each film. To make the browsing experience more engaging, the section features a trailer playing prominently at the top of the page.
everything related to an artist/celeb in just one page
We have created a dedicated page for each artist/celeb that provides easy access to all their music, movies, videos, information, news, new releases, and merchandise in just one place.
CHurn, Burn, and earn
We also provide users with a unique opportunity to earn coins through regular usage of our application. These coins can then be redeemed for exclusive products, further incentivizing users to engage with our platform.
Additionally, users can easily browse and explore various tasks and activities that enable them to earn coins.
UI BECOMES GOLDEN FOR THE GOLD USERS
Buying a Gold subscription changes the primary “Blue” UI color to “Gold”. It also changes how their app icon appears making the user feel the premiumness.
multidevice integration
Once the mobile application design was finalized, the next step was to integrate the design into various devices, including Tablets, Websites, and OTT platforms ( currently under development ).
Unable to share the complete set of screens due to confidentiality reasons.
feedback & analysis
Prior to launching our application on the iOS platform, our product team and I had the opportunity to participate in Apple's App Accelerator program. This program enabled us to gain valuable insights on the latest advancements in the Apple ecosystem and implement them through guidance provided by the Apple team. We also had a comprehensive UI/UX review session, which helped us to fine-tune our design before launching on the platform.
Following the implementation of valuable feedback from the Apple Team, we successfully launched our application on the iOS platform in November 2022, which is 10% of our user base. The Android version was subsequently made available to 30% of our users.
Within a month of launching our iOS application, we received valuable feedback, complaints, and suggestions from our users. To address these concerns, I carefully recorded each one and organized them based on their frequency of occurrence. Next, I ideated and created prototypes to determine potential solutions to the most commonly reported issues. By doing so, we can ensure that these solutions are implemented before the complete launch of the Android version, which accounts for the majority of our user base.
What’s in future?
At the time of writing this case study (April 2023), our application has been launched on both iOS and Android platforms. While the initial launch encountered technical bugs, work on fixing them is still going on.
The application’s design was predominantly established in 2020. As design trends continue to evolve every 2-3 years, we are currently updating and enhancing our design language to align with the latest standards and user expectations of 2023.
The website is currently undergoing rigorous testing to ensure a seamless user experience and will be launched as soon as any remaining bugs are fixed. The design for OTT has been completed and is currently in the development phase.
Our application has been successfully integrated into Xiaomi Music and VI (Vodafone Idea) music applications. We are currently working on integrating it into Oppo and Vivo's inbuilt music platform, which will make the application available to 70% of Indian customers.
Stay tuned for updates on these developments :)
