Rising & Shining

Lately, I’ve been pontificating on the ways that design and technology can help enhance the artist-fan relationship and hopefully create more sustainability. To do so, I’ve been looking at practices in the music industry through the lens of user experience design.

To show how the user experience design-thinking methodology works in the real-world music industry, the following article is a case study that highlights design-thinking methods that address brand-awareness for an upcoming recording artist.

Peri El is a soon-to-be Berklee graduate and singer who is preparing to release her first EP, Shades of Blue, along with a full-band summer tour.

This project is about making an MVP Squarespace site to serve as the introduction to the burgeoning singer as well as brand/identity assets that contribute to her EP and brand awareness campaign. The design had to be responsive: ranging in adaption from desktop to mobile to serve an audience that includes bookers, promoters, journalists, and fans alike.

For the new site, I started with a heuristic evaluation of the website’s current content and design. The color theme was monochromatic blues, a visual tie-in to Peri’s upcoming EP title, Shades of Blue. The site included a landing page showcasing the latest music single as well as a navigation menu that leads to 5 categories: About, Music, Videos, Events, and Contact. Social links aligned both the top and bottom of the page. The footer also contained links to Peri’s music streaming sites.

One of the first things I noticed on her Spotify Artist Page, was that there were no tie-ins or links to similar artists. So I started looking into her target audience with the creative brief. Who were her current fans? How did she and they categorize her music and genre? I know labeling music has traditionally held some negative connotations as far as limiting the artist to a particular style. Nevertheless, since I was approaching the evaluation from a fan/user-centered design perspective, I wanted to focus on some taxonomy and classifications in terms of findability for brand-awareness in marketing.

According to Peri and her marketing team, Secret Society, the current fanbase was older (Boomers and Gen X) and comprised mostly of friends and family. Still, she wanted to extend her appeal by targeting people closer to her age range, including Millenials and Gen Z. They also described her music as mainly pop/rock with a heavy jazz and broadway influence.

Keeping her ideal target audience in mind, I began a competitive visual analysis by looking at what current successful recording artists in the same pop/rock genre. For direct competitors, I looked at artists with Broadway and Musical Theater Links, including Idina Menzel, Lea Michele, and Pink. For Indirect competitors, I looked at singers in the same genre, such as Kelly Clarkson, Lada Gaga, and Adele, who still had similar influence, but perhaps less of a direct broadway or music theater vibe.

As part of the creative brief, I challenged Peri and her team to come up with five words that described her musical identity: Change, Love, Awareness, Unfiltered, and Connect. Starting with the research gained from the heuristic evaluation, creative brief, and competitive visual analysis, I was able to create a set of design principles. These design principles focused on 1.)having a visual aesthetic that popped out, 2.)including context within the identity design direction and 3.) maintaining a visual brand consistency that was responsive and legible at many device sizes.

Now that I did the research and defined the general structure for the deliverables, it was time to start concepting. For inspiration, I drew from the current state designs that included chroma-filtered photography and pearly holographic text. Modern design trends that appeal to the ideal target demographic make use of similar neon and glitch looks and effects. So the challenge became how to make these trends relevant to the audience but still adhere to the design as mentioned earlier principles and not translate as hackneyed.

Color trends, like music genres, are often given a bad rep. However, in the fashion and marketing industries noticing trends embraced by tastemakers and consumers often leads to defining characteristics that mark a generation. As such Millenial pink became contextually related to gender fluidity and neutrality. Cultural meanings regarding Gen Z yellow often connote a fun, somewhat edge appeal.

Noting these insights from color theory and generational marking, I started thinking of ways to co-ordinate a mostly blue color palette. Considering the exact EP name, Shades of Blue. I also wanted to incorporate the idea Peri had expressed in her biography that all the songs on the EP were inspired by getting knocked down and then rising — how those experiences, in turn, lead to this concept of coming “out of the blue.”

I was able to come up with four themes: 1.) A modern chroma-neon-holographic, 2.) One based on color-separations and duo-tones, and 3.) A third considered double-exposure and risograph technique.

Peri had also mentioned that she liked the idea of using her lips as representation both of herself as a singer and the things she had to say — literally the “unfiltered” words out of her mouth. She had mentioned the iconic Rolling Stones mouth logomark as inspiration, and she also referenced a series of photographs from a recent shoot where she wore blue-glitter lipstick, which I used for a fourth theme along with a bokeh-light inspiration.

Because we were limited to two sprints based on budget and marketing campaign-timeline constraints, I kept the style tiles simple. Before moving on to high-fidelity designs, we conducted an unmoderated online survey. The preference test gave us a better idea of similar audience expectations and their mental models. We aimed for 5–10 participants to set the baseline but concluded with 19 users after four days who spent an average of 4 minutes and 28 seconds taking the test.

The survey started with a question asking music fans how they usually discovered new music. Then participants were shown the quad of style tiles prefaced with the description that these were proposed styles for an upcoming Berklee Music graduate and the instructions to pick the one they preferred, and then to describe why they chose that one.

42% of respondents noted that they discovered new music through Spotify with recommendations and friends, each accounting for 21% of answers. 16% said they found new music through Pandora, which was the surprising fourth response since prior social media and marketing efforts overlooked this potentially significant opportunity.

It highlights the artist the best in my opinion, doesn’t take away any focus from her, doesn’t make me ask “what?”. — User TEsting Participant, Peri El User Interviews

The answers revealed an affinity towards the pink and yellow accent colors, which accounted for 32% of the participants’ preference rationale. 26% prioritized clarity and photography as the main reason for fondness. 21% stated that simplicity, readability, and legibility lead to their decision. These results not only defined a definite starting point for the high-fidelity UI design in the next sprint but also validated that the context, symbolism, and mental models successfully communicated visually from the creators to the viewers.

Before focusing on structure, we had to make decisions about content. So the next step consisted of creating the logos and brand assets for all collateral related to the Peri El Shades of Blue brand awareness efforts. Product deliverables included a cover art re-design for 1 (2, time permitting) music single(s) and the EP cover art design. Then the merchandising elements, for items such as graphic t-shirts, stemmed from the related brand-identity and brand awareness assets. On a molecular level, this meant we needed logo typography, title typography, as well as a logomark.

The feedback received from user testing revealed that the vertical and abstract logotypes were more challenging to read and understand. Since our goals included brand awareness and findability, we wanted to ensure legibility and readability. I returned to the font styles I had researched in the concepting phase, such as Lady Ga-Ga’s “Joanne” title treatment, The Rolling Stones “Some Girls” title style, Taylor Swifts signature logo and “Lover” font as well as Pink’s handwriting-style logo.

When it comes to typographic psychology, handwriting and script fonts can reflect friendliness and creativity. It turns out that the Joyful hand-brushed signature font was very similar to the recording artist’s autograph, and thus it personally resonated with the Stakeholder team. I chose Joyful as distinct from other script fonts for several reasons, including the organic brush strokes. Along with having the abstract connotation with creativity, it also had a subtle mimic of lipstick texture. Because we were developing a lip logomark as more abstract representation, the brushstroke typestyle correlated nicely within that relationship context, while at the same time offering a nice visual contrast to the smooth, vector gradients and opacity changes used to create the lip logomark.

I used the same logic and consideration when it came to the brand song-title treatments. Going back to my initial research, I kept coming back to pink’s exclamation mark in her name brand, and I thought it was such an appropriate appropriation for the Unfiltered treatment. It was declarative and evoked the essence of that particular song. Rebel Script had the same modern and inviting feel as Joyful, but it was more marker-like in design and boldness, but less controlled in form and stroke.

Similarly, I wanted to put the same amount of context and consideration into the title treatments for the EP and first music single, Slow Down. To add some more visual interest and contrast, I looked at the typographic psychology of sans serifs to embrace the modern and engaging appeal to our ideal target audience. Building upon the design principles of clean, simple, and clear to enhance readability and, by extension, further discoverability, I took my inspiration for Slow Down from Lady Gaga’s “Joanne” cover art typography in the use of Licence Plate USA as a choice.

Slow Down had the same declarative voice as Unfiltered, but the words needed a different visual representation to cement the meaning. Contextually the words “Slow Down,” mainly when used together, often evoke the color yellow as well as yield road signs. When styled in the Licence Plate USA font, the meaning is highlighted through the construction of the lettering, with a strong bold foundation but a curvature that suggests “coming into focus” (in my opinion). This combination of yellow along with the associated mental models of cars literally slowing down or yielding was used to blend the ideas of phrases, “coming into focus” and “out of the blue.”

For the EP cover typography, I took inspiration for Kenny Burrell’s Midnight Blue album cover on Blue Note Records. However, instead of using Neue Aurora typeface, I used a customized Wagner Grotesk lettering to pay homage to the jazz sound influence in structure. Then I updated it with the more modern and brand-consistent blue-based, pearl-sheen, holographic mesh gradient.

With the brand content designed at a molecular level, we could start applying it to the interface designs both digitally and physically on products ranging from the music singles and EP cover art design to t-shirts for merchandising.

For the second and final sprint, we focused on the high-fidelity user interface design, particularly in regards to the Squarespace website. For photography, I continued with the spit duo-tone cyan and magenta gradient map filter to build the chroma photographic filter effect and build upon the idea of Peri’s portraits coming “out of the blue” into the magenta-pink, accent color for all of the website hero-images.

Aktiv Grotesk is a bold sans serif font that fits with the modern brand character and readability design principle. For a color palette, I built upon the monochromatic shades of blue by using the cyan (primary brand blue), magenta (Milllenial pink), and (Gen Z) yellow color separation idea as the accent colors to add color pop, contrast, and create visual interest.

It was much to accomplish in a short timeframe, and ideally, I would have liked to conduct more user testing, but I’m always up for a challenge. The new Squarespace 7.1 modular CMS made it easy to set a focus on all the hero headers, so they centered on the face no matter what the device size. The global design settings made it easy for any new webmaster to take over content management with typographic consistency, while still allowing for some atomic-level customizations.

View live at https://www.periel.live/

If you enjoyed reading this, please applaud & share the story with others.