Ramenshop Radio

An exploratory interface that supports local artists negatively affected by Covid-19.

View the finished project at:

ramenshopradio.com

Context

Before Covid-19, I used to DJ and co-host live shows featuring local music artists. These events were mutually beneficial: Both the artists and I could expand our audiences, build a community, and brand ourselves to industry stakeholders.

Purpose

Solo Passion Project

Role

UX research, prototyping, and full-stack development.

Tools

Notability, sticky notes, Adobe XD, React.js, AWS

Problem

Since the emergence of Covid, the government of British Columbia has canceled large gatherings. As a result, the artists and I lost the ability to promote and artistically express our talents.

To avoid losing the network we had formed over the past two years, I decided to create a distanced alternative interface to in-person shows. Since I did not intend to make any direct revenue from this project, I wanted to stay within a $10 budget.

Solution

Create a distanced alternative to live events that alleviates stress for users and encourages the discovery of local artists’ music.

Design Process Used

Challenges

1. Ensuring the design is implementable for development
2. Ensuring design stays within budget.
3. Optimizing UX on mobile devices.

Accomplishments 📈

• Managed the entire design process from conceptualization to launch.
• Converted 75% of users into listeners of a selection of local artists.
• Converted 32% of users into followers of the desired brand’s Instagram.
• Stayed within a $10 budget by combining cost-efficient design with cloud technology.
• Benefitted the lives of users by evoking hope and relaxation during the pandemic, exemplified through observed critical incidents.

1. Pre Design Stage — Research

I conducted semi-structured interviews with several artists, audience members, and friends to understand the issues the pandemic has caused them. I chose this pool of users because I wanted my interface to support individuals previously involved in the shows and their mutual contacts.

Insights Discovered

1. Users struggle with maintaining their mental health.

• Specifically, artists feel anxious about their careers, have very little motivation to make music, and are disinterested in life.

2. Artists have fewer opportunities to showcase their music

• Although many artists promote themselves on social media, it is challenging to connect with listeners the same way they could at in-person shows.

3. Listeners cannot find new underground artists

• Audience members at shows are more likely to listen through entire songs, then form their opinions on them. On social media, listeners have much shorter attention spans.

Requirements Made

R1 - The interface must evoke anxiety release and relaxation.

• Initially, I wanted my interface to evoke feelings of excitement, similar to those felt at an in-person concert. However, after discovering that most users suffered from maintaining their mental health I decided that the interface should evoke relaxation.

R2 - The interface must promote the discovery of local music artists.

• I decided on this requirement because the last two insights showed that covid caused an absence of promotion of local artists' music to listeners.

R3 -The interface must improve my brand image as a DJ.

• Originally, I used shows as a method of self-branding. I was able to display my taste through the decoration of the venue and DJ sets I played during the intermission. Thus, I wanted my interface to allow me to self-brand.

2. Early Design Stage — Concepts & Lo-fi Prototype

Based on my requirements, I created a conceptual model to establish a high-level design direction for the web-app.

Concepts to Lo-fi Prototype

After creating the conceptual model, I took the metaphors, concepts, and relationships, and turned them into lo-fi prototypes of features. Finally, I combined the features to create a full lo-fi prototype.

3. Mid Design Stage — Med-Fi Prototyping

After finalizing the low-fi prototype, I made several design changes and created a medium-fi prototype in Adobe XD.

4. Late Design - Implementing & Usability Tests

Using, the medium-fi prototype, I began to implement the interface in React.js. However, I ran into a few major challenges when making this transition:

Challenge #1 — Ensuring the design was developable

I realized my current design was unimplementable: My medium-fi prototype assumed that web browsers can animate 105 falling song names without causing UX-breaking lag.

Using my knowledge of CSS and React.js, I redesigned the interface to have fewer animations but still give the illusion of infinitely falling songs. I came up with this solution:

BEFORE AND AFTER PHOTOS

Challenge #2 — Ensuring the design stayed within budget

I also realized the current design was out of my budget. It would require a dedicated server to host and serve 2GB of audio files which costs $80 to $120 a month. I decided to host my externally using an efficient cloud alternative: AWS S3 (Simple Storage Service).

Using Amazon Web Services, the interface could efficiently request songs from S3. After doing the math, hosting my songs on S3 would cost me around $1 per month.

Finished Hi-Fi Prototype

After 5 months of development, I finally released the website.

You can visit and listen here: ramenshopradio.com

Conducting Usability Tests

Following the release, I ran a distanced diary study on 8 new participants. The participants were instructed to spend 30 minutes using the website per day and report their experiences with the interface after 3 days.

Specifically, I chose a diary study because it was low-cost and gave me qualitative data that exposed new usability issues for me to debug.

Challenge #3 — Optimizing The Design for Mobile

The diary study exposed several negative insights for the mobile view. However, I devised solutions to mitigate these dilemmas.

Insights

1. Users had trouble reading song names, especially on mobile.

• On mobile users reported that there were too many song names crowding the screen.
• On all devices, the bright background gradients made the song names unreadable.

Solution: I made a med-fi mobile prototype that has fewer songs on the screen and I will implement this change in the future. For now, I have lowered the opacity of the gradients on the website to make the song names more visible.

2. Continuous ambience is beneficial on desktop, but intrusive on mobile.

• On desktop, users reported that they would leave the ambience on throughout the day which caused noticeable relaxation.
• On mobile, users were confused and annoyed when ambience would still play after they locked their phones.

Solution: For mobile, I made the song controls also affect the ambience. As a result, users can control the ambience from their lock screens.

5. Pre-Design Stage (2nd Iteration)

Evaluating the Released Website’s Success

I evaluated how well the interface fulfilled its requirements by analyzing qualitative stories and Google Analytics from the website.

1 - The interface successfully evokes anxiety release and relaxation.

• I received an abundance of unsolicited stories (in addition to those from usability testing) on how the interface helped users relax and feel joy. This is one that I found interesting:

On my day off, I fell asleep to your radio site. When I woke up I felt super relaxed and didn’t know why. After 30 minutes I realized the site had been open all afternoon and the seashell sound was still playing. My apartment sounded like a beach.

2 - Users felt very little connection to the local artists.

• This discovery was supported by my Google Analytics data:

1. 75% of users were converted into listeners of local artists’ music.
2. Only 5% visited local artists’ streaming profiles.

Google Analytics retrieved anonymously from the website

I was disappointed that the interface was not directly helping artists gain streams as much I had hoped. However, in the future when events start up again, I can compare this percentage to the ratio of audience members who interact with the performing artists' music.

• no bio, visual, connection… add later

3 - The interface increased my network and brand-image as a DJ.

• After releasing the site, I gained 43 followers on Instagram who visited the site’s link in my bio. Therefore, I converted 40% (43/107) of the site's users into followers.
• It would be interesting to discover whether exploratory interfaces like this could also increase companies’ brand-images as well.

Conclusion — Mistakes Made & Lessons Learned:

1. Design for mobile first, then desktop.

• Although I intended this interface to be mainly accessed on desktop, 70% of users accessed the site from mobile. First impressions are important for interfaces. Sadly most users saw the less-featured and less visually attractive mobile version first.

Statistics from Google Analytics

2. Consider how potential users will view the interface when shared on social media.

On the initial release, many users took screen recordings of the site and shared them on Instagram:

I was excited to see that users creatively matched the site’s background color to the aesthetic of their Instagram profile.

However, the combination of captions and overcluttered words on mobile took away from the appeal of these previews. If I had considered that the interface would be recorded and shared, I would have put much more attention into making the mobile version more readable and appealing.