Sinuoside: The music colaboration platform
Research + Design System
SOME CONTEXT
Sinuoside is a music platform for musicians, singers and producers, where they can collab uploading their music stuff to share and create songs together. Then they can do the digital distribution on the major streaming platforms and share the profits.
CHALLENGE
Create a strong community for the platform to be relevant in the music industry, getting the main insights from the users to raise a human centered product.
USER INTERVIEWS
I made five personal interviews and shared a Google Forms with some friends and music comunities. After the interviews I created a priority matrix with the main actions that users wish to do, such as “Upload and download audio”, “Share songs on the platform” or “Attribution and copyright”. Most of the people interviewed considered the credentials in the final songs and categorized the sounds very important.
PERSONAS EXAMPLE
PRIORITY MATRIX
After conducting thorough UX research including interviews with users, creating personas and user stories, I created a priority matrix to prioritize the most important features and design elements for the project. The matrix helped me to objectively evaluate the insights gathered from the research and prioritize the features and design elements that would have the biggest impact on the user experience.
DESIGN SYSTEM
This is a platform for music lovers and whose have fun with music, so the design system must to had a name that fit with that. Some of the options were “Rehearsal”, “Air Guitar” or “Setlist”, and finally “Remix” was the chosen one because it’s fresh, funny and is very near to the concept of the platform.
DS Principles
This approach thinking in music lovers and have fun making music influenced in the tone of voice and the principles, some of them were “Freaking out” or “Inspiration playground” and others more common like “Consistent as bass” or “Simple easy”.
TOKENS AND ATOMIC SYSTEM
I defined tokens as the basic building blocks of the design, such as colors, typography or spacing. By breaking down my designs into smaller, reusable atoms, I was able to streamline my workflow and create a more consistent user experience. By this approach, I built a scalable and flexible design system that could easily adapt to the changing needs in the future.
Color Tokens
We have a rich palette, with some vibrant colors and some lighter scaled that combines with black, greys and white.
ANIMATIONS
Having animations with a soft and simple styling is crucial for me to ensure a cohesive and user-friendly experience within the design system. I created a set of duration increments and give them tokens to use it in some basic animations and transitions. This is a an example of defining easing:
Primary easing
cubic-bezier(0.17,0.67,0.83,0.67)
Secondary easing
cubic-bezier(0.42, 0, 0.58, 1.0)
Molecules: Card
This card included a thumbnail image, headline, brief description and a go to stuff button. It’s used it in a 4×4 grid in the home page.
WIREFRAME AND PROTOTYPE
I created two essential layouts for the platform, the home and user pages. These pages serve as the cornerstone of the platform and play a critical role in showcasing the primary components to the users. The design of these pages required careful consideration to ensure a seamless and intuitive user experience.
CONCLUSIONS
As a product designer in a digital music project, I had the opportunity to conduct thorough research and develop a comprehensive design system. Through this experience, I gained a wealth of knowledge and found the work to be enjoyable. However, upon reflection, I realized that starting with a MVP such as a simple cloud platform for sharing music with friends could have been a more manageable way to begin. This approach would have allowed me to gain valuable insights and build upon the MVP gradually, before tackling a more complex project.