How do you build camaraderie when everyone is WFH?
At BASIC/DEPT® we all knew the power of music, but the life it takes when each of us becomes vulnerable is what makes it sound even better.
JAMS didn’t have much of a vision at first. It turned out to be one of the best things that happened to our agency.
Every Monday morning, an employee owns the proverbial mic for a few minutes. They tell the 120-ish people on the agency-wide call about a playlist they created, the meaning behind it, and a specific lyric.
It’s a break from reminders about timesheets and other announcements; a time to roll back the shoulders and get re-introduced to a co-worker through their favourite music.
The idea became even more powerful as the pandemic reared its ugly head. Checking in at the start of each week became critical to our sanity.
In sharing playlists and the stories that follow, walls are effectively broken, tears are sometimes shed, friendship is organically formed, and culture is most certainly built.
JAMS is now a staple of our agency’s identity. It shows that everyone has something to contribute that has nothing to do with a job title. It literally sets the tone every week.
Today, around the world, employees at our partner agencies as well as at our clients use JAMS to get to know each other.
The Vinyl Identity
From a branding perspective, the identity borrowed from the visual language of artwork shared during JAMS sessions and of spinning vinyl.
The colour system is vast and emotional. We wanted it to match the vibrant visual language of the music. We also carried this approach into our UI elements with adaptive systems.
We were even intentional with minutia of the scrolling experience – like the nostalgic “click” sound of an iPod wheel as you scroll through songs on the site. Our brand fonts are used throughout to ensure that JAMS is recognisably BASIC/DEPT®.
If JAMS makes you nostalgic for the back seat of your parents car or to the days of flipping through CD booklets, then we did what we set out to do.
The page content and the art direction behind it is largely inspired by the contributions of our employees, specifically the quote they chose to share with everyone at the agency and their actual playlist.
It’s another way that we allow everyone at the agency who shared something to feel heard and recognised – it’s a remix of the term “inclusive design.”
The site is by no means a creation of just a few people. It’s the culmination of dozens and dozens of our own people – making everyone feel heard.
Creating the Site
To create the site, we partnered with Eric Van Holtz of Van Holtz Co. and his colleague, Jake Whiteley. Under the hood, GSAP is the technology we used to create all of the animations and interactions. The homepage has two views of the most recent playlists: CRATE and GRID.
CRATE gives the feeling of being in a record shop or inside a basement, flipping through stacks of vinyl records. On the playlist page, the hero image rotates as if it’s spinning on a record player. Scrolling down, you’ll see content being revealed – artist quotes, album artwork, and a carousel of playlists.
We had fun on the NOTES page by displaying imagery from the featured playlist in a style similar to the 1990s DVD screensaver animation; it continually bounces off of the edges of the screen. We wanted the animations and interactions to support the content and represent a throwback to the days before digital audio.
Creating the Video
Central to the site is the intro video. We shot it in our San Diego HQ and featured our own people. The team went thrifting for props over lunch. The entire process felt very organic, much like our approach to JAMS in the first place: off the cuff but always a shared experience.
We styled the shoot with analog technology from a bygone era: a transistor radio, an antenna TV, a cassette deck, an Ikegami tube camera, to name a few. The makeshift set purposefully felt like a vintage record shop; JAMS is your favourite record store; your basement; your Honda Civic; that place we all remember listening to music. It’s an extension of you.
Paving the way for our own stories
In a surprising way, JAMS has become a powerful catalyst for storytelling, prompting employees to share anecdotes of struggle, loss, and celebration.
One employee created a playlist for Hispanic Heritage month. “The lyrics are very personal to me as they are a celebration of my home country of Mexico. México te llevo en el corazón, con la alegría del mariachi, me brota la inspiración.”
The lyrics by Luis Miguel translate to, “Mexico, I carry you in my heart, with the joy of the mariachi, inspiration is born.”
The song is a celebration of the colours, aromas, textures and music of a country beloved by its people,” shared the employee. “But there are about 20 countries where Spanish is the official language, so JAMS creates a beautiful and unique opportunity to celebrate each other with musica en español. That’s what JAMS provides – the opportunity to learn more about each other.
Luis Miguel, BASIC/DEPT® employee
Another employee curated a genreless playlist inspired by the 1994 Beastie Boys record, Ill Communication, which spans pop, punk, folk, rock, hip hop, and jazz. He shared a quote from a 1963 spoken word session by Bob Dylan that he added to the playlist.
“You’ll find God in the church of your choice, you’ll find Woody Guthrie in Brooklyn State Hospital, and though it’s only my opinion, I may be right or wrong, you’ll find them both in the Grand Canyon at sundown.”
The employee followed with an explanation about how the quote relates to his recent loss of a pet.
Hospitals and churches are where people go to find closure, find answers, find hope, beauty, inspiration; to find something deeper. But they aren’t the only places. For anyone who’s lost someone, just go outside, find that place that’s special to you and reconnect. They’re no longer physically there, but can still be there for you.
A playlist created by Studio Dumbar/DEPT®, our Netherlands-based partner agency, is just the beginning. In the spirit of JAMS, our DEPT® family members now make playlists and art to share with each other.
Art credit: Christopher Noort (Lead Designer) and Giovanni Zanella (Motion Designer)
Of course, the idea of sharing playlists feels as old as the creation of fire and by no means do we take credit.
That said, we’d like to think we played a small role in allowing agency culture worldwide to become more vulnerable through the lens of music. Our global family of DEPT agencies now share their JAMS on social channels through a branded identity for the world to see.
The next wave is the most intriguing. We plan to produce short documentaries spotlighting the compelling stories told by our curators. Who knows – there might even be a JAMS charity event and scholarship one day.
It might sound overly aspirational and unclear, but that’s how it all began – and we wouldn’t want it any other way.
- AWWWARDS — SITE OF THE MONTH — 2022
- AWWWARDS — SITE OF THE DAY — 2022
- THE FWA — SITE OF THE DAY — 2022
- CSS AWARDS — SITE OF THE DAY — 2022
VP of Growth
The Bartlett School of Architecture is one of the world’s most diverse, innovative and creative places to study architecture. Every summer, it hosts its largest annual event, The Bartlett Summer Show, which celebrates the work of over 700 students, and welcomes circa 15,000 visitors from all over the world.
In 2020, due to the COVID-19 crisis, The Bartlett Summer Show couldn’t be held in its usual format. Hello Monday (part of DEPT®) set out to create an engaging, state-of-the-art digital alternative. The result was an exciting virtual experience and platform that firmly positions The Bartlett as the cutting-edge institution that it is, while ensuring that students could showcase, celebrate and share their work in the best possible way during a challenging time.
The concept behind it all
In order to create an experience that felt authentic, Hello Monday (part of DEPT®) first considered how The Bartlett Summer Show is normally physically encountered and set up. The team abstracted these elements to their fundamental shape and function for use in a digital context.
A spatial experience
The resulting digital building blocks enabled the team to build a virtual showcase which is reminiscent of the physical experience, without being a literal translation of it. On landing, vertically stacked ‘floors’ represent the different programmes and units, each one acting as an entrance to its own exhibition ‘room’ which users can freely explore.
User activity and ambient sound
Through use of ambient sounds and visitor traces, the team added a layer to the experience that created a sense of a live atmosphere, ensuring that The Bartlett Summer Show still felt like a live show, even if taking place virtually.
Senior Producer at Hello Monday (part of DEPT®)
Star Atlas is an AAA space exploration strategy game and blockchain-driven virtual metaverse. The highly anticipated game has epic graphics, compelling lore, and a forward looking blockchain-based economic model including Play-to-Earn and other DeFi features.
The brand is set to revolutionise the future of gaming, entertainment and beyond. Creative studio Hello Monday (part of DEPT®) partnered with the Star Atlas team to build an immersive digital experience to create excitement around the game’s launch.
A portal to the future
Star Atlas, set in the 27th century, combines everything a sci-fi gamer’s heart desires; it’s about space exploration, territorial conquest, and political domination. The teaser homepage features a galactic portal that pulls users right into the Star Atlas metaverse. The colour palette is colourful and light to move away from the traditionally dark and moody sci-fi aesthetic to help Star Atlas stand out in the world of sci-fi gaming.
The navigation structure is inspired by the solar system. Hello Monday (part of DEPT®) worked to develop a motion approach and iconography style that felt unique and reflects the Star Atlas brand.
Users can easily download the Star Atlas whitepaper, sign up for more information or click “play now” to visit the marketplace, where they can view the game leaderboard and buy and sell resources and services both in and outside the game. This combination of blockchain based in-game currencies and a fully decentralized, non-fungible token (NFT) asset ownership makes Star Atlas a truly innovative game.
Visualising the metaverse
Users can scroll through various chapters that introduce the game lore, and interact with 3D visualisations of spaceships and planets inspired by the Star Atlas world.
The 3D visuals are rendered as point clouds, a set of data points in space, alluding to stars in the universe. They needed to be recognisable and visually appealing while staying abstract to help tease for the upcoming game aesthetic. To achieve this look, the Hello Monday team wrote a custom WebGL point cloud shader that gives the illusion of a depth-of-field effect while staying very performant.
The 3D models are made from projecting light rays onto the surface of actual game models, and pre-processed in a custom compression pipeline based on Draco, an open-source library for compressing and decompressing 3D geometric meshes and point clouds.
Star Atlas is among the most talked-about Play-to-earn games. We were excited to help bring the digital experience to life and try to make it just as forward-thinking as the game itself.
Anders Jessen, Founding Partner, Hello Monday
The stars aligned for Star Atlas
The unique immersive digital experience Hello Monday (part of DEPT®) created for the launch of Star Atlas received overwhelmingly positive feedback from both the Star Atlas community and different award juries around the world:
- Webby Awards 2022: People’s Voice Winner in the category Entertainment
- Awwwards 2021: Site of the Day and Site of the Year in the category Users’ Choice
- FWA 2021: Site of the Day
Founding Partner, HELLO MONDAY/DEPT®
To address language deprivation and help bridge the communication barrier between deaf or hard-of-hearing children and their (hearing) parents and peers, creative studio Hello Monday partnered with the American Society for Deaf Children to create Fingerspelling.xyz – a hand tracking experience using machine learning to help learn the sign language alphabet.
The importance of the sign language alphabet
Every year, 2 – 3 out of every 1,000 children born in the US are deaf or hard-of-hearing. 90% of these children are born to hearing parents and, in many cases, their child is the first deaf person these parents have ever encountered.
Without being introduced to sign language at an early stage, a deaf child may miss out on learning language. This can lead to language delay or deprivation, which has long-term negative impacts on a child’s life. That is why it is so important that parents of deaf children have the opportunity to learn American Sign Language (ASL) as soon as possible. This is where Fingerspelling.xyz comes into play.
A playful learning experience
Fingerspelling.xyz is a browser-based app that uses a webcam and machine learning to analyse your hand shapes so you can learn to sign the ASL alphabet correctly. Fingerspelling is an essential part of ASL, the primary language of the American Deaf community. It is often used for proper nouns or to spell a word you don’t know the sign for.
The app shows the user a series of words and uses a 3D model to demonstrate how your hand should be positioned for each letter. When you sign the word, the camera tracks your hand movements and provides feedback so you can make corrections as needed. This helps you to quickly develop your fingerspelling skills and move to the next level of the program.
The fingerspelling game is a great way to introduce the basics of ASL in a fun and playful way. Instead of having to read or watch videos about fingerspelling, we offer an online teaching tool that guides you step by step in how to master fingerspelling – hands on!
Anders Jessen, Founding Partner, Hello Monday
The design and tech behind it
From a design perspective, the goal was to communicate fingerspelling in the cleanest and most simple way possible. Therefore, the 3D-hand is placed prominently in the centre of the site and paired with a playful typeface. Its angled glyphs have a dynamic movement that mirrors subtle visual nuances in the hand gestures, and the slightly off-kilter appearance feels joyful and engaging.
In regards to colour, the aim was to use a palette that was bold enough to draw people in and, at the same time, energise them to start learning to fingerspell. Capturing attention was key.
The 3D hand was designed to feel friendly, with enough detail for users to be able to easily see how the fingers are positioned and bent. A blend of cartoon style and realism was the perfect solution.
When it comes to the technology used, the main feature of the site is the hand tracking, for which MediaPipe Hands is used. It is extremely performant, and is able to do detection, even when parts of the fingers are hidden behind other fingers.
The most time-consuming task was to define when a Fingerspelling letter should be accepted or not. The team developed a rule-based system for each of the letters which looks at the rotation of the hand; whether it faces up, down, left or right. If the hand orientation is correct, it then looks at how each finger is positioned and how much the finger is bent. Setting up the rules was a manual process for each letter which involved a lot of trial and error. To make sure the signs are all taught the right way, an ASL professor helped test all of the different letters.
A useful learning tool, recognised in the Awards industry
The result, Fingerspelling.xyz, is designed for desktop, primarily to be used by parents of deaf children, but it can help anybody become more familiar with the ASL alphabet by providing an easy and simple way to get started.
Within 10 days of launching the site, 150,000 correct hand signs were made. 10 months later, more than 2.5 million correct hand signs had been registered. The American Society for Deaf Children now also uses Fingerspelling.xyz as part of their own training materials, which shows just how useful the tool is.
We created this fingerspelling tool with Hello Monday to help parents support their child’s mastery of sign language and so parents can share the joy of communicating and connecting with their deaf child.
Cheri Dowling, Director of Outreach and Programs, American Society for Deaf Children
Fingerspelling.xyz has certainly made a positive impact for the Deaf community and its innovation has been recognised with prestigious international awards, including:
- Webby Awards 2022: two Webby Award wins in the Diversity & Inclusion and Best User Interface categories, and People’s Voice awards for Technical Achievement, Diversity & Inclusion, and Best User Interface.
- Eurobest Awards: Innovation Eurobest Award, Gold award for Design, Silver award for Digital Craft
- Awwwards: Site of the Day
- FWA: Site of the Day & Site of the Month
- Cannes Lions: Gold in Design & Silver in Design, Silver in Digital Craft
- New York Design Awards 2021: Silver
- Anthem Awards: Gold – Education, Art & Culture, Gold – Responsible Technology in the Product, Innovation, or Service Categories (For Profit) category.
Founding Partner, HELLO MONDAY/DEPT®
Personalize your experience