Case Study: NoteMix

Project Details

Role - UX Designer

Tools - Figma, Miro

Team - 1 UX Designer

Timeline - 4 weeks

Overview

This case study outlines the design journey of NoteMix, a mobile app developed during a 4-week UI/UX Introduction Bootcamp with Springboard. The project, guided by weekly mentorship, focused on creating a platform that fosters networking, collaboration, and communication for musicians and industry professionals. Throughout the process, I applied core UX principles, from research and wireframing to high-fidelity prototyping, to ensure the app provided a seamless and engaging user experience.

Problem

The primary challenge I aimed to solve was how to effectively integrate a collaboration feature into a music app. In the music industry, artists and creatives often struggle to connect and collaborate due to fragmented communication channels and limited opportunities for exposure. Existing platforms focus mainly on music streaming or social networking but fail to combine these functions in a way that supports real-time collaboration and meaningful networking for creatives. This fragmentation leads to missed collaboration opportunities and limited visibility for artists’ work.

Through competitive research, persona development, and iterative prototyping, the goal was to design an app that not only facilitates creative connections but also helps artists gain visibility, engage with their fans, and monetize their work. The result is a comprehensive prototype that addresses the unique needs of creatives in the music industry, enabling them to collaborate, network, and showcase their talents more effectively.

Solution

The solution began with in-depth user research to better understand the needs of musicians and industry professionals, ensuring I could design effective solutions to their challenges. Through competitive research and the creation of user personas, I identified several key pain points, including fragmented networking, limited collaboration tools, and issues with visibility. The research revealed that users struggled to find a unified platform for connecting with other creatives, lacked integrated tools for real-time collaboration, and faced difficulties in engaging with their audience and gaining exposure.

In response to these insights, I designed NoteMix to address these challenges by integrating networking features with real-time chat, music sharing, and collaboration tools. This allowed users to connect, collaborate, and share their work more seamlessly, ultimately helping them build stronger relationships and gain more visibility in the music industry.

Competitive Research

As part of the UX research process, I conducted a competitive analysis of 3 prominent music apps to better understand the landscape of the music streaming industry and identify opportunities for differentiation. I examined Spotify, Soundcloud, and Apple Music, focusing on their user interfaces, feature sets, and overall user experiences.

During my analysis, I observed that many competitors lack robust features for user interaction and engagement, particularly in real-time communication, networking, feedback, and effective monetisation for artists. To address these gaps, I prioritised designing features such as an integrated messaging app, a commenting system for songs, and a repost feature to enhance user engagement and visibility. These tools were intended to create a more interactive, connected experience that promotes networking, fan engagement, and greater visibility for users and their content.

It was fascinating to learn about the various approaches taken by these companies and to gain insights into the diverse experiences and perspectives of their users. Each app presented unique strengths and weaknesses, offering valuable lessons on what works well in music streaming and where there is room for improvement. This research not only helped inform the direction of my design but also deepened my appreciation for the complex dynamics of user experience in the music industry.

Table comparing three prominent music apps, highlighting industry trends and identifying user experience gaps.

Personas

After conducting user research, I created two personas to represent the target users of the app. This step was essential as it helped humanise the user base, allowing me to connect with and empathise with their needs more effectively. By understanding their frustrations and pain points, I was able to design solutions tailored to their specific challenges. I made it a point to regularly refer back to these personas throughout the project, ensuring that my design decisions remained aligned with their goals and needs.

Personas highlighting key traits, goals, challenges, behaviours, needs, and motivations of target users.

Sketches

After completing the research phase, I moved on to sketching simple wireframes to explore different design possibilities. I often used the Crazy Eights method to rapidly generate multiple solutions and encourage creative thinking. At this stage, the goal wasn’t to find the perfect solution right away, but rather to brainstorm and iterate. I revisited my sketches frequently, and with feedback, I was able to identify the most promising ideas to refine further during the low-fidelity wireframing phase. Below are the final sketches that were selected for development.

Digitally drawn wireframe sketches showing selected design ideas for further development.

Wireframes

After finalising the sketches, I moved on to designing the low-fidelity wireframes in Figma. At this stage, my focus was on establishing the layout, structure, and overall flow of the app. I sought feedback from my mentor throughout the process, which resulted in several iterations and refinements. This iterative approach allowed me to continuously improve the design, ensuring that the wireframes effectively addressed the user needs and provided a solid foundation for the high-fidelity prototype phase. The end result was a set of well-developed wireframes that were ready to be transformed into more polished designs.

Style Guide

After refining the wireframes, the next step was to curate a selection of potential colours, typography, and the overall visual style for the app. I then developed a comprehensive style guide to ensure design consistency as the project moved into high-fidelity prototypes. This guide outlined key design elements, including the colour palette, typography, and iconography, all carefully aligned with the app's identity. Additionally, it incorporated accessibility standards to ensure an inclusive experience for all users.

Style guide showcasing typography, colour palette, UI elements, and icons for the app.

Prototype

Starting with the low-fidelity wireframes, I created mid-fidelity prototypes to better define the layout and structure of the app. In this phase, I focused on organising the content in a way that was clear and visually coherent, while considering accessibility guidelines. Using Figma, I refined the overall structure to ensure it was both functional and aligned with the app's goals.

Once the mid-fidelity prototype was in place, I progressed to a high-fidelity prototype, applying final design elements such as colour, typography, and imagery. This version provided a more polished and realistic look, offering a clear visual representation of the app’s design direction and how it would appear in its final form.

Learnings

I entered the course with some initial knowledge of UX, but the extensive introductory course provided me with a solid foundation in the full UX design process. It covered everything from research and wireframing to visual design and prototyping. The course not only strengthened my understanding of UX but also introduced me to UI design through structured tutorials led by experienced industry professionals.

The support and mentorship I received throughout the course played a crucial role in accelerating my learning. The opportunity to receive direct feedback and guidance helped me to quickly recognise and learn from my mistakes—something I would not have been able to do as effectively on my own. The hands-on, project-based nature of the course gave me the confidence to apply what I had learned and iterate on my designs, ensuring I was on the right track. Overall, the experience was invaluable in refining my skills and preparing me for future design challenges.

Next steps

Given the four-week duration of the course, I had limited time to fully explore additional solutions or implement some of my ideas, such as adding a monetisation feature. Additionally, while the course covered the basics of UX research, I would have liked to explore this area in more depth.

Despite these time constraints, the course provided invaluable hands-on experience and solidified my passion for UX design. It led me to pursue further self-learning, and I’ve since enrolled in a UX diploma program to deepen my knowledge and refine my skills. I’m excited to continue expanding my expertise in areas like user research and advanced UI design, as I transition into a full-time UX design career.