Massive congratulations to ARISTIDE BENOIST, UENO & ROBBIN CENIJN for winning Site of the Month September with ÖNNU JÓNU SON, thanks for all the votes and tweets.
Önnu Jónu Son is the stage name of Haraldur Thorleifsson. Haraldur was active in the Icelandic music scene in the late 90s but took an extended hiatus from music, followed by a career as a designer, ultimately selling his design agency Ueno to Twitter in 2021.
The name Önnu Jónu Son is a reference to his mother, who he lost when he was eleven years old.
Haraldur has struggled with finding a path forward and finding confidence in himself as an artist and a performer. By wearing his mothers name he was able to use her memory, love, support and nurture as protection from any self doubt or fear of external criticism.
The Radio Won’t Let Me Sleep
In 2024 Önnu Jónu Son will release the album The Radio Won’t Let Me Sleep. Half of the songs are written in the mid 90s and the other half in the past year. Each of the 11 songs will be released with a new short movie made by artists from Singapore, Brazil, Hungary, Sweden, Somalia, Iceland and more locations all over the world.
The songs are personal stories of love, loss, loneliness and a struggle to find moments of happiness.
About Haraldur Thorleifsson
Haraldur was born and raised in Iceland. He founded the creative agency Ueno in 2014 and sold it to Twitter in 2021. In 2021 he founded Ramp up Iceland, an initiative to build 1500 wheelchair ramps in Iceland. He recently announced the extension of the Ramp Up project to Europe, starting in Ukraine, France and Sweden. In 2022 he founded Hafnarhaus, the largest co-working space for creative people in Iceland. He started a restaurant, bar and cinema called Anna Jóna in 2023. He has won multiple awards as a designer and creative, he was given the Order of the Falcon, the Icelandic medal of chivalry from the President of Iceland in 2022, he was named Business Man of the Year in Iceland in 2019, and he was Person of the Year in Iceland in 2022.
ÖnnuJónuSon.com
To create a world for the songs we made www.onnujonuson.com, an interactive experience where each of the videos will have a home. As the songs are released they will be added to the experience. Live recordings will be coming in January.
Design
When we started working on the site, we only knew a few things. There will be videos and the songs will be released over time. Not much to go on. So initially we worked on concepts around the album artwork (designed by Brijan Powell), but once we saw a rough edit of the first video we started working on an interface where the video played a bigger role in the design. But we still imagined a site with a navigation first approach.
Audio Visual
We had listened to the album, but now with the video clip it somehow made the songs hit even harder. We wanted to drop people into the music as fast as possible and let the video clip do the work. Instead of giving the user an overview of the songs first.
Navigation
With the music and video front and center we created an intuitive UI that becomes visible on mousemove (tab on mobile).
A horizontal scrollable timeline gives you an overview of the tracks on the album, which songs are released and when others will be released.
For all the other pages there is a nice menu with all the options which you can explore while listening to the music.
A new site every release
Not every color works with every video, so that’s where a problem became an opportunity. We designed the UI in a way so it could change color for each song. Together with a new video, the site would look very different with each release.
Do not scrub, please?
We didn’t want to make a normal scrubber, but we also knew people would expect that behavior. So we wanted to make it more in line with the rest of the site. We decided to create a visual strip of scenes hinting at the design of the song's overview. This way you could visually see what’s coming so you might want to finish listening or watch a specific scene.
For discoverability (you can click and drag the video) we show the state within the transition back to the video as a little hint.
Mobile audio experience
We know that many people visit the site on their phone so we did everything we could to make the experience the same on mobile as on desktop. We even put in a little bit of extra effort to make it work in landscape and full screen too.
Tech Stack
Languages: PHP 8.2, Javascript + WebGL API, HTML and CSS
CMS: Prismic
Deployment: AWS Lambda
Listen & Follow
Halli, Robbin & Ari
Robbin's Twitter
Robbin's Instagram