Flow Music App
Visual Design | UX/UI | Interaction Design
Adaptive music-streaming for a dynamic life.
Overview:
More than 300 million people pay for music-streaming service subscriptions worldwide. The market is dominated by giants like Apple, Amazon, and Spotify. But I wondered—are these streaming services going far enough to address the needs of their users? So I asked. Turns out, there's a huge demand for a wide range of features that big tech has been too slow to develop.
This project aims at envisioning a more functional, personal, and immersive music streaming experience that integrates more seamlessly into our everyday lives. Biometrics (human vital measurements such as heart rate, body temperature, etc.) and other emerging tech could be utilized to create an adaptive music-streaming service that responds to our daily movements, our natural environment, and even our emotional states. It's a music-streaming experience as active and dynamic as we are.
Timeframe: 7 weeks
Roles: UX research, UX writing, visual design, UI design, UI animation, wireframing, prototyping, user flows, interaction design
Tools: Sketch, InVision Studio
Roles: UX research, UX writing, visual design, UI design, UI animation, wireframing, prototyping, user flows, interaction design
Tools: Sketch, InVision Studio
Objective:
The goal of this project was to gather user research and explore how emerging tech could be utilized to create a better music-streaming service with a more positive user experience. The intention was to develop a hi-fidelity, interactive prototype that highlights a few of the product’s main features, showcases attractive visual design, and serves as proof of the app’s concept.
Research & Demographics:
This project began with user research. I wanted to see what kind of streaming services people were using, what about their experience was working or not working, and what kind of features might make it better. All this helped me understand what the ideal music-streaming experience might look like for a specific subset of people.
A survey helped identify an audience between the ages of 19 and 35. Nine out of ten used Spotify as their primary music streaming service, and two-thirds of respondents utilize a fitness tracker, smartwatch, or other pieces of wearable tech in everyday life.
Additional qualitative insight characterized an audience who is both skeptical about the use of their personal data, while remaining highly curious about technology’s role in the future of music streaming.
After listening to the needs of the users, I was able to develop a list of the most desireable app features. Users were clearly looking for a music-listening experience with better sound quality, more diverse offerings, and greater consolidation of content.
After listening to the needs of the users, I was able to develop a list of the most desireable app features. Users were clearly looking for a music-listening experience with better sound quality, more diverse offerings, and greater consolidation of content.
A UX audit of competitor products was the next step in the process. I was surprised to identify several usability flaws and user pain points within the Spotify experience.
Spotify is an app I use every day. But looking at it through a more critical lens helped shine a light on opportunities for improvement. I found numerous examples of poor visual hierarchy as well as redundancies in information architecture.
Spotify is an app I use every day. But looking at it through a more critical lens helped shine a light on opportunities for improvement. I found numerous examples of poor visual hierarchy as well as redundancies in information architecture.
Inspiration:
Visual inspiration drew heavily from the trending aesthetic of soft UI and nueumorphism and utilized elevation, depth, and glow to create an interface with spatial depth and dimensionality.
User Interface Design:
Low-fidelity wireframes helped me establish strong visual hierarchy and focus on user flows before getting too deep into visual design. I paper prototyped a couple of the most common user flows, taking care to avoid scope creep and keep the project within my given timeframe. Considerations around UX copywriting and how best to communicate product features also began to take shape during this phase.
After wireframing and the development of a basic design system in Sketch, medium and high fidelity UI design for the mobile application came next. Interface design focuses on a dimensional aesthetic, while still emphasizing functionality by using high contrast accent colors and a clear visual hierarchy.
User Interface Animation:
Adding motion and UI animation to user flows was one of the last steps. I took advantage of InVision Studio to link screens together and created fluid, seamless screen transitions that make navigation feel more natural and effortless.
In Closing:
Using a human-centered approach, I collected the insight needed to design a more functional and meaningful music-streaming experience that anticipates user needs, reduces friction within common user flows, and improves usability.
The final deliverable for this project was the design of an interactive walkthrough of the desktop interface. This prototype is intended to be proof of concept for what a user would experience when opening the desktop application for the first time. It helps the user get oriented to the new interface, explains unique features and highlights important information. Please view the video below to see the full walkthrough.
