I completed this responsive design project for my visual design course through General Assembly. I was given a creative brief and copy deck to leverage to craft this digital experience.
Role + Team
I spearheaded this project individually and participated in several feedback sessions with my instructor to iterate and improve my design.
Batuque aims to cultivate a community of audiophiles that fosters musical exploration and constructive collaboration
BATUQUE'S DESIGN STRATEGY
Through modern design, a unique color palette and a nod to global music culture, Batuque will attract users looking for a deeper streaming experience.
Batuque aims to attract a primary audience of young men who are socially active and consider music a huge part of their identity.
Secondarily, Batuque woos a non gender specific audience who enjoys music but has more mutable and impressionable taste.
The streaming space is notoriously competitive, and to better understand how the competition distinguishes themselves, I analyzed Spotify, Tidal and Apple Music's UI patterns.
Predominately dark UI
Green accent color
Image heavy layout
Less dense layout
Images with blur effect
Predominately dark UI
Bright, pastel colors
Varied image sizes
More complex IA with tabs
Centering my search around the keywords trendy, modern and social, I created moodboards for imagery, typography, color and layout.
After the competitive analysis, I realized a common theme with streaming sites was a minimal color palette with a strong accent color, which I wanted to echo. To do this, I created monochromatic color palettes leveraging colors from the moodboards that stood out. I then created tiles to preview what these colors would look like.
Leveraging blue as Batuque's accent color created a modern and cool aesthetic, but since blue is such a gendered color, I thought it might alienate Batuque's secondary audience.
Green stood out as a front runner due to its high contrast and edgy feel. It's also a color that doesn't elicit gender bias, but Spotify also features green as its accent color so it felt too close to competitors.
I loved Batuque copper because of its uniqueness and inclusive feel. The gradients I created with it also gave the color nice dimension, and this color wasn't used much by competitors. I settled on this color as Batuque's accent color.
I wanted to keep the body content modern and legible, so I was mainly between Roboto and Montserrat. I wanted to leverage the logo as an opportunity to create a brand around Batuque, so I chose Monoton, which I though evoked a bit of a retro feel and also mimicked sound waves with the lines. Below is some of the exploration I did.
Montserrat + Roboto
Monoton + Fira Sans
Monoton + Roboto
Montserrat + Fira Sans
In Portuguese, Batuque means a drum beat. I wanted to evoke a feeling of movement reminiscent of sound waves and also pay homage to the meaning of the word Batuque through the logo.
I found the font Monoton, which features several lines to create letters, and I thought to manipulate these letters to achieve my design goals.
I also leveraged the copper monochromatic palette to fade the lines as they got farther out from the center of the Q also mimicking the physical properties of sound waves.
MOBILE APP LOGO
I created a mobile app icon using Batuque's Q as the logo. The copper really stands out here, because there aren't many apps in the app store that have copper or orange as the primary color.
I composed a desktop style guide to influence the visual design. For the fonts, I had a base of size 20 with a ratio of 1.25 to influence the font sizes across the experience and create a sense of order amongst the different font hierarchies.
A RESPONSIVE EXPERIENCE
I created landing page mockups for desktop, tablet and mobile devices.
Although these aren't fully functional prototypes, feel free to take a look a the visual design through InVision for a more native experience by clicking on the images.
Click to view each experience through InVision