Serenader is a web and iOS app platform. It allows indie musicians to share their songs with fans. Additionally, fans can change the song and create new versions by uploading different performance/vocal soundtracks based on the original version.
I evaluated the app's current design, found out some pain points and opportunities to improve. After that, I redesigned the iOS app to improve the user experience. A couple of weeks later, my client reached out to me, and they wanted me to redesign the web homepage. This redesign aims to strengthen branding, educate users about the product before signing up, promote the mobile application, increase users' desire to create accounts, and download the mobile app.
The target users are new users who get introduced to Serenader and land on the website from advertising or social media posts, who are generally not familiar with the product but are interested in learning more via the homepage, and we hope they decide to sign up later.
My clients are developers, and the original website was something they put up together. The overall design was very simple and templated. Users could not get much information out from the homepage, which was the main goal of the page.
1. The homepage didn't mention anything about the mobile app.
2. The CTA is not prominent and eye-catching enough.
3. Users can see a picture of the application in section two; They can also click the “Take a Tour” button to try the web app. But both of these without much explanation. It's not intuitive enough, and users will easily get confused and leave the website without signing up.
4. The page is overall too templated-looking. All sections include a useless photo and a vague copy. Users can't get much helpful information out of these.
Serenader is a new product, the priority for it to get new users to sign up. With this in mind, I created some hierarchy to the CTA buttons on top right of the website to make the sign up button more prominent.
For the carousel, instead of the original nice looking photos and some vague promotional words. I created photos that are more intuitive, so users can have an initial understanding of how Serenader work. My main goal of this section is to drive users curiosity and keep reading through the rest of the website.
The demo player feature originally existed, in this section I reorganized the layout and add a prominent CTA to encourage users to sign up for an account after trying the demo.
The flow for releasing and updating your own songs was too complicated for new users and there wasn't an explanation for how the web app worked.
Users can update their existing songs by creating and uploading new stems. On the other hand, if the user wants to release a complete new song, the system will use AI to separate the song into four basic stems including vocal, chords, bass and drum after upload is complete. The original song owner or the other users can upload more stems in the future.
It's hard to explain this flow to new users with just words, so I created two animations to help explain it visually.
I broke down the collaboration into three steps, using icons and simple sentences to explain them to users.
I made an animation to educate users how to create their own versions by adjusting, adding, and removing existing stems.
We just launched the iOS app before this web homepage redesign, so I wanted to have a section in the homepage to promote the iOS app and get users to download the app.
It's more informative, intuitive and design consistent.
