Heat.wav Maps
A live, interactive map for music creators and enthusiasts alike to discover music and each other.
What is Heat.wav Maps
Heat.wav is a map-based music network. Think of it as Waze for music lovers and creators. Users are placed on a live map that shows what they are creating, listening or attending, alongside a feed on the left that cherry-picks the most relevant information on the map if you're not feeling explorative. The goal of Heat.wav is to revive music discovery through locality and recover the human side of music.
What Can You Do on Here
See who else near you is listening to the same track and maybe make a friend or two from that, go meet and collaborate with an artist you like in the area if you think you got some good productions, or check out what music events to go to since you're already on a map. Ultimately, I want Heat.wav to be the go-to map for music, because I believe music is intrinsically social and brings people together.
The Bigger Mission
More importantly, I want to level the playing field for up-and-coming artists and creators since they can grow more organically from building influence geographically, rather than going through a politicized process such as fighting for spot on established playlists through PR connections or purchasing feature spot on streaming platforms.
Design
Sign Up
Designing for Hard Pleasers
Sign up page is where Heat.wav will make its first impression to any potential users. I was very aware I needed to design for beyond just usability. The challenge is to create a design unique enough that appeals to the creative crowd without alienating mainstream listeners. I went through no less than 20 iterations while testing with an artist collective before landing on the sweet spot between conversion, design, and function.
Product-Derived Branding
As I wondered if all the time I spent crafting the sign up page was an overkill, it turned out I established Heat.wav’s visual identity along the way. An integrated visual identity across product and branding helped Heat.wav gain legitimacy in its infancy. A more in-depth look on how this visual identity came about and translates across medium can be found in the "Iterations" section of this page.
Main View
An Alternative to Scrolling
There is no doubt how scrolling as a main form of interaction manages to engage user and doing so for a prolonged period of time for social media platforms. However, in my contextual research, most music-social platforms that simply adopted the feed layout for music have failed.
Scrolling as an activity requires very little intention. Users are being fed information rather than exploring on their own. Discovering new music and creators is an intrinsically different activity from reading status updates from family and friends, and it requires a form of interaction and layout that recognizes that different. By allowing people to move freely on the map and see what’s happening, it encourages more active and intentional discovery, and thus a more rewarding experience.
Good Design Provides Options
I didn't want to completely abandon the feed as it can be a great way to gently ease first-time users from something they’re familiar with into a new and more engaging experience.
The feed works hand in hand with the map as it digests information from the map and lays it all out for you, so if you're not in the mood to explore on map, the feed is a more familiar way to navigate information on the map.
Smart Zoom
What I did essentially was to put users and their activities on a map, rather than a vertically scrolling feed. This design, of course, comes with its own challenges. One of which is clustering/overcrowding: how can I possibly fit everybody on the map?
My answer to that question is quite simple: I don't have to. Since one major interaction on map is zoom, it means it only has to display every user in a particular area when it's zoomed all the way in; and when the zoom level is at where not all elements can be accommodated, only more popular and relevant users, tracks or events show up. In this case, zooming in and zooming out doesn't just change the scale of geographical coverage but also the relevance of information displayed.
Profile
Creator Centric
Since Heat.wav is positioned to be a creator-centric network, the design of the profile is vital; during user interviews many musicians intended to use it as their personal page or music portfolio.
The oversized gradient circle offers immediate recognition of the Heat.wav brand while the shadows throughout the page are have a system based on the type of content to provide a z-axis hierarchy based on actionability of each item.
On the creator profile, next to their avatar are immediately the track previews featuring the artist’s best work. This brings their featured music to the same prominence of their profile picture, because music is as important as a profile picture when getting to know a music creator.
During interviews I learned that oftentimes creators do not want to showcase their work chronologically while users tend to expect a chronological profile. A balance I reached after talking to a handful of producers and users was to offer a featured section to prominently display whatever is the most important at the top while the rest is chronological.
Many creators depend on the exposure stemming from the network effect, mainly cross-promotion and collaboration. The "More" and "Collaborated" sections provide them a way to maximize that exposure while having full control of what’s being displayed.
Style
At the onset I wanted to create a very native web app experience for Heat.wav. Since over 80% of Heat.wav’s users use Mac as their primary personal computer, San Francisco is no-brainer as a top choice for content font. Despite being a heavily protected font, its wide availability (pre-installed on all Apple devices) makes it as simple to deploy as a line of css.
Longhaul is Heat.wav logotype and permeates throughout the product and branded material when a heavily stylized, oversized text appear. By accompanying this typeface with other distinct Heat.wav brand element, the combination is intended to reinforce visual association with a cohesive brand identity.
The color palette of Heat.wav consists of modern art inspired, slightly desaturated, mid-luminosity solids and more saturated, lower-lumosity gradients. They do not follow any specific existing color system but feedbacks have shown that they create harmonious interfaces that are distinctive enough to not remind people of other products or services.
On-Map Units
Smallest Element Does the Heaviest Lifting
There were many considerations when designing the on-map units of Heat.wav. First is a level of integration both visually and functionally with the rest of the interface. Second, they need to be friendly and inviting to encourage this new form of interaction. Third, they need to feel native to the third-party map API (Mapbox) Heat.wav will be using.
Not only I had to navigate the geographical context of the map, but more importantly create a spatial, immersive experience without diving into graphic intensive WebGL. I achieved so by using and refining shadows on selective elements to create the illusion of space as if they were blimps on a flat map.
Future Proofing through Adaptable Design
I always advocated for efficient design, and one way to approach it is future proofing. When you lay a consistent but adaptable foundation, you don’t have to redesign to support new screen sizes, platforms, or mediums.
On-map units of Heat.wav are designed from the start to support various content types, from media to events to featured profiles. Content is highly integrated into the design itself that supports both on light and on dark graphic elements.
It is also designed with augmented reality in mind as they work in both 2D and 3D space, retaining design and legibility in perspective manipulation.
Process
How it Started
Through a branding class in music sponsorship I took at NYU Tisch School of the Arts and talking to my classmates, I was presented a real pain point that there are so many talented producers around the NYU area, but there is no easy way to figure out who is near whom and where. In order to collaborate, most music producers and artists resort to mutual connections and occasionally approaching people through Instagram or Twitter: none of which is intended for such use, and how one comes across another is random at best with many messages never being read.
I discussed multiple initial solutions with a producer network at NYU called [STAFF], and the one that stood out was to put musicians on a map. I ran this idea again through friends who either make or consume a significant amount of music and weighed the pros and cons of a desktop web approach or a mobile approach, I decided at the time to prioritize the desktop web experience for its screen real estate and the flow of creators from production, distribution to promotion, which all happen on a laptop/desktop. (This decision was later pivoted as I reconsidered how I needed to phase the product.) These were some early drafts of sign up flow:
Alongside with the sign up flow, I started wireframing and putting together a low-fidelity main interface layout that quickly iterated and expanded into a more elaborate design through communicating and A/B testing with my closest musician friends.
I spent a lot of time on this very first detailed iteration of artist's profile. From the start I knew that music from a particular musician should take center stage rather than other elements. Based on inputs from producers and other people in the field, I summarized these important factors for a creator/prosumer:
Customizability: the whole point of content creation is about artistic creation, and creators needs that control over their profiles
Cross-promotion is a main gateway for discovery and exposure. There is should be prominent, dedicated space for creators to showcase their past collaborators or collectives
Chronology: musicians and creators in general don't want to simply display work in a chronological order, because their latest work may not be the one they want to show case first
Competitive Analysis
Once Heat.wav is on its journey to become a product, I knew that it'll no longer stay in a bubble. I took on the role of researching market and service overlap of Heat.wav with existing offerings, and here's how I consider each of these relates to Heat.wav:
1. Treble.fm: LinkedIn for Musicians in the Form Factor of Craigslist
Treble is going after the same market as Heat.wav, which means I have to come up with a much better product or value proposition to gain an edge. By heuristically evaluating Treble's iOS app, their approach is much more geared toward professional hourly-paid gigs then spontaneous collaborations, and their way of presenting musicians and tracks also reflects that. It is a very "get it done" experience rather than a delightful one: focused, but lacks interactivity. I feel as though Heat.wav is going after the same market, it is fulfilling a different need with a different value proposition: just see who's around you and link up from there, a more spontaneously driven action rather than transactional.
After using their app my another takeaway is that simply enabling musicians to collaborate may not be enough of an incentive, or attractive of a value proposition: artists want to collaborate, but the motive for collaboration isn't purely artistic; it's also about business. Collaboration is perhaps the best way to gain exposure in the creative industry as form of cross-promotion, and if Heat.wav can fulfill musicians' need for exposure, it’ll be a much more competitive product.
2. Cymbal: "The Internet’s the Best Way to Share and Discover Music"
After the previous realization, I decided it would be of strategic importance to make a product that appeals to not just those who make music, but also those who care about music deeply, the music enthusiasts. Cymbal is like an Instagram for music enthusiasts, where instead sharing pictures, they share tracks from other platforms to let people know what they are listening to. However, I was skeptical of how simply adopting a traditionally designed feed for music will work out.
I reckoned, if Heat.wav can show not only what musicians are around you on a map, but also what they are listening to, it will appeal to a much broader demographic than simply their cult followings. Because who doesn't want to discover music from the people who also make them?
3. Zenly: The Simplest Way to Know What Your Friends and Family Are up To
Zenly is the predecessor of Snap Map, and the company is subsequently acquired by Snap, Inc. I am very much inspired by how it organizes information and users on map, and I want to bring the power of locality to music and create a map the can become a go-to for all things music.
Main Interface: First Version
With all the aforementioned analysis, I started mocking up high-fidelity still interfaces of my vision for Heat.wav, with clarity, interactivity, and responsiveness as the main principles. The left sidebar is inspired by Google Now cards, which instead of users manually find the information they need, Heat.wav will feed relevant information to them, and serve as a live digest of what's happening on the map as users move around. If they're feeling explorative, they can zoom in, move around and zoom out on the map with complete freedom. To maximize usability and novelty there needs to be a good balance between the familiar and the new: scrolling down a feed is familiar, and it actively diverts users to the map experience which is completely new.
The cards is not only responsive across devices, but also extremely adaptable and effective when it comes to displaying bite-sized information at a glance in goal of a call-to-action: whether it is to preview a track, look up a profile, and check out an event.
Horizontal and vertical stacking also declutters as it creates hierarchy in the information presented: scroll down if you just want to browse high-level information, or stop and dive in horizontally to get to know more with a specific card.
Whatever action that takes place on a card such as "visit page" does not affect the card view, but rather show up as an overlay on the larger map field so the flow of scrolling is not disrupted.
Iterations
Finding Colors
I started by replacing the unapologetically iMessage-esque blue bubbles. For inspiration, I visited the Whitney Museum of American Art, where I came across a painting by Larry Rivers. The colors were so harmonious with just the right amount of pop that I couldn't resist but scan the prominent colors with Adobe Capture and created a palette right from the painting. After picking it up on my laptop and tweaked the palette for digital displays, the result is a refreshed map interface with bold but harmonious colors.
Redesigning Sign Up Page
“It kinda looks like a PowerPoint.”
During Heat.wav’s initial design phase, I spent most of my time focusing on features, delivery of information and main interactions while brand identity and a coherent design language took a back seat. It wasn't until during a user testing session for onboarding when JonBoyIce made a very casual remark that really gave me the motivation and the reason to overhaul Heat.wav's design to form a brand identity that can be universally applied throughout the product and recognizable to the public.
It isn't necessarily a bad thing to have a design comparable to PowerPoint, but it depends on who is our user. That's why I took Jon's feedback to heart, and included multiple producers and artists in the page redesign process since this is the first impression potential users will have of Heat.wav. This process took roughly over a week with many iterations with user feedback right on the spot. See the extensive iterations below:
After I experimented with a map-based layout on first try, with motion and patterns on the second, and with artist spotlight on the third, I was still feeling stuck. I took a step back and thought about what was shared among these designs that's not working, and what I should but have not yet tried. It came down two elements: rectangle and gaussian blur. Rectangle is perhaps the most emotionless man-made shape since it cannot be found anywhere in nature, and gaussian blur lacks the edge because it mushes everything together. Spontaneous user feedback also shared the same sentiment as they refer to such design as "techie." Although these two elements were working in the main interface while occupying a relatively small portion of the screen, the same cannot be said when the same design is blown to a full screen experience tasked to introduce Heat.wav to first-time users.
I went back to one my favorite design element that I came up with for Heat.wav: the CD-shape track preview. This design had gotten many positive feedback that I took for granted, and looking at it again there is something about a circle that is simply more personable than rectangles. From there I went through a great length to refine the design: I swapped out banner image in favor of neon-spectrum color gradient, and replaced the sterile sans serifs with our bold logotype. The result is a clean and passionate design that impressed in every user testing session.
Now it's a matter of how I can adopt this design across the platform and brand. I first tried to add it to the existing sign up page design with either a background image or map, and quickly realized that there is too many colors and lacks a focal point. Instead of keeping the existing design, I opted for a solid, clean background that lets the beautiful gradient speak for itself, and replaced solid blocks with outlines to create a sense of airiness (inspired by a reductionism interior design approach in physical space).
Establishing Brand Identity
Time and effort always pays off. Although I spent an entire week only to iterate the sign up page, I also happened to have figured out our visual identity as a brand in the process. I saw the potential in the endless adaptation of this circular design and quickly went back to the drawing board and started experimenting it with image content.
This adaptation works on almost all images with background and foreground separation, and only requires basic keying. The result are stylized mixed reality designs that convey a sense of excitement without losing the clean and functional aesthetic from the Heat.wav's interface. One can hardly mistaken these designs for anything else. Additionally, all typefaces used in this design are either purchased or open-source.
I also tweaked the logo so that it now stays consistent with the new visual identity. I knew that this logo needed different versions to best represent our brand for various purposes such as social media avatar or on various image backgrounds. Here is the final logo kit:
Making of: Concept Video
In order to better communicate my vision for Heat.wav, I decided to create a concept video to help visualize what's possible by bringing locality to music discovery and as a form of self-expression. Filmmaking is one of my passion of mine besides product experience design, and shooting this video was as much challenging as it was rewarding for the scale of this project and the production value I want to achieve without hiring any external team.
The goal of this project is to showcase Heat.wav’s digital design concept in a real-world context, which means fusing digital design elements with camera-shot footages. The pre-production process involves creating the initial concept and treatment, storyboarding, scripting, and location scouting.
The production took place on two seperate days: one afternoon for about an hour shooting indoor and another half-day for outdoor drone footages. I used a combination of Adobe Premiere Pro CC and Adobe After Effects CC and their dynamic link feature to complete both video editing task as well as visual effects tasks. The soundtrack for this video was meticulously edited and mixed to match the 30-second time code and loudness requirement for broadcasting grade commercial.
Directed, Cinematography and VFX by Yihan Zhao. Special thanks to Alice Berardi for supporting the production.
Music by MagnusTheMagnus - Keep On Lovin' (feat. Seinabo Sey). Edited for this video.