Timeline: 4 weeks
Roles: Branding Designer, Product Designer
The Inspiration
Screencaps of the 8Tracks interface, circa 2018.
8Tracks was a playlist-sharing service where users shared themed playlists with unskippable songs based on genres, vibes, or, more commonly as the user base expanded, fandoms.
I loved 8Tracks. As a music-loving teenager in the early 2010s, 8Tracks broadened my music tastes in the absence of an institution like a local record shop, and as I developed my illustration skills through interfacing with fandom, I found myself being drawn by those communities to the service over and over again.
Through my experience and knowledge of online fandom culture and my love of music, I wanted to develop a web player that would carry that tradition while also allowing for more multimedia capabilities to reflect current trends in fan work creation, which resulted in Weave: a music player for themed and narrative playlists with timed visual components like art or writing to create shareable audio-visual experiences.
Validating the Concept
Examples of web-weaving works on Tumblr.
While the experience justifying the concept is largely anecdotal, it is created from an understanding of fan work traditions that span at least twenty years. Everything from aesthetic boards, to alternate music videos, to themed playlists, points to a larger trend of using new media to communicate admiration for works with fan followings.
The name Weave itself comes from a tradition started on Tumblr in the 2010s called Web-Weaving: a derivative practice in which a creator takes samples of work like illustrations and poetry to ‘weave’ a concept together, often in an analytic or metatextual manner.
I typically start my explorations for brand development by establishing messaging, developing a moodboard, and arranging typeface pairs at the same time. My moodboards tend to be more ‘vibes-based’ than in pursuit of a solid aesthetic off the bat; this helps me connect an aesthetic to the messaging rather than trying to develop each aspect independently.
If I am also developing marketing strategies for a brand, I will also develop positioning statements, tone words, and user personas to better understand
how to tailor the brand to its corresponding market.
I landed on using Magistral Cond for a primary accent typeface to build the final Weave logo on, both for having a retro-futurist appeal similar to era-appropriate logos like NASA’s or Atari’s, and for the opportunity the individual glyphs gave to literally ‘weave’ the letters together. I switched the secondary font to Glacial Indifference, a dupe of ITC Avant Garde, both because it had a thinner, slightly more modern feel, and so I could implement it into the final prototype.
Early logo ideations, typeface presentation,
and test logo animation for Weave.
Initial moodboard and typeface explorations for Weave.
Positioning statement and user personas for Weave.
The original logos and wordmarks for Weave came out, as one friend put it, “a lot more wave than weave.” While ITC Avant Garde is evocative of 80’s advertising and design, using a Bauhaus-esque typeface like Blippo in an effort to reference the original SONY Walkman logo made the branding feel too generic.
Final logo, typeface choices, color palette,
and animated logo for Weave.
Process Time
I’m not usually a digital product designer, so the biggest challenge of this whole project was learning to be one in real time while also developing the brand. It was a fantastic exercise in balancing responsibilities on a short deadline, and I’m happy that I pushed myself to make a prototype to sell my vision!
I started my wireframes by analyzing and building off similar music streamers with web apps like Spotify and Pandora, and applying some standard functionalities such as playback and volume buttons, a search bar, and sharing options to get the wireframe to a ‘baseline’. From there, I started ideating different functions like playlist browsing, image presentation on playlists, and search displays.
Early prototype of ‘record store’ style playlist browsing.
Prototype Bootcamp
Prototype footage of the playlist loading function.
Initial wireframes for search results and playlist presentation.
The final interface didn’t stray too far from the original wireframes. The most notable difference was the implementation of a ‘folder’ system to scratch the analog itch that the 80s aesthetic begs. I also ended up reinventing the image display system: rather than a simple left-to-right scroll, I developed a string board system, so users could time both image reveals and connecting strings between each song to better communicate their ‘web-weaves’.
Prototype footage of the playlist loading function.
Personalize
It!
One of the primary sharing features on Weave is the modular playlist cards used for selection. Inspired by the format of vinyl record covers, the cover is displayed first, and then the “back” is revealed upon selection, along with Dymo Label-inspired tag buttons. While Weave is mostly built for fandom spaces, there is absolutely room for original work and even generic concepts… And a whole lot of silliness.
Takeaways
Weave was, above anything else, an exercise in unapologetically wearing my passions on my sleeve and incorporating them into my design practice. Weave is a niche product: while it has many broad applications, its primary target is a very small community of online creators. However, while the community of fan creatives is small, they are also loud and dedicated. Weave is, thus, an assertion that a product can start from a niche purpose and expand on itself later.
I love fandom culture, warts and all: fandom was where I first honed my skills as a writer and artist, and set me up for the creative career I would later develop. I conceptualized this product because I see fandom culture not as a barely-exploited target market needing an insider to correctly cater to it; I see it as a thriving creative culture that is constantly transforming itself in new and imaginative ways to celebrate the works that fans build themselves around. Weave is indulgent, but it’s indulgent for the sake of other creatives.