un:hurd music is an all in one music marketing solution to help independent artists get their music hurd. un:hurd music was previously only available on iOS, however iPhones are used by only 22% of the smartphone-using population.This project involved adapting the entirety of the iOS app for web and improving feature UX with the increased screen space to put un:hurd music in the hands of more artists.
I led the design process from start to finish, creating 323 screens for desktop and tablet. I also adapted 201 iOS screens and reconfigured them to be web-compatible.
To set a firm foundation for this project I created a gird system for each breakpoint, as well as a full web design system containing over 100 components. Some components used on iOS were optimised for web, while some had to be entirely redesigned to work well for web.
While the onboarding process remains the same for desktop as it is on iOS, the increased screen real estate for desktop allowed the elements from the home screen to be rearranged to fit within one screen in a dashboard style, giving artists an overview of their performance, their active campaigns and their to-do list at a glance. I went through a few iterations of the home screen to arrive at an intuitive and digestible end result that displayed all the relevant information without overwhelming the user. Early iterations of the home screen involved experimenting with the web app navigation structure and the sizing of different elements in order to establish a hierarchy that puts the most used features at our users fingertips.
As a one-stop-marketing tool, un:hurd music allows artists to collate all their platform data in one place. With the enhanced real-estate of desktop I carried over the dashboard styling from the home screen to our insights section. As every music and social platform has different audience data available, the arrangement of each platform’s screen had to be specifically tailored. The widget-based approach to displaying data allowed me to ensure a neat and uniform appearance, even when the arrangement of each screen was different.
un:hurd music wanted to expand the offering of their data insights beyond just displaying artists platform data in one place, they wanted to offer a true insight. From this, benchmark insights were developed where artists can compare their performance on some platforms to similar artists. They can then take action in areas where they are underperforming.
Benchmark Insights is by far my most iterated feature of all time. The challenge was that we initially wanted to show artists which percentile bucket they sat in, and also how many other artists were both above and below them. This was a lot of data to show on one graph to a user demographic that often don’t deal in data. I worked in conjunction with our data scientist and our business shareholders to continually reiterate until we arrived at a design for the benchmark insights feature that allowed artists to understand their competitive positioning at a glance, utilising pop-ups to streamline the information shown while still providing depth of data for users who seek it.
The most used feature and the highest revenue generating tool in un:hurd music’s repertoire is the playlist functionality, which allows artists to pitch their songs to Spotify playlist curators to be featured. This process had to be kept streamlined to prevent user drop off. Our playlist pitch confirmation screen contains important information pertaining to the timeline in which users can expect a pitch result. Most of the support requests un:hurd customer service reps deal with are related to users not reading the information on this screen. To aid with this, I introduced bright and bold new styling to this screen to grab the user’s attention.
The Meta and TikTok ads flow allows users to run their ads through un:hurd music. This flow has pain points owing (primarily) to issues with Meta and TikTok's own sign in processes, however on iOS it is also an exceptionally long flow, comprised of 14 steps. Through adapting these screens for web, the steps in the process have been reduced by more than half with the intention of reducing the drop-off rate. When viewed on desktop, both ads and playlisting make use of a focused state, where the side navigation bar is removed to aid concentration.
