In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
In our project, we aimed to redesign a desktop app focused on design, similar to InDesign. However, we recognized the importance of Spotify, as music enhances productivity. Our redesign emphasized the integration of AI, exploring ways to incorporate AI to improve the app.
In our research, we asked several questions:
What do other music streaming services do differently than Spotify?
If redesigning Spotify's web interface, what could be changed?
Which service has the best sound quality, music curation, editorial content, exclusive content, video content, subscriptions, pricing, or UI/UX?
What would the AI do?
We also conducted a survey titled „Nutzung von Musik-Streaming Diensten“ (Use of Music Streaming Services), analyzing the questions with the most responses. This provided valuable insights into user preferences and behaviors.
This is the original if you want to have a look at our questions.
https://forms.gle/RwhfdYFjU4WEymPT8
Underneath you can find our questions with the most responses.
We faced several challenges, such as where to begin and what our goals should be. Should we only redesign Spotify, create our own app, or utilize our research differently?
In the end we decided we want our own app, which can do anything we wanted.
Our mission is to revolutionize music streaming services with AI, creating a deeply emotional and inclusive listening experience. Our innovative design and interface capture the atmosphere, enhance usability, and provide new ways to connect with friends. By integrating visual stimuli, we aim to engage multiple senses, making music not just audible but also tangible, and strengthening team structures.
From our research, we developed our concept:
- AI-powered music streaming service
- Emotional and inclusive listening experience
- Innovative design capturing atmosphere
- Enhanced user-friendliness
- Opportunities for social connections
- Better platform for local artists
- Simple, music-focused, and connection-centric
Our concept focused on:
- Engaging multiple senses
- Intensifying the listening experience
- Making music visually experiential
- Strengthening team structures (for example design teams)
We began by brainstorming ideas, creating a style guide, animating initial animations, and building wireframes. We also worked on naming, logo design, and a simple design to immerse users in their work with atmospheric music. Showcasing local artists was crucial, so we asked local artists for permission to use their music and cover art, which we then used to create gradients that react to the music and match album colors.
As we also wanted to transport the music on a visual level, we experimented with various animations. First, we tried using After Effects to make individual gradient points react to the music. However, this method only gave us limited control over the movements. So we switched to the p5.js editor.
This tool allowed us to add individual MP4 files to which the animations would react. The code allowed us to control the size and color of the gradient points and generate random points of movement through the image to create a more organic flow.
In the next step we applied a blur and grain effect to the video in after effects and later added the UI elements wie created in Figma.
To make the background more visible, we have come up with the following idea: If the computer is inactive for a longer period of time, the UI elements will disappear gradually. As soon as activity is detected again, the elements gradually reappear. An example of this would be:
Next, we moved to film production, including storyboard creation, casting, assembling a camera and lighting team, selecting locations, and creating animations.
At the beginning of our promotional video, we planned to add clean animations to clearly communicate our concept. In addition, we integrated various text animations with different moods and music genres to appeal to viewers on an emotional level.
All animations were created in After Effects, while the final cut was done in Premiere Pro to get optimal control over the transitions of image and sound.
The project was extensive, and at times we felt lost in the tasks, but we are proud of the concept. There's still much to develop, and the significant research shows potential market interest. This could fill a niche or highlight an underdeveloped area of music and AI. In the future, this system could be offered as a home gadget, but the primary goal remains to provide a platform for local artists, which is what truly matters.