Lolify is a user-friendly and interactive music streaming platform designed to provide personalized recommendations, in-depth music listening analytics, and an intuitive interface for playlist management.
- Introduction
- Background
- Features
- Pages Overview
- Technology Stack
- Installation
- Evaluation
- Reflection
- Contributors
- License
Note: This project is a prototype and does not have a running server or backend functionality. It is designed for demonstration purposes only, and all data is stored locally within the browser.
Lolify is developed as part of a Human-Computer Interaction (HCI) project to address common usability issues in existing music streaming platforms. The goal is to enhance the listening experience by offering intuitive navigation, personalized recommendations, and rich music analytics.
With the rise of digital music streaming, users are increasingly relying on platforms that offer seamless access to their favorite tunes. However, many existing platforms suffer from cluttered interfaces, limited personalization, and lack of transparency in recommendation algorithms. Lolify was created to bridge these gaps, focusing on user experience, personalized content, and data-driven insights to help users discover new music effortlessly. By integrating intuitive design principles and leveraging interactive analytics, Lolify aims to redefine how users engage with music streaming services.
- Personalized Recommendations: Custom music suggestions based on user preferences.
- Interactive Playlist Management: Create, edit, and share playlists easily.
- Listening Analytics: Track and visualize music habits with detailed statistics.
- User-Friendly Interface: Designed for ease of use with smooth navigation.
- Trending Charts: Stay updated with popular music trends and top charts.
Purpose: Allows registered users to log into their accounts.
Features:
- Username and password input fields.
- "Forgot Password?" link for password recovery.
- Redirect option for new users to the Sign Up page.
Purpose: Enables new users to register and create an account.
Features:
- Form fields for username, email, and password.
- Password confirmation to avoid errors.
- Link to Sign In for existing users.
Purpose: Helps users reset their forgotten passwords.
Features:
- Input fields for username and new password.
- Password confirmation to ensure accuracy.
- Secure and simple password reset process.
Purpose: The main landing page displaying trending content and quick access to all features.
Features:
- Sidebar with navigation options (Profile, Charts, Playlists).
- Search bar for quick content discovery.
- "Try Something New!" feature for exploring new songs.
- Trending Albums section with quick-play functionality.
Purpose: Displays user information, playlist, and favorite artists.
Features:
- Profile picture and username.
- Followed artists and playlists created by the user.
- Option to modify user profile information.
Purpose: Provides analytical insights into user’s music habits.
Features:
- Total streams and listening time breakdown.
- Graphs showing listening trends by genre and weekly habits.
- Top 10 most-played songs, artists, and albums.
Purpose: Showcases album details and enables playback.
Features:
- Album artwork, artist, and release year.
- List of tracks with individual play buttons.
- Option to add the album to favorites.
Purpose: Helps users create and manage their playlists.
Features:
- Display of all saved playlists.
- Ability to add or remove songs.
- Play the entire playlist with a single click.
- Frontend: HTML5, CSS3, JavaScript
- Data Storage: Local Storage for simulating user sessions
- Design Approach: Modular CSS, Flexbox, and Grid for responsive layout
- Clone this repository:
git clone https://github.com/your-username/Lolify-Music-Streaming-Platform.git
- Navigate to the project directory:
cd Lolify-Music-Streaming-Platform - Open
login.htmlin your browser to run the application.
To ensure Lolify meets user expectations, extensive usability testing and heuristic evaluation were conducted. User feedback indicated high satisfaction with the intuitive interface and personalized recommendations. Areas for improvement include expanding backend integration to enhance real-time updates and refining the playlist management system for better control.
Through the iterative design process, we learned the significance of user-centered development. Balancing functionality with simplicity was crucial in creating an engaging platform. Future enhancements should focus on improving recommendation algorithms, integrating social features, and optimizing performance for various devices.
- Steve Marcello Liem
- Davin Edbert Santoso H.
- Felicia Andrea Tandoko
- Maria Linneke Adjie
This project is licensed under the MIT License - see the LICENSE file for details.