What's Melo Music?
Melo Music is a music streaming platform, based in Myanmar. It needed a fresh rebranding and UI revamps and a comprehensive design system.
Discover and Analyze
Melo Music CEO talked to me about it needed a revamp design, new features such as Podcast, Feed, and many flows to enhance UX performances. To get a good understanding of the project, I had to use it for a few days from the perspectives of a UX designer to pin the pain points and issues that the current app had. So I came up to the client with these approaches -
- Insights: I had an interview with the target users (which I selected from the people who had been using music streaming apps as a daily basis) about their pain points, wants & needs. I had also taken notes on the client's desires and concerns.
- Competitor Analysis: I also discovered and explored the pain points that users were facing on competitor apps in the market. They lacked
- Proposal: With sufficient analysis of data insight, I made user stories, mind mapping and crazy 8 sketches for brainstorming purposes which would later be proposed to the client to get early feedback.
- Ideation: Next, I moved on to ideation phase where I had to align my brainstorming section to the implementation of design phase.
Design
Before going on fully high-fidelity design, I built a comprehensive design system which met the industry standard. Since I was designing for a mobile app, I read documentation of Material Design and Human Interface guidelines to better understand the nature of the mobile design and to have a better collaboration with developers.
1. Building a Design System: Building a design system which is tailored for Melo Music needed a lot of effort.
- I researched fonts & typography which would suit the best for this project.
- Colors palettes and gradients were iteratively created and tested to enhance the aesthetics of the app.
- Components were made on four levels; atoms, molecules, organisms and templates.
- Semantic tokens were applied for every foundation, colors, components, spacing values.
- Each and every usage of components were documented and annotated.
2. User Interface: On designing UI for Melo Music, user-centric and aesthetic approach were implemented to standout in the industry. Each screen was crafted to enhance the music listening experience while subtly showcasing the value of premium subscription.
Handoff
I worked closely with mobile developers to explain interaction patterns and animation specs. For detailed animations, I used Lottie, some of them were animated in Figma and exported to Lottie, and handed-off JSON files to developers. I also created handed off documentation that contains 4 sections -
- Description
- Anatomy
- Styles
- Usage
Each screen were annotated in the polished UI design file so that developers can better understand how each interaction works, variation of component states and conditions within the flow.
Test
Each feature was been test before publishing. This includes -
- Usability Testing: to identify pain points and UX issues.
- A/B Testing: to determine the most effective interface design that aligns with users' and business's needs.
- Moderated Testing: Users were given tasks to complete. This testing is studied closely to check the interactions between user and the app.
Impact
The revamped Melo Music app delivered strong impacts -
- 87% positive user feedback on the new user interface (based on post-launch survey).
- Increased subscription conversion rates.
- Enhanced user engagement with library (playlists).
- Increased collaboration with other businesses.
