PROJECT REPORT (BCG602)
ON
Music App Redesign
Submitted in Partial Fulfillment for the Award of Degree of
Bachelor of Engineering
in
COMPUTER SCIENCE AND DESIGN
Submitted by
A SHEEBA TASKEEN YASHASWINI B C
1MP22CG001 1MP22CG060
Department of Computer Science And Design
CONTENTS
Abstract
1.Introduction
2. System Specifications
3. Implementation and Results
ABSTRACT
In the digital age, music streaming applications have become the primary way users
discover and enjoy music. However, many existing platforms struggle with poor interface
design, confusing navigation, and limited personalization, which can lead to a frustrating user
experience. This project focuses on redesigning a music streaming application using user-
centric design principles to address these challenges and enhance overall usability.
The project began with extensive user research, including surveys and interviews, to
understand user needs, behaviors, and pain points. Common issues identified included
cluttered interfaces, hard-to-navigate menus, and impersonal music recommendations. These
insights formed the foundation for the redesign process.
Wireframes were created to outline the app’s structure and user flows. These low-
fidelity sketches helped in organizing the layout and planning the navigation. Following this,
high-fidelity mockups were developed using Figma, focusing on a clean, modern aesthetic
with intuitive design elements, consistent iconography, and accessible typography. The visual
design aimed to create an engaging and easy-to-use experience.
Interactive prototypes were then built to simulate real user interactions. Usability
testing with a diverse group of users provided valuable feedback, leading to several
refinements. Key improvements included streamlined navigation, personalized
recommendations based on listening history, and enhanced accessibility options such as
adjustable font sizes and high-contrast themes.
The final product is a visually appealing, easy-to-navigate music streaming
application that prioritizes user needs. By combining research-driven insights with thoughtful
design and iterative testing, the redesigned app offers a more intuitive and personalized
listening experience. This project highlights the importance of user-centered design in
creating digital experiences that are not only functional but also enjoyable and inclusive.
CHAPTER 1
INTRODUCTION
The way users interact with music has significantly evolved with the rise of
smartphones and streaming platforms. Music applications have transitioned from being
simple playback tools to becoming integral lifestyle companions that influence daily habits,
moods, and emotional well-being. As digital experiences become more refined across all
domains, users now expect the same level of sophistication, personalization, and ease-of-use
from their music streaming platforms. However, many existing applications still fall short,
with issues such as non-intuitive interfaces, cluttered layouts, and generic user experiences
that fail to cater to individual preferences.
In this context, the need for a user-focused redesign becomes evident. This project
introduces a reimagined music streaming application that aims to bridge the gap between
functionality and emotional resonance. With a strong emphasis on modern design aesthetics
and enhanced usability, the redesign focuses on creating a seamless and engaging user
experience. The approach prioritizes clean interface design, streamlined navigation, and
features tailored to personal listening habits and preferences.
Figma was chosen as the primary design tool for its collaborative environment and
powerful prototyping capabilities, enabling an efficient and iterative design process. The
report that follows outlines the design thinking and methodology behind the redesign,
grounded in user research and supported by best practices in UI/UX. Through this project, we
aim to demonstrate how thoughtful, user-centered design can transform the way people
interact with digital music platforms.
CHAPTER 2
SYSTEM SPECIFICATIONS
To ensure the successful execution of the redesign, the following technical and design
specifications were followed:
- Design Tool: Figma (for wireframing, high-fidelity UI design, and prototyping)
- Design Approach: User-Centered Design (UCD), with iterative refinement cycles
- Target Platforms: Mobile devices (Android and iOS)
- Target Users: Music app users aged 16–35, with a focus on usability and personalization
- Testing Tools: Interactive Figma prototypes for remote usability testing sessions
- Core Functional Screens:
- Splash Screen
- Onboarding (Account Creation & Personalization)
- Home Screen
- Weekly Music Mix
- Now Playing
- Up Next Queue
- Library
CHAPTER 3
IMPLEMENTATION AND RESULTS
Implementation
The implementation phase has several key stages:
1. User Research:
Surveys and informal interviews revealed issues such as complicated navigation,
unresponsive controls, and lack of relevant recommendations.
2. Low-Fidelity Wireframes:
Initial sketches focused on defining structure and layout for primary app screens.
3. High-Fidelity UI Design:
Developed in Figma, with a consistent dark theme, modern typography, and clean
iconography.
4. Interactive Prototyping:
Enabled simulation of user interactions and flows using Figma.
5. Usability Testing and Iteration:
Feedback was incorporated to enhance controls, layout, and functionality.
Key Improvements:
- Navigation: Simplified bottom navigation bar with distinct icons
- Playback Controls: Enlarged buttons with clearer layout
- Playlist Management: Drag-and-drop functionality
- Visual Design: Modern dark theme
- Search: Smart suggestions and genre-based filters
Wireframes:
Onboarding Screen
Splash Screen Onboarding Screen(Create Account) (Choose the Artists you like)
Home Screen Weekly Music Stream
Library Now Playing
Up Next
Description of frames
1. Splash Screen: This is the initial screen that appears when the music app is launched. It
features a vibrant orange gradient background with a stylized cloud icon, the app's tagline
"Discover music you love" prominently displayed, and a "CREATE AN ACCOUNT"
button at the bottom. The purpose of this screen is to provide a brief introduction to the
app and its core value proposition while the app loads in the background.
2. Onboarding Screen (Create account): This screen guides new users through the
account creation process. It prompts users to "Create account" and provides fields for
entering their email and password, along with a "Sign Up" button. There's also an option
to sign up with Google, indicated by the Google "G" logo. This step is crucial for
personalizing the user's experience and saving their preferences.
3. Onboarding Screen (Choose artists you like): Following the account creation, this
screen encourages users to personalize their music experience by selecting their favorite
artists. It displays a variety of artist profile pictures arranged in circles, along with the text
"Choose artists you like." A "Continue" button at the bottom allows users to proceed once
they've made their selections. This helps the app learn the user's taste and provide relevant
recommendations.
4. Home Screen: This is likely the main landing page after the user has logged in and
onboarded. It presents various sections to explore music, including "New Releases,"
"Trending," and "Related Singers." Each section displays album art or artist images,
suggesting different ways for users to discover new music. The layout appears to
prioritize visual discovery and quick access to popular content.
5. Weekly Music: This screen seems to focus on curated music content, specifically
highlighting a "Your Weekly Mix" playlist at the top. Below that, there are sections for
"Playlists" and "Recently Played," offering users different ways to access and manage
their music. This screen emphasizes personalized recommendations and quick access to
recently enjoyed tracks.
6. Stream: This screen displays the currently playing song. It shows the album art
prominently, along with the song title, artist name, and potentially information about the
stream or radio station. Controls for playback (like play/pause, skip) and possibly volume
are likely located at the bottom. This is the central screen for music playback and
engagement.
7. Library: This screen provides access to the user's saved music and collections. It features
a sidebar navigation with options like "Music," "Podcasts," "Following," "Playlists,"
"Recently Played," and "History." This allows users to easily navigate their saved content
and revisit their listening history.
8. Up Next: This screen displays the queue of songs that will play next. It lists the
upcoming tracks with their album art and artist names. Options to reorder or remove
songs from the queue are also visible, giving users control over their listening experience.
9. Now Playing (Expanded): This screen shows an expanded view of the currently playing
song. The album art takes up a significant portion of the screen, and playback controls are
clearly visible at the bottom, including options for repeat, shuffle, and potentially sharing
or adding to a playlist. This screen offers a more immersive experience focused on the
current track.
Results
The redesigned music app prototype demonstrated tangible improvements in both usability and
visual appeal. Usability testing revealed a significant increase in user satisfaction, with most
participants finding the app easier to navigate and more enjoyable to use. Key highlights
included:
- Enhanced User Engagement: Increased interaction with the app
- Improved Task Efficiency: Faster task completion
- Positive Visual Feedback: Consistent praise for dark mode aesthetics
- Accessibility: Improved button sizes, contrast, and layout for usability
These results confirmed that the redesign met its objectives of enhancing user experience and
aligning closely with real user expectations.
