1.

Project Proposal and Requirement Gathering

a. Introduction to the Project:

This project involves designing a Spotify Clone UI using Figma, with the objective of
replicating and enhancing the user interface of Spotify—a globally recognized music
streaming platform. The aim is not just to copy the existing layout but to understand and
implement modern UI/UX design principles that contribute to an engaging and intuitive user
experience.
By creating a Spotify-inspired interface, we will explore the intricacies of user flow, visual
hierarchy, accessibility, and interaction design. The project will include key features such as
home screens, playlists, music players, search functionality, and user profiles, tailored for
both mobile and desktop platforms.
Special emphasis will be placed on responsive design, ensuring the interface adapts
smoothly across different screen sizes and devices. Figma will be used as the primary design
tool due to its collaborative features, component-based system, and prototyping capabilities.
This project serves as a comprehensive exercise in both design thinking and interface
development, offering insights into real-world design challenges and user expectations.
The final deliverables will include wireframes, high-fidelity UI screens, interactive
prototypes, and documentation that reflects our design decisions and user-centric approach.

1
b. Objectives

The primary objective of this project is to design a visually appealing, interactive, and
user-centric interface for a music streaming application inspired by Spotify. Through this
initiative, we aim to strengthen our understanding of UI/UX principles and practices by
creating a seamless and engaging experience for users. The project will be executed using
Figma, a collaborative interface design tool that supports both prototyping and real-time
feedback.

Key objectives of this project include:

 Designing an Intuitive and Interactive UI

The goal is to develop an interface that is easy to navigate and visually coherent,
allowing users to explore music, playlists, and personalized content effortlessly. Each
screen will be designed to minimize cognitive load while maintaining aesthetic
appeal.
 Applying Modern UI/UX Design Trends
We will explore and incorporate the latest trends such as minimalistic layouts, dark
mode support, neumorphism or flat design elements, micro-interactions, and
responsive UI components. This will ensure the design feels current and resonates
with modern user expectations.
 Enhancing User Engagement
Special attention will be given to layout structure, color psychology, typography, and
iconography. Our design choices will aim to foster user interaction and retention by
making the app visually engaging and functionally smooth.
 Maintaining Design Consistency
A design system will be developed to ensure consistency across all screens. This
includes uniformity in the use of typography, button styles, icons, cards, and user
controls. Consistency helps users feel familiar with the interface and improves overall
usability.
 Creating High-Fidelity Prototypes
Using Figma’s advanced prototyping tools, we will simulate real user journeys and
interactions. This includes transitions, animations, and clickable elements that mirror
the actual user experience.
 Incorporating Feedback for Iteration
User feedback will be collected through peer reviews and usability testing. This
feedback will be used to make iterative improvements to the design, ensuring that the
final product is user-tested and refined.

2
c. Problem Statement which relates to User Experience

Spotify is a leading music streaming platform known for its vast music library and diverse set
of features including playlists, podcasts, social sharing, and personalized recommendations.
However, despite its popularity, the user interface has been noted by many users—especially
new ones—as complex, cluttered, and unintuitive in certain areas. Navigating through
multiple sections, understanding features, or simply creating a playlist can become
overwhelming due to information overload and inconsistent navigation flows.
One of the most prominent challenges lies in onboarding and feature discovery. New users
are not always guided effectively through Spotify’s functionality, leading to confusion and
reduced engagement. Furthermore, the current UI may lack sufficient accessibility features
such as scalable fonts, adequate contrast ratios, and voice-friendly interfaces, which are
critical for users with visual or motor impairments.
These user experience challenges reveal a need for a more streamlined, accessible, and
beginner-friendly design that doesn't compromise the platform’s richness in features.

Our project seeks to reimagine the Spotify UI with a user-centered mindset, focusing on:
 Reducing visual clutter by prioritizing content based on user needs and actions.
 Improving navigation flow to make the journey through the app intuitive and
predictable.
 Enhancing the onboarding experience to help users quickly understand the platform
and get value from it.
 Introducing accessibility-first design principles to make the interface inclusive and
usable by all audiences.

Rather than simply cloning Spotify’s interface, we aim to learn from its limitations and
apply best UI/UX practices to create a design that feels modern, inclusive, and easy to use.
Our approach emphasizes empathy for the end user and aligns with real-world needs,
ensuring that the final design is both functional and delightful.

3
2. Analysis
a. Briefly state the problem(s) that the project will seek to solve

The project aims to address several key user experience issues observed in the existing
Spotify interface:

 Cluttered User Interface: New users often find the layout visually overwhelming,
with too many options displayed at once, leading to confusion and poor navigation.
 Inefficient Onboarding Experience: Spotify lacks a structured and personalized
onboarding flow, which can make it difficult for users to understand and explore
features effectively during their first interactions.
 Complex Navigation: Users frequently face difficulties in locating playlists,
podcasts, or account settings due to inconsistent navigation patterns and overloaded
menus.
 Limited Accessibility Features: The current UI does not adequately support users
with special needs, such as those requiring higher contrast, larger text, or keyboard
navigation support.
 Lack of Visual Hierarchy: Important content such as trending playlists or
recommended tracks often gets lost due to poor spacing, typography, and content
prioritization.

By redesigning the UI using Figma, our project seeks to simplify navigation, enhance visual
clarity, and introduce accessibility-focused improvements, ultimately creating a more
welcoming and efficient user experience for all.

b. User Needs, Goals & Obstacles

1. User Goals:

 Easy Access to Music: Users want to quickly find and play their favorite songs,
artists, albums, and playlists without getting lost in unnecessary options.
 Personalized Experience: Users want a music interface that feels tailored to their
preferences, offering recommendations that align with their taste.
 Simple and Intuitive Navigation: Users aim to navigate through the app effortlessly,
with minimal taps or clicks.
 Discover New Content Easily: Users enjoy exploring new releases, genres, and
podcasts, and expect the UI to guide them in this process.
 Seamless Experience Across Devices: Users expect a consistent interface whether
they are using a phone, tablet, or desktop.

4
2. User Obstacles:

 Overwhelming First-Time Use: New users may not understand how to use or
discover features like playlist creation, podcast streaming, or social sharing.
 Cluttered Layout: Too many features on one screen can confuse users, especially
those with limited tech experience.
 Poor Accessibility: Users with visual or motor impairments might struggle due to
small fonts, low contrast, or lack of assistive design.
 Unclear Icons or Labels: Icons that aren’t self-explanatory can lead to confusion
about their function.
 Non-personalized Onboarding: Without a customized onboarding process, users
may not feel connected or guided through the app’s features.

3. User Personas:

5
6
3. Design
a. Create a scenario that involves all of the tasks identified.

1) Morning: Ravi’s Family Ride

Ravi is dropping his kids to school. While starting the car, he opens the music app and
quickly taps on the “Recently Played” section, which is placed prominently on the home
screen. The large touch area lets him easily pick a fun song for the kids like Peppa Pig
without distractions. The new UI ensures safe, quick interactions even on the go.

Later in the Morning: At the Traffic Signal

At a red light, Ravi quickly queues up another song using the simplified queue control and
offline toggle. The redesigned UI uses large icons for better visibility and faster access,
allowing him to manage his queue without fumbling through nested menus.

2) Afternoon: Deep Focus at Work

Riya, a student preparing for her assignments, plugs in her headphones and selects a mood-
based playlist titled “Deep Focus.” The app UI features a clean layout with categorized
playlists, making it easy for her to stay in the zone without distractions.

Mid-Afternoon: Minimal Desktop Experience

Still working, Riya switches to the desktop version. The app seamlessly syncs her playlist,
and she uses the mini-player with hover controls to pause and play without cluttering her
screen. The minimalist design helps her multitask without overwhelming her desktop.

3) Evening: Chill Time with Friends

Ravi meets his friends in the evening. They gather and play music together using the app’s
personalized discovery section, which offers fresh recommendations based on their
previous listens. Everyone easily finds tracks that match the vibe.

Night: Sharing the Beat

One of Ravi’s friends finds a track that they love. With a single tap, he shares it directly
through the app using social sharing integration. Meanwhile, he creates a new playlist and
adds the song to it using the quick playlist management feature. No hassle, just smooth
interactions.

7
b. Sketch the scenario:

8
c. Draw a mental model