Nonsense Explorer is an Asia-based indie rock band under the record label Fabricated music. The official web app aims to present its strong branding and music creation and further build international recognition. The web app needs an online listening and shopping feature at the first stage so visitors and fans can listen to their music and purchase merchandise such as album CDs and Art posters directly from the web app.
October 2022 to December 2022
The band has a static official site, but it's designed unprofessionally and built with old tech.
Design an official web app that professionally presents its identity to music fans or agencies. Also, have the function listen to their music and purchase merchandise from the online shop at the project's first stage.
I am the UX designer who designed the official web app for Nonsense Explorer from conception to delivery.
I conducted interviews, paper and digital wireframing, low and high-fidelity prototyping, usability studies, accounting for accessibility and iterating on designs.
I conducted interviews and created empathy maps to understand the users I was designing for and their needs. The user group identified through research were current fans who follow their favorite musicians online. The research found that this user group is the young generation; they will search for music in this genre and listen to and buy CDs online. They need a one-stop for getting all solutions. The research also revealed that how many features inside the official app were not the only factor limiting users from knowing about the musicians. The user will browse through different artists quickly and choose the one with the most robust trustable identity first and then listen further to music second. It's challenging to grasp visitors at first sight.
A strong, unique, and trustable visual identity is crucial to grasping the users and growing a more extensive fan base
Most indie bands’ web doesn’t have a music listening feature. Users must purchase third-party music services, then search and listen to their music
The band members need a place to sell their CDs and album art posters, so they don’t need to set up and build a third-party service separately
The IA should connect music listening and music-related items shopping
For the home screen, I prioritized presenting a strong brand identity with a unique layout design and showing the newest music from the band, along with other most important and recent information.
Home landing designs based on feedback and findings from user research.
By removing the digital version purchase, users can now listen to the music quickly and free from the official app, which is vital for successful online promotion.
The low-fidelity prototype connected the primary user flow of selecting albums, listening to tracks, and buying CDs from the online shop.
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Early designs allowed for purchasing the digital version of music, but after the usability studies, the digital version purchasing needs to be removed. I also redesign the page for a better listening experience only.
The second usability study revealed that the color contrast of the overall app looks a bit “dirty” and needs to be optimized. I change the color from gray to light gray so that the overall design is cleaner, making the graphic content pop out more and also making the content easier to read.
The final high-fidelity prototype presented a cleaner user interface with a shorter route of purchase flow.
With web accessibility support, use a Logical heading structure for the screen reader and screen magnification.
Reduce the text, use negative space, and use shadows to lift the imagery. Making the images pop out from the page helps the user focus on the pictures and browse faster.
Using easy-to-understand icons for small operations helps to reduce information density and make the page more readable.
The app presents the band to the musical world with a unique, professional, reliable quality. It’s a stepping stone for the career of the band.
While designing the official web app for Nonsense Explorer, I learned the entire process of creating an app from scratch and iterating the design solution through usability studies.
After listening to the music, I like the band's style. And I feel safe buying something from the app.
-- One quote from peer feedback
