Incom ist die Kommunikations-Plattform der Hochschule Anhalt Fachbereich Design

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Hochschule Anhalt Fachbereich Design mehr erfahren

MEL - Your new music streaming service

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.

Research

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?

Research Fragen und Antworten.pdf PDF Research Fragen und Antworten.pdf

Abb2.pngAbb2.png
Abb3.pngAbb3.png
Abb1.pngAbb1.png
Abb5.pngAbb5.png
Abb4.pngAbb4.png

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.

Umfrage GP Mel.pdf PDF Umfrage GP Mel.pdf

Challenge

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.

Missionstatement

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.

Concept

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)

Design Elements

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.

Logo.pngLogo.png
Wireframes.pngWireframes.png
Starting point.pngStarting point.png
finding Color.pngfinding Color.png
Styleguide.pngStyleguide.png

Cover3.pngCover3.png
Cover2.pngCover2.png
Cover.pngCover.png

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.

Bildschirmfoto 2024-07-18 um 13.32.48.pngBildschirmfoto 2024-07-18 um 13.32.48.png
Bildschirmfoto 2024-07-18 um 13.26.45.pngBildschirmfoto 2024-07-18 um 13.26.45.png
Bildschirmfoto 2024-07-18 um 13.30.54.pngBildschirmfoto 2024-07-18 um 13.30.54.png

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:

Production

Next, we moved to film production, including storyboard creation, casting, assembling a camera and lighting team, selecting locations, and creating animations.

Infos Darsteller*innen.pdf PDF Infos Darsteller*innen.pdf

IMG_3138.jpegIMG_3138.jpeg
IMG_3156.jpegIMG_3156.jpeg
IMG_3150.jpegIMG_3150.jpeg
IMG_3171.jpegIMG_3171.jpeg

Cut and Animation

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.

Product

Conclusion

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.

Fachgruppe

Integriertes Design

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Prof. Hermann Klöckner foto: Martin Wiesner

Zugehöriger Workspace

Großprojekt: Redesign AI - Beauty Meets Function

Entstehungszeitraum

Sommersemester 2024

Keywords