Mustard Music Application Development

Services

UX/UI design

Web application development

Project Scoping

Technology

C#Bot and React Native

Brief

Mustard Music (MM) is a music led company that specialises in creating bespoke music profiles for the bar and leisure industry. With a broad client range across Asia Pacific and beyond, MM’s success has been built upon technological innovation and industry-leading music expertise. By combining this expertise with insights gleaned from clients about the environment and mood that they want to create in their premises (and the clients that they want to attract), Mustard can design a music profile and customise it to suit the specific trading aims of the business.

MM identified a need for a more user-friendly platform that would enable a music database to be fully digitised and made accessible to the MM team of music curators so they could create brand sound experiences for their clients (i.e., Venue Managers). The technical objective was thus to design a platform that was instantly accessible to music experts all over the world with functionality that would allow them to manage MM’s music library, create tailored playlists and build client/ venue profiles.

Let's take a deep dive

Understanding the problem

The overarching problem addressed in this project was the need to transform Mustard Music’s digital infrastructure by creating a comprehensive tool that would digitalise their database. The primary goal was to create distinctive sound experiences for clients. This initiative aimed to replace the existing system, thereby minimising licensing fees, securing ownership of intellectual property, and facilitating the design of customising music profiles in alignment with the trading objectives of businesses.

It was decided that three applications would be developed for MM:

Mustard Central (Web application): The objective was to create a tool digitalising Mustard Music’s database, allowing agents to create brand sound experiences for their clients. The aim was to replace the existing system to save on licensing fees, gain ownership of IP, and enable the design of unique music profiles aligned with businesses’ trading aims.

Mustard Live (Desktop application): The device required the ability to synchronise with Mustard Central, but also have uninterrupted play if the device were to lose connection. The goal was for this tool to give users more visibility and control over the music playing in an area of a venue.

Mustard Live (Mobile Application): Mustard Music wanted to reduce the number of customer support requests regarding control over music, whilst also improving clarity and awareness over what is playing. Access to controls needed to be restricted and only provisioned by Mustard Admin, thereby the making the app publicly available to install and view what’s playing at a venue, but no ability to control it.

Ideation & research

We used our Way of Working processes and activities to scope the project in three different stages. Throughout this time, various ideas and solutions were explored. Our focus was on ideation and research, aiming to generate ideas and solutions. In the initial first stage, our team scoped out the current process Mustard Music undertakes with their existing clients. By mapping out the user journey, we created a visual representation of the processes, illustrating how various user groups interact with the platform and forecasted anticipated outcomes. From here, we were able to turn this into an ideal user journey for the new Mustard Music platform.

It was crucial to design with accessibility and user-friendly features. Conducting user interviews and testing sessions allowed the team to gather insights that helped the refinement of the Mustard Music’s user experience and the language integrated throughout the application.

For the Mustard Music’s Minimum Viable Product (MVP), we identified key user groups for each application:

• Mustard Central: Mustard Admin, Agency Admin, Agency Playlister

• Mustard Live (Desktop): Mustard Admin, Venue Managers

• Mustard Live (Mobile): Application Users, Venue Managers, Mustard Music Admin

To address all potential functionalities, we developed a user map that evolved into a detailed requirements backlog, with each functionality documented as a card. This backlog served as a crucial element for the entire team, ensuring a clear understanding of the product’s requirements and aiding in the creation of a traceability matrix. The matrix facilitated the testing team in formulating tests, allowing teams to use it as a comprehensive checklist to verify the fulfilment of each requirement.

Mustard Music required a way to quickly find objects in their databased on search queries. Search results needed to be flexible enough such that they return similar matched, i.e. handle slight misspellings, white space, special characters, ect. To provide a tangible preview of the final product, we created high fidelity prototypes for each application. These prototypes served as a visual demonstration of the application’s functionality, enabling our team and client to see key components of the user flow before investing resources in final development. The mobile application was built as a responsible mobile application, which leverages existing web and desktop applications. Some of the buttons and inputs needed to be adjusted slightly to cater to the standards for mobile devices.

The original implementation of the playlisting page retrieved tracks and track metadata along with the playlists, albums and artists when performing a search. This allowed for fast changing between tabs, adding, and reordering tracks and updating information across the page. Upon stress testing this implementation, we found that the search times for retrieving playlists was extremely long, upwards of 10 seconds, and the amount of data being returned was too much for an individual query to handle. Additionally, the drag and drop functionality was much slower as there was too much data to be processed on the client side. To fix this issue, we implemented the infinite scrolling used for search results and track lists, both in the tabs and playlist editor panels. We additionally moved drag and drop functionality to the server side to limit the amount of processing required to be done on the client side. After tracks have been added to the playlist, or reordered, the data for the playlist is refetched. This cut down search times down from over 10 seconds to a fraction of a second.

Our validation process incorporated a combination of test types to ensure the application adhered to requirements. This included Unit, API, and End-to-end testing to cover out-of-the-box functionality. Additionally, custom tests were created based on traceability reports, offering a comprehensive evaluation of the developed functionality.

After 9 weeks of Discovery, 6 months in development, 264 feature tickets...

The solution

Mustard Central (Web Application)

Problem Statement: How might we develop a responsive web application that digitises Mustard Music’s database for the creation of brand sound experiences?

WorkingMouse plans the development of a web application for the Mustard Music Central browser. The purpose of the web application is for music curation and customer management. This platform provides a way for users to manage music uploads, create playlists and curate music profiles for their clients. This application is central to Mustard Music and will be the repository for the songs and the hub for the desktop and mobile application.

Web Application Features:

Uploads Manager

The Uploads Manager is a workspace for agents to sort new music, uploaded through Disco API, into playlists. While tracks are automatically normalised during the upload process, users can also set fades and apply custom tags.

Playlist Builder

The Playlist Builder is a workspace where agents can create, manage, and sort playlists. The tool allows for concurrency by enabling users to open multiple playlists at a time. Users can also search for music and add tracks or entire playlists into the playlist editor.

Profile Builder

The Profile Builder is where users can create a Music Profile for their clients. Firstly, agent would create a collection of moods. Moods can then be added to a schedule. Multiple schedules can be created and assigned to zones within a client’s venue.

Mustard Live (Desktop Application)

Problem Statement: How might we integrate the Mustard Central application with the hardware which gives Mustard admin and the venue management local control of the music and allows for online/offline sync?

WorkingMouse recommends the development of a web application using the desktop framework Avalonia. The main function of this application is to provide a way for clients to play music that has been customised for them by Mustard Central. Mustard Player allows clients to be able to schedule music, override current playlists, and give feedback on tracks. This application will be placed on MINIX Mini PC, this will be set up at the venue and connected to a monitor. The mini-PC provides the user with fast desktop performance and highly responsive user experience.

Desktop Application Features:

Scheduled Music

A customised schedule of music is synchronised onto the player from Mustard Central. This gives users more visibility over the music that is scheduled to play.

Override Current Playlist

All playlists allocated to the device have been specifically curated for that venue. Users can override the current schedule with another curated playlist for a specified period before reverting to the schedule.

Feedback on Tracks

Users can like, dislike, or disable any track in the playlists allocated to the venue. When users like, dislike, or disable a track, this feedback is sent through to Mustard Central so that Mustard staff can see how popular a track is at that venue, or re-enable tracks that need not be disabled.

Mustard Live (Mobile Application)

Problem Statement: How might we offer venue managers access and control over the music so that they may elevate the atmosphere for patrons?

WorkingMouse plans the development of a react-native mobile application. The main purpose of the mobile application is for patron feedback and venue manager control. This application will be available on the Apple store and Play store for users to install. Once downloaded, users can view nearby venues, look at what tracks are playing and look for them in Spotify. Provisioned users (e.g. Venue managers) have access to controls that play, skip and stop music, change moods and view upcoming schedule.

Mobile Application Features:

Favourite Zones

Venue managers are likely to be on-the-go and serving patrons, so the quicker it is to get to what they need to do, the better. Mustard Music live offers the ability to favourite zones. This feature acts as a shortcut so they can go directly into the zone controls after launching the app.

Visibility

Venue managers want to have oversight on what’s playing. Mustard Music Live allows for users to view information for the current track, upcoming tracks, previously played tracks and the mood schedule for the week. This provides awareness on the music atmosphere of the venue at any time.

Control

Depending on what’s happening at the venue (e.g. quitter time in the lobby), the venue manager may want to adjust the music to accommodate for the situation. Mustard Music Live provides the power to control, giving users the ability to stop, skip and queue tracks, and change the mood scheduled.